CSS: how do I force contents in a table cell to stay on one line when browser size reduced
Tags: html,css
Problem :
I have a table that has a column containing two buttons. When the browser is reduced in size, the column (i.e. the td) containing these two buttons breaks. Does anyone know how I could prevent this from happening using CSS? In other words, force the two buttons to stay next to each other?
I've tried the following and both failed:
- putting a width in pixels on the td
- white-space: nowrap
Here is the html:
<table>
<tr>
<!-- several other tds before this one -->
<td>
<a class="sg-icon sg-i-ok"></a>
<button class="k-button sg-grid-filter-clear-button" ng-click="clearFilterValues()">x</button>
</td>
</tr>
</table>
And here is the styling from Chrome:
Solution :
Wrap the <a>
and the <button>
in a containing <div>
and give it a fixed width:
<td>
<div class="fixed_width">
<a class="sg-icon sg-i-ok"><img src="http://placehold.it/30x30"></a>
<button class="k-button sg-grid-filter-clear-button" ng-click="clearFilterValues()">x</button>
</div>
</td>
.fixed_width {
width: 80px;
}
CSS Howto..
This is the right way dialogBox.setPopupPositionAndShow(new PositionCallback(){ @Override public void setPosition(int offsetWidth, int offsetHeight) { // TODO Auto-generated method stub dialogBox.setPopupPosition(parentDockLayoutPanel().getOffsetWidth()- dialogBox.getOffsetWidth(),...
.bw { -webkit-filter: grayscale(100%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .bw:hover { -webkit-filter: grayscale(0%); }...
How can I reference in CSS the div after each h3 so I can set a style that I want to apply to all first div after any h3...
You can use counter-increment property to achieve this. In the example below, I first reset the styles of li element to none, you can actually reset it on the ol...
What you're looking for is the document.styleSheets property, through which you can access your css rules and manipulate them. Most browsers have this property, however the interface is slightly different...
Write like this: .dashbord .active:after{ content:''; position:absolute; right:-11px; top:3px; z-index:-1; width:22px; height:22px; background:green; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); box-shadow:-3px 0 0 0 rgba(153,40,19,1) inset; background: -moz-linear-gradient(left...
Seems like you are trying to reproduce a <fieldset> element. So why not use that element? <form> <fieldset> <legend>Wählen sie das anzuzeigende Model</legend> <select id="selectModelDDL" onchange="createTable(this);"> <option value="1">1</option> </select> </fieldset>...
How about this: .hClass p{ padding-left: 20px; } .iClass{ font-style: oblinque; color: rgb(136, 136, 136); font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif; margin-left: -20px; } See: http://jsfiddle.net/gVJK8/5/...
use opacity and position fixed. .for-watermark-div { position: fixed; bottom: 257px; right: 100px; opacity: 0.5; z-index: 99; color: hotpink; /* Rotate div */ -ms-transform: rotate(60deg); /* IE 9 */ -webkit-transform:...
th.big-col{ width:400px !important; } table#example{ table-layout:fixed; } The !important for the width is necessary to override any inline styles being applied by datatables, and possibly other styles being applied by...
This is how CSS clearing is supposed to work. The clearing element will go underneath any prior sibling floated elements. You should use one the numerous cleafix methods out there....
I would recommend a preprocessor based framework like Foundation for Emails.
I made it work by implementing the box-sizing:border-box attribute: /*Initialize*/ ul#menu-my-integra, ul#menu-my-integra ul.sub-menu { padding:0; margin: 0; } ul#menu-my-integra li, ul#menu-my-integra ul.sub-menu li { list-style-type: none; display:inline-block; width:20%; background: #666;...
A JavaScript MVC framework makes it easy to manage complex controls. Flixster / Rotten Tomatoes is a Spring shop and used JavaScript, Backbone.js and jQuery UI to create this site...
Use this code , <div class="grilleLayer"><div> .grilleLayer { width:100%; height:700px; background:url('http://s8.postimg.org/90qdtbn1t/temp.png') repeat scroll left top; } body { background: #e0e5e1; /* Old browsers */ background: -moz-linear-gradient(left, #e0e5e1 0%, #ffffff 100%);...
I have made some amendments to Tim4497's method. This method allows for any number of list items, and has the advantage of being a pure Javascript solution (no JQuery required!)...
The "eq()"-selector will help you here: If you want to get the second box in your grid you can simply add ":eq(2)" to your selector: $('#grid .box:eq(2)').css('background', '#f00'); ...
I wound up using the concepts here: http://msdn.microsoft.com/en-us/library/ie/dn254949(v=vs.85).aspx Essentially like this: function goToSlide(indx) { var wdth = $lis.first().width(); var newLoc = wdth*indx; $ul[0].msZoomTo( { contentX: newLoc, viewportX: 'left', contentY: 0,...
set padding 0px for header and add line-height .header{ width:300px; height:auto; border:1px solid grey; padding: 0; line-height:25px; } ...
It is not possible to do this cross-browser with plain CSS. As @tea-totaler has mentioned, it is however possible in Google Chrome. It is however possible to do this using...
To disappear with it, set it's thickness to 0 instead: border: 0; ...
Try like this: Demo a img { margin:0 auto; display:block; } ...
jQuery (javascript) Method - Best for compatibility. In the example below the first nth-child filter selects every 4th item starting from the 1st. Then it filters every 4th item starting...
Since a js solution was suggested and pure CSS isn't presently possible: Live demo (click). Sample markup: <p class="bold-second-word">John Smith</p> <p class="bold-second-word">This guy and stuff.</p> JavaScript: var toBold = document.getElementsByClassName('bold-second-word');...
If you change the display type of your div.wpapl-person to inline-block, that should deliver the correct behaviour, were it not that you add <br/> after each of those divs, thus...
The only absolute way to make sure your rule will take precedence over the others is to use the !important keyword: .c1.c2 { color: red !important; } Note that if...
Really hacky, but this will work: dd { width: 300px; } dd label { padding-left:20px; display:block; } dd label input { margin-left:-20px; display:block; float: left; } http://jsfiddle.net/T86h8/407/...
you can not add span to the button value all will behave like string or value the for that you can use the the <button> tag: <button type="button" class="arrivalbutton">From my...
Method 1: Wrap telephone number in b or strong tag. <div id="contact_info"> <h3><a id="contact">Contact</a></h3> <p>If you are interested in chatting or want more information on what I have been working...
@Art; you have to write like this: HTML: <div class="left">left fix width</div> <div class="right">right no fix width</div> CSS: .left{float:left;width:200px;margin-right:30px} .right{overflow:hidden} check the fiddle http://jsfiddle.net/sandeep/4RN2j/...