Posts

Showing posts with the label Width

Border-width In Em - But Set A Minimum Border-width

Answer : In CSS3, you can try to (ab)use the max css function, if your browser supports it. border-width: max(1px, 0.1em); border-style: solid; border-color: black; Unfortunately this awesome CSS3 feature isn't supported by any browsers yet, but I hope this will change soon! But in CSS2 – no, you can't. However, you can use JavaScript/jQuery to loop through all elements and increase the border size to 1px. But this will eat so much performance your browser is gonna crash if you have too many elements on your page (e.g. a table with more than 50-100 rows). So in other words, no it's not possible. $("[id$='ReportViewerControl']").find('*') .each(function () { if($(this).is('#ParametersRowReportViewerControl *')) return; //console.log("Processing an element"); //var cls = $(this).attr("class"); // Don't add a border to sort-arrow if ($(this).is...
Post a Comment
Read more

CSS Input With Width: 100% Goes Outside Parent's Bound

Image
Answer : According to the CSS basic box model, an element's width and height are applied to its content box. Padding falls outside of that content box and increases the element's overall size. As a result, if you set an element with padding to 100% width, its padding will make it wider than 100% of its containing element. In your context, inputs become wider than their parent. You can change the way the box model treats padding and width. Set the box-sizing CSS property to border-box to prevent padding from affecting an element's width or height: border-box : The width and height properties include the padding and border, but not the margin... Note that padding and border will be inside of the box. Note the browser compatibility of box-sizing (IE8+). At the time of this edit, no prefixes are necessary. Paul Irish and Chris Coyier recommend the "inherited" usage below: html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } For ref...
Post a Comment
Read more

CSS: How To Get Browser Scrollbar Width? (for :hover {overflow: Auto} Nice Margins)

Answer : All scrollbar can be different according to browser and OS so you must use javascript. I found a cool snippet here : http://davidwalsh.name/detect-scrollbar-width And that an exemple : http://jsfiddle.net/a1m6an3u/ The js code create a div .scrollbar-measure , look the size of the scrollbar and return it. It look like this : var scrollDiv = document.createElement("div"); scrollDiv.className = "scrollbar-measure"; document.body.appendChild(scrollDiv); // Get the scrollbar width var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; console.warn(scrollbarWidth); // Mac: 15 // Delete the DIV document.body.removeChild(scrollDiv); So I quickly added some jquery code but I think you can do it in only JS. Whilst tomtomtom's answer works fantastically, it requires an external CSS snippet that seems somewhat unnecessary, and Yurii's answer requires jQuery, which again seems sorta overkill for this. A slightly more up-to-date and self-contain...
Post a Comment
Read more

CSS To Make Table 100% Of Max-width

Image
Answer : Like this demo css table{ width:100%; } You need to use: table{ width:100%; table-layout: fixed; overflow-wrap: break-word; } Demo I have a very well working solution for tables of max-width: 100% . Just use word-break: break-all; for the table cells (except heading cells) to break all long text into several lines: <!DOCTYPE html> <html> <head> <style> table { max-width: 100%; } table td { word-break: break-all; } </style> </head> <body> <table border="1"> <tr> <th><strong>Input</strong></th> <th><strong>Output</strong></th> </tr> <tr> <td>some text</td> <td>12b6459fc6b4cabb4b1990be1a78e4dc5fa79c3a0fe9aa9f0386d673cfb762171a4aaa363b8dac4c33e0ad23e4830888</td> </tr> </table> </body> </html> This will render like this (when the screen width is ...
Post a Comment
Read more