I have a div element that is supposed to be a horizontal main menu. I used a ul and its lis as menu items. lis are inline-block so they make a horizontal menu. I set the div's width to 100 percent but I didn't set any height for the div, so its height is defined by its paddings, borders and contents. Now I want to fix its height to whatever it is (without directly defining), so I can use overflow to hide overflowed menu items on smaller screen sizes. I think it would be good for responsive designs. Can it be done with pure CSS?
Currently, as I make the browser's width smaller, menu items pile up, make more than 1 row of menu items and force the div's height to fit. I want to see only the first row of menu items.
You can ensure the contents of the div stay on one line using the css
white-space: nowrap;
If you want multiple lines, you can do something like
max-height: 3em; (or whatever value is appropriate)
Beware of how the overflowing content looks as it spills out of the element, it may abruptly clip out of view and look a bit nasty. If it is just text you can use
text-overflow: ellipsis;
But if you are dealing with actual elements, it's more complex! It's possible to create nice fades using only css and pseudo elements though, that's what I would do.
Related
I am creating an Angular application with Bootstrap and i stumbled on a problem. I am trying to size one of my divs in the page where the height is fullscreen, however i have a navigation bar and one other element above this div (i am also using padding from the above element). I want my div to be exactly right height to fit from the last element to the bottom of the page.
Now the problem is, when I set style of my div to 100vh the site doesn't fit and i get a slider to scroll through the whole page. Is this because vh doesn't take the navigation and the other element into account and just set my div to default screen size? And how to correctly repair this problem that it will work the same across any screen?
There are several approaches to get your div the height you're looking for.
Use the calc css function. It should be something like this:
div {
height: calc(100vh - 60px);
}
Replace the 60px with the pixel size of your navigation element.
[Alternate solution] Use flexbox css styles. You'll need to use a column flexbox setup and flex: 1 on the element you'd like to take up the remaining height.
You can have a container div of 100vh. And inside it your nav bar will be sticky-top in a child div. And your other child div is the parent of your content.
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
I've got a responsive 2 column layout going on. The first column is a fixed width, while the second one is using the css calc property to subtract certain pixels from its 100% width.
What I want the second column to do is to scroll horizontally, regardless of the screen size or width of it. I threw together a quick pen to illustrate what I'm trying to do: http://codepen.io/trevanhetzel/pen/nbdIt
As you can see, the second column has multiple .thing divs inside of it that are floated left and have a defined width. What I DON'T want is for these .thing divs to drop down to another line when they run out of room inside the second column.
How can this be achieved? I tried messing the overflow property, but I think I might need another container div with some different positioning properties or something. Any advice?
Here you go: http://codepen.io/seraphzz/pen/lutjb
The solution to this is:
Change .thing from float: left; to display: inline-block;. This keeps those elements in line, but also keeps them in flow so the parent element acknowledges it has children
Give section a white-space: nowrap; property. This prevents the .thing elements from going to another line.
Give section an overflow-x: auto property. This allows the div to be scrolled horizontally, but hides the scrollbar if there are not enough children to need it.
Lastly, give section a font-size: 0 property. By default, elements that are display: inline-block are treated like text, and are thus given an automatic margin. Setting font-size: 0 on the parent of those elements removes that automatic margin, allowing you to set the margin as you like. Remember, you will need to manually set the font-size of these child items if they contain text.
I have a list inside a div with text of varying lengths. How do I make the div's width hold all of that content. I've tried width: auto (without actually knowing what would happen), but the div stretched out to the left of the window. Is there a property with which I can use to accomplish this?
If I'm understanding you correctly, you can use display: inline-block;
http://jsfiddle.net/H66TB/1/
I'm taking you to mean that you want it to stretch to the content and not just go all the way to the end of the screen.
In my project, I need to implement a container div that should have an unknown (unlimited) width, without breaking to a new line if its width overflows through the browser's window.
The container div has the CSS property of (white-space: nowrap; display:inline;) and the components inside this div has (float:left) CSS property. All widths are set statically. To test the behaviour, i used a button that calls a javascript function that appends a component inside the container div.
The problem is that when the total width of the container div increased to more than the browser's window width, the components inside the container div will break to a new line. I wonder whether it is possible to have a div with unlimited width?
Many Thanks..
The white-space: nowrap property does not apply to floated elements. Simply put, when you float an element to the left or right, there is no white space between them.
See white-space (CSS property) for more information on what white space is and the line that specifically states you can't do this with floats.
Try setting them to display: inline-block so that the parent actually considers them to be content.
Try adding a specific height to the container div, or removing the float: left rule from the components inside the div.