I need to dynamicaly generate schedules that will look like on the picture below:
As you see on the picture, some columns need to be longer than the others. This produces the problem of stacking divs on top of each-other without breaking the schedule structure. So, what is the best way to populate such table and overcome the mentioned problem?
I have several ideas regarding this issue, but none of them seem right to me. Here they are:
1) I could calculate which column is the longest and add the same amount of cells to every column, filling some of them with the data afterwards.
pros of this approach:
Simple to implement
Table structure is preserved
cons:
Unused cells will be added to the table
2) It is possible to avoid adding the extra cells to the table by leveraging col-offsets, but the idea of calculating which cells need the col-offset added to them seems rather painful.
3) I could use real tables, instead of hacking around with divs, but every time I try to use them, I end up with a broken page structure.
Please suggest how would you deal with this problem, thanks.
Turns out it's quite simple to stack columns on top of each other:
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12">
<p>YOUR CONTENT</p>
</div>
<div class="col-xs-12">
<p>YOUR CONTENT</p>
</div>
<div class="col-xs-12">
<p>YOUR CONTENT</p>
</div>
</div>
</div>
</div>
</div>
The trick is to wrap a row inside a parent column that is sized according to your needs (col-xs-3 in this case). After this, just add columns with size *-12 to the mentioned row, forcing them to wrap and jump down, but be contained inside the outer col-xs-3 column.
Related
Using bootstrap, how can we make the height of two columns exactly the same?
For example:
<div class="row">
<div class="col-md-6">
Too much in here
</div>
<div class="col-md-6">
A little here resulting in shorter height
</div>
</div>
All I found through google or other posts asking the same thing here either did not work or if it did, it killed the responsiveness of bootstrap.
For example the flex technique works but it kills the responsive effect of bootstrap.
What is the proper and standard solution for this?
I want to change the default behaviour of the bootstrap grid system. I'm using the following lines of codes to display two columns in my page:
<div class="col-md-8" id="one">
...
</div>
<div class="col-md-4" id="two">
...
</div>
When the screen size is too small to display both columns next to each other bootstrap positions the div one above div two. I want to invert this behaviour so that it positions div two above div one. However if it is enough space for both columns the default behaviour should stay the same.
Change the order of the <div>'s such that two comes first to make the order on the small screen correct. Then use col-md-push-8 and col-md-pull-4 to push and pull the two and one columns into the correct order on larger screens.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 col-md-push-8">two</div>
<div class="col-md-8 col-md-pull-4">one</div>
See http://getbootstrap.com/css/#grid-column-ordering for some background information on column ordering
I'm trying to do this when someone clicks a box:
It's seems simple, if I put the gray div inside the ng-repeat, when a user clicks a box, the new div would be shown.
<div ng-repeat="friend in friends" ng-click...>
<div>
{{friend}}
</div>
<div collapse="expand">
some content
</div>
</div>
But, what if I don't want to repeat the gray div? (Let's say it's a bunch of html that is not necessary to be repeat by each element).
So, I have this plunker, where the gray div is outside the ng-repeat.
Is it any possibility to do what you see in the image with pure CSS or some trick in angular or javascript?
I heard that I could use jQuery to inject the html, but maybe could exist a cleaner way.
Considerations:
A row could have one to n items.
What I have tried
Put the gray div with position relative, but this would not push down the other divs.
First of all your task is unachievable unless you change markup. The result should be like this.
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
For that you need to use custom filter. I took it from here
how to split the ng-repeat data with three columns using bootstrap
Since you use jQuery you can easily manipulate elements now. You can get you collapse div and append it to every row.
You modified working planker is here
http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=preview
I have a problem understanding how row-fluid class works. According to the documentation it adjusts itself to fluid design such as responsive design. So if it has enough space it makes it fit on the same row otherwise it goes to the next line.
However looking at this example here : https://duelify.com/
Strangely enough the first three article headers fit on first row.
Second row and rest are slightly pushed to the right. But looking at the html (below) no additional classes are involved to cause this 'side effect'.
Why aren't the article headers fitting in the one row. Why is there this random gap in between? Is there a way to make them appear ordered without any gaps in between?
In your case, proper code will be like
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
etc...
In every row-fluid class maximum sum of span classes must be up to 12. Span classes have left margin. Only last child in one row-fluid don't have left margin.
Look again now at examples on Twitter Bootstrap documentation. "For a simple two column layout, create a .row and add the appropriate number of .span columns. As this is a 12-column grid, each .span spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent)."
There are a couple of things going on here. Remember, by default, the total size of the spans in a fluid-row should add up to 12. There is quite a bit more here, so when the css defines the width of a span4 as approximately 33% they are actually exceeding 100%, so they are going to a new line. But they are not clearing, so you end up with them looping around and making columns like on the page.
The reason you have the space to the left of what would be the second row is that bootstrap defines 'gutters' to give the columns some margin. Because of the excess columns being used you see them. There is specific css to reduce the gutter on the first span of a row to 0, hence why there is no space on the first one.
The subsequent 'rows' have only two columns because the presence of the additional gutter throws off the math and makes the three span4s add up to more than 100% width, causing them to wrap.
The following code will work after container (for Responsive layout):
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
</div>
</div>
I've been searching for this solution for a while now... [bla bla... google.. bla]...
I have created an example where I'm almost there, but not quite:
http://www.mikael-sandbox.com/puzzlecss/
What I have left here is that I want the number 1 to always be in the lower right corner. This is the case as long as I have ONE single row of blocks, but as the row breaks, the row is moved up. I want it to stay down. Any thoughts?
If the elements are being dynamically added to your page (even if they aren't), it would seem that the obvious solution would be to reverse the order of them. The elements that would extend beyond the bounds of the container are going to always wrap below. Found a couple links that may offer some insight regarding float and wrapping.
http://archivist.incutio.com/viewlist/css-discuss/33948
http://css.maxdesign.com.au/floatutorial/introduction.htm See "Where will a floated element move to?"
Edit
Is your container fixed width, and will your bit divs be consistent width? If so, then you know you can fit X number of bit divs on a row in your container. With that in mind, you would wrap a "row" in a div, and clear it on both sides. The sample below achieves the results I believe you are looking for. I'm fairly certain that you will not be able to achieve this with pure CSS. Floats just don't work the way you want them to.
<div id="container">
<div id="row_wrapper" style="clear:both;">
<div class="bit">10</div>
<div class="bit">11</div>
<div class="bit">12</div>
</div> <!--End row_wrapper -->
<div id="row_wrapper" style="clear:both;">
<div class="bit">1</div>
<div class="bit">2</div>
<div class="bit">3</div>
<div class="bit">4</div>
<div class="bit">5</div>
<div class="bit">6</div>
<div class="bit">7</div>
<div class="bit">8</div>
<div class="bit">9</div>
</div> <!--End row_wrapper -->
</div> <!--End container -->