How do I truncate a table if it is wider than its container?
For example, say I have a div with width = 300px;
Inside the div: one table with 2 td, each with width = 200px;
Obviously, 200 + 200 > 300.
However, what HTML does is make each td 150px wide.
Is there a way to respect the td width (200) and truncate the last td so that only its left half is visible?
I have tried overflow:hidden on the div but the table is still 300px wide
Set the wrapping div to overflow hidden:
.wrapper {
overflow: hidden;
}
Here's the fiddle: http://jsfiddle.net/qmby4/
Please try using max-width property
Use the CSS overflow:auto tag on your div.
Check out more here:
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Related
After you have chosen a field name, then you start typing in the value textbox, the dropdown defaults to a width of 150px which causes lots of things to be cut off. A scrollbar shows up so you can scroll left and right, but I would like to figure out how to set the minimum width of this element.
The css path to the element defining this is:
body > div.gwt-SuggestBoxPopup > div > table > tbody > tr.suggestPopupMiddle > td.suggestPopupMiddleCenter > div > div
It seems to be an inline style in the element
<div class="" style="overflow: auto; position: relative; zoom: 1; height: 322px; width: 150px;">
The field dropdown seems to re-size dynamically, so it does not get scroll bars, the suggest box starts at 150px and resizes sometimes, but it doesn't seem to have any rhyme or reason.
I added the following to my stylesheet:
.suggestPopupMiddleCenter > div > div
{
min-width: 300px; !important
}
But that also affects the field dropdown, which appears to be working properly.
Is this a bug, or is there a configuration that I can use that will allow the value suggestion box dropdown to dynamically resize based on the widest element?
It is hard wired in the tardis branch https://github.com/salk31/RedQueryBuilder/blob/tardis/redquerybuilder-core/src/main/java/com/redspr/redquerybuilder/core/client/expression/SuggestEditorWidget.java#L107
It probably could use some rule to choose the width. Best if you raise a bug and make a suggestion?
I'm currently developing a site which requires headings as such:
My initial idea was to do this with border-bottom, but how would I limit the width of the border so that it doesn't go all the way across? The border needs to stop when it gets to the text.
Is this possible?
h1 {
background-color: #fff;
line-height: 1;
margin: 0;
display: inline;
position:relative;
z-index: 1;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid;
position: relative;
z-index: 0;
margin-top: -7px;
}
The length of the border is decided by the size of the element it is bordering. You could create another <div> inline with the text with border-bottom: 1px; and the other borders set to 0. You could then change the margin or width of the <div> to alter the length of the line. Note that you'd have to set a width, because an empty <div> has a width of 0 by default, so won't display.
Another possible (but not recommended) way to do it would be to use a <hr> but these are not well supported in HTML 5, so I would choose the first method personally.
A solution I can come up with is to give the title the same background-color as the page's background, and then to either transform: scale() the title up so that it overflows with the border of its parent, either scale the parent down so that its border hides behind the title's background.
See here for an example:
http://jsfiddle.net/WjRqC/1/
Oh, also, scaling can be replaced by making the title position: relative and moving it downwards a few pixels (and giving it a bit more vertical padding if you don't want the text too close to the line). Actually this is probably a better idea than scaling, because it's not CSS3, so it's more compatible.
Lookie here:
http://jsfiddle.net/7affw/1/
I was able to change my homepage so that the images now stretch full width on the screen. Now I just need to fix the text and content so that it has a max-width of 960px. Below is an image of what I am trying to fix.
If I can get the "Mobile Job Search" section/text back to how the rest of the pages are on the website that would be perfect.
The two divs are .myLeftColumn2 and .myrightColumn2
Any help would be great. Thanks so much!
www.jobspark.ca
Just add that CSS to your code, I hope that work for other pages too...
CSS
#content{
max-width: 960px;
margin: 0 auto;
}
Put the whole text inside a new div, then write:
#newdiv{
max-width: 960px;
}
Into your style sheet. This should work perfectly!
You are probably going to have to enclose the content below the image in its own div, and restrict it's width.
Edit I looked at the source html, but it is quite messy.
Just to see if this changes anything, located all the divs like this:
<div class="row sqs-row" id="yui_3_7_3_1_1369586030814_180">
Here's the css :
.sqs-row { width: auto !important; *zoom: 1; }
edit that width to the width you want (960px)
.sqs-row { width: 960px; *zoom: 1; }
I have the following fiddle for people to see http://jsfiddle.net/defaye/DhaHP/4/
The result on full screen: http://jsfiddle.net/defaye/DhaHP/4/embedded/result/
The problem I'm having is that when going past a certain width of resizing the window, the left column departs from the group. I need them to remain touching, with the centre column having a min-width 400 to max-width 800px, the sides width: 200px. The header should be 100% however.
Anyone know how to solve this problem? It is driving me insane.
Here is another example, compatible with IE6+: http://jsfiddle.net/DhaHP/12/
Result: http://jsfiddle.net/DhaHP/12/embedded/result
Abstract of the changes:
Changed #left and #right to be above the #center (#right before #left);
min-width and max-width on #container to 800px and 1200px respectively;
No float on #center;
margin-left and margin-right on #center equals the width of each side column;
float-left on #left and float-right on #right;
The only obs on this for IE6 is the min-width and max-width that doesn't work without a little hack or the use of IE7.js. On IE7, it works as should be.
Here's a working fiddle: http://jsfiddle.net/PhilippeVay/DhaHP/8/ (edit: now works with Chromium)
Modifications made:
HTML: #left before #center column
CSS: no relative positioning at all
display: table; on parent and table-cell on the 3 columns. This will be visually (and only visually) a table. Well, a table layout and not a table structure.
200px width on #left and #right
table-layout: fixed; on parent to switch the table algorithm to the one that respect dimensions as told by the author and not those guessed by dimensions of content of cells
Constrained widths for the parent min-width: 800px; (400+200+200) and on the grand-parent max-width: 1200px; (800+200+200) (edit: max-height on #container only worked on Fx, not Chrome). To my surprise, it works as is.
Compatibility: IE8+
You can play with inline-block with IE6/7 if needed (well, display: inline; zoom: 1; the IE6/7 equivalent of inline-block for outdated browsers)
Is there any way to achieve this in CSS3?:
height: 100% -110px;
My context:
You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational way to handle this, but you will need to wrap you element in a other one:
body {
height; 100%;
padding: 0 0 20px;
}
div#wrap {
background: #fff;
height: 100%;
padding: 0 0 20px;
margin: 0 0 -20px;
}
div#wrap div { //this would be your actual element
height: 100%;
background: pink;
}
What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon.
As for your example, maybe sticky footer will be some inspiration for you.
Edit
Nowadays it's well supported by major browsers:
http://caniuse.com/calc
Directly like that i'm not aware of any feature widely adopted to do that.
But there is a easy method to achieve the effect.
Put all element inside a container <div> with 'height: 100%', this container should have position relative so you can position the other elements inside it relative to its position. place the header on top and the footer at bottom with absolute positioning and calculate with javascript the height that the content div must have.
You can also subscribe the 'window.onResize' event to recalculate when the window is resized.
I know this is not a clean and prety solution, but is the one the you can make work well in almost any browser.
In the context it was given the 2nd div height value doesn't really matter. Actually it's only important where that div starts and where it ends.
In other words height = vertical end - vertical start:
#div2 {
position:absolute;
top:90px;/*20+50+20*/
bottom:20px;
}
http://jsfiddle.net/cGwrw/3/