I have a 3 column layout that folds down to one column. I want to be able to move div's between the columns. The problem I have is a soon as a column is empty there is no way to move a div back into it.
see here (move all divs into one column): http://jsfiddle.net/65ENw/17/
Putting a fixed width on the columns solves this, but then my layout stops being responsive.
You can set a min-height and min-width on the columns and they will still occupy space when they have no widgets in them.
.widgetCol{ margin:0 1% 0 1%; width:98.0%; min-width:20px; min-height: 20px}
I have updated your fiddle to demonstrate: http://jsfiddle.net/65ENw/18/
Related
Please take a look at this codepen:
https://codepen.io/darrengates/pen/BarZMYr
In this example, you'll see that I'm using "react-virtualized", with the "List" container type. In addition, to achieve the effect of making the left column sticky on horizontal scroll, I had to add this CSS:
.ReactVirtualized__Grid.ReactVirtualized__List {
overflow: visible !important;
}
.ReactVirtualized__Grid__innerScrollContainer {
overflow: visible !important;
}
However, when I did this, react-virtualized no longer loads additional data on scroll.
Removing that extra CSS allows react-virtualized to work as it should, but then I lose the stickiness of the left columns (which of course it expected on account of an ancestor having overflow: scroll)
Is there any way to "force load" more of the list so that I can continue to use a sticky column?
I want to create a table with a fixed first column so that when the user scrolls horizontally, the first column stays where it is, making it easier to interpret the data in the table. I gave the first column position: absolute but the issue with that is the <td> elements don't resize when the content takes up multiple lines. How do I fix this? I wouldn't mind a solution using javascript for this.
What I have so far: http://jsfiddle.net/Yw679/778/
Also, would it be possible to make the <thead> fixed also so that it doesn't go out of view when the user scrolls down but moves with the rest of the columns when the user scrolls horizontally?
I added a new column with class style-hidden for each td and th and some tricky css like this. I hope this will help:
.style-hidden{
width: 0;
opacity: 0;
display: block;
}
JSFiddle
Got a series of quotes of varying length to fit in DIVs of fixed width but content determined height. I could individually position each DIV so it looked tidy and there were no vertical gaps. For example - http://www.zergnet.com/. I wondered if there was a CSS solution to problem, as I noted Zergnet uses inline styling and absolute positioning of every news teaser (which makes me think javascript is involved somewhere).
.testimonialBubble {
position: relative;
width:48%;
margin: 8px 0;
padding:0 2% 0 0;
float: left;
}
The idea being no matter what volume of content is thrown (within reason) into the divs in the 2 col layout they'll fit together and fill spaces. At the moment if the 2nd element is longer than the 1st, when 3rd element kicks round under the 1st element there's a gap between the two caused by the 2nd elements height. Is there a CSS only solution or is it only achievable via javascript?
Many thanks for reading.
My current responsive site has slide down menus. I intend to make it so that as the window gets wider the items organize into columns (1,2, and 3). This much is working but when I slidetoggle an element in the first column, the elements in the first column goes down as well. Sometimes the elements hop from one column to the other.
I just need a general idea of what to do?
the menu items are floated
the menus themselves are not
Give your columns a position of relative with some padding and your menus a position of absolute. Then you can position your menu's above the text in the columns, and they won't push the text down when you use slideToggle()
.col{
padding:20px;
position:relative;
}
.menu{
position:absolute;
top:0;
}
Here's a jsFiddle to show it in action
I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:
Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.
All major browsers and IE10 support flexbox. Not supported < IE10.