I've been playing with this one for hours, with no success.
I have a top menu with submenus (that contains a popup menu).
In one of my popup menus, i need the container to be maximum 170 pixels width and all of the items to wrap around that width. For some reason they don't wrap up.
I've reproduced the exact menu in a fiddle. Notice the submenu COUNTRY. It contains a popup with flags, but they don't wrap around
https://jsfiddle.net/h81y2t0L/
I've added attributes like a width, a min-width, a white-space with no success
.flagMenu {
max-width: 170px;
/* white-space: normal; */
}
.flagMenu li {
display: inline-block;
}
How do i wrap around the flags in the container?
To wrap the inline-blocks you need to define a container width - but since you don't want an exact width, use width: max-content; That way the width will be equal to the width of the content but the max-width will stop it from growing further.
.flagMenu {
max-width: 170px;
white-space: normal;
width: max-content;
}
Demo
Related
I have 3 group of checkboxes, first two are given fixed width and the last one should take the remaining space. In the last group if the names are long, horizontal scroll appear for this group.
However, the last group is overflowing the parent div here. how can I fix this?
You just need to add overflow: auto to the parent container .select__content, this way when content is too big to fit in its block formatting context and overflows, the scrollbar appears and the container .select__content container becomes scrollable. Try this out.
.select__content {
margin-top: 2px;
display: flex;
overflow: auto;
}
Here is the updated CodeSandbox demo.
.select_checkbox takes width auto which grows because the span element is very long. It can be resolved by giving .select_checkbox a max-width so it does not go beyond the specified width and the scrollbar may appear. Try adding max-width like this.
.select__checkbox {
border: 2px solid lightgray;
display: flex;
flex-direction: column;
max-width: 260px;
}
I have a simple responsive 2 column design, the left column has pre and a nested code elements in it.
The code element has overflow: auto set, so when its content exceeds its specified width, it should show a horizontal scrollbar inside it without wrapping the lines.
This works fine but only when the parent (i.e. the left column) is not floated. I.e. when the window is narrow. You can try it yourself here.
#media (min-width: 300px) {
.left {
float: left;
margin-right: 100px;
max-width: 400px;
}
.right {
float: right;
margin-left: -100px;
width: 100px;
}
}
pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
code {
overflow: auto;
}
This is odd because I expect the code element to have a dynamic width like when it does when the window is narrow, but it acquires a fixed width for some reason when the parent is floated.
Am I doing something wrong here? Is this supposed to happen?
Please note that I am not looking for a JS workaround, this is very simple html/css and should work out of the box.
Based on your updated Fiddle, you gave the element in question a max-width of 400px to expand to. When it has a long line of text in it, it may take up that entire width. Basically, it's just your design being responsive to its content. The right column drops down below it exactly as it should, and if you resize the container to be smaller the pre block starts shrinking right along with it.
To see what I mean, right-click the element and Inspect Element to look at its calculated width. Also, if you think about it, it has to be 400px (or whatever the max width is). Otherwise, it hasn't reached its overflow point to acquire the scrollbars you were testing!
How can I prevent my squares from wrapping when resizing the window?
I want the squares to stay at their positions, but every time I resize the window, they get pushed down and are hidden.
This example is currently working, but the solution, which makes this possible, is just ridiculous.
Is there a "cleaner" way or how can I make it look more professional?
My JSFiddle Example
.content {
width: 100000000px;
}
Remove position:absolute and overflow:hidden from the parent element.
Since the elements are inline-block, you could use white-space:nowrap to prevent them from wrapping. If that's not the desired effect, just remove it though.
jsFiddle example
#container {
width: 100%;
height: 100px;
white-space:nowrap;
}
.square {
display: inline-block;
width: 100px;
height: 100px;
}
http://jsfiddle.net/CLErY/2/
/* The following rule can be romoved, is just to give a smooth overflow hidden visibility */
.content {
width: 200%; /* Always bigger than the real value, so 200% is the double and it should work. */
}
.content should have at least the size of the whole element plus the size of one children (100px), so 200% is the double and it should work.
In case we have 4 squares the size should be (width x 4 + width) in case the width of the square is 100 the result is 500px.
Also this is to give a smoother overflow dissapear but not necesary.
Hope it helps.
I have the following example: http://jsfiddle.net/sSqxn/2/
The month divs are using inline-block in order to be side by side. They can each be varying widths. The browser will automatically scroll horizontally to accomodate their total width.
Right now, the blue div is only ever the width of the browser window. Is it possible to make the blue div the full width of all the month divs?
Remove width: 100% from your .months rule.
.months {
float: left;
white-space: nowrap;
}
http://jsfiddle.net/waitinforatrain/DSSPb/2/
I want to arrange a bunch of <li> elements which represent images in a horizontal scrollable container, like in the example above.
The tricks I've seen so far set the width of the container to be the width of the <li>elements. However, I have no way of knowing what the width of the container will be because the content is dynamic.
Is there a way to do this with CSS without knowing the container width?
Something like this, perhaps? http://jsfiddle.net/mattball/5JRdZ/
change ul and li display to inline-block
remove li { float: left; }
add ul { white-space: nowrap; } so the <li>s don't wrap to the next line when the <ul> is too narrow
Now your problem is solving the li { height: 100%; margin: 4px } causing the <li>s to be taller than the <ul>. (Here's the solution: http://jsfiddle.net/mattball/avTgR/ :)