Is there a way to make the collapsible row colspanned to the number of columns? Or at least have the full width as of the div table? I stumbled upon this but it doesn't seem to help.
You may check out the full code here in this jsfiddle.
<div class="div-table">
<div class="div-heading">
<div>Head 1</div>
<div>Head 2</div>
<div>Head 3</div>
<div>Head 4</div>
<div>Head 5</div>
<div>Head 6</div>
</div>
<div class="div-row">
<div class="cell">col 1</div>
<div class="cell">col 2</div>
<div class="cell">col 3</div>
<div class="cell">col 4</div>
<div class="cell">col 5
</div>
<div class="cell">col 6</div>
</div>
<div class="div-row div-row-collapsible">
<div class="collapse text-center" id="row1">must be full width</div>
</div>
Wrap the whole thing in another div.
<div>
</div>
See here:
http://jsfiddle.net/5x8wu0sc/
I only updated the html.
The whole width available to your div containing the text "must be full width" end where the second column cell of your table should start. This seems to be aa a consequence of the display='table' used in the main div. You can't use a colspan to enlarge over the first column as explained here : Colspan/Rowspan for elements whose display is set to table-cell
I think you have to consider using bootstrap grid system. It should give you an easy way to have table stuff well done.
Related
I'm trying to make the following grid:
Unfortunately it's not working for me right now. I don't know how to position containers to fill the empty space next to each other.
This is just an example to demonstrate: https://jsfiddle.net/7m2bfx65/2/.
<div class="container">
<div class="row">
<div class="col-6">Container 1</div>
<div class="col-6">Container 2<br/>Container 2<br/>Container 2</div>
<div class="col-6">Container 3<br/>Container 3<br/>Container 3<br/>Container 3<br/>Container 3</div>
<div class="col-6">Container 4<br/>Container 4<br/></div>
<div class="col-6">Container 5</div>
<div class="col-6">Container 6</div>
</div>
<div class="row">
<div class="col">Container 7<br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>
</div>
As you can see, Container 3, 5 and 6 are not positioned correctly and Container 1 and 4 have different heights.
If you know how to fix it, I really appreciate your help. I also prefer to use Bootstrap 4 Flex grid system.
I'm trying to create a full width page using Bootstrap. I have a setup similar to this:
<body>
<div class="container-fluid">
<div class="row">
The first row goes here
</div>
<div class="row">
The second row goes here
</div>
<div class="row">
The third row goes here
</div>
</div>
</body>
If I wanted to create a row inside a row, how would I do that? This is what I am trying to achieve:
<body>
<div class="container-fluid">
<div class="row">
<div class="row text-center">
<h1>Some title</h1>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</body>
So basically I want to put the title on one row and some grids on another row. The tricky part here is, I want to place some columns that are 4 columns wide in the middle, and then have "2 columns padding" on the left and right.
My question may sound like others, but is unique because of the padding. How do I make this layout properly?
Bootstrap has a smart (but delicate) gutters system providing "natural" (margins + paddings) for content on all devices 1.
This system is based on two simple assumptions:
columns are immediate children of .rows 2
content is placed inside columns
That's why, if you want to place a .row inside another .row (to further divide one of your cols), you'd have to use this markup:
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-4 offset-md-2">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
</div>
</div>
</div>
The above doesn't make much sense by itself (you could just use the markup of the child row and you'd get the same result). But it's useful when you want to offset (or limit) an entire area of a layout, like this:
<div class="row">
<div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
<div class="row">
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
</div>
</div>
</div>
See this fiddle for a live example.
1 To get rid of Bootstrap's gutters (in v4), one would need to apply no-gutters class on .row.
2 This is a "general principle", not a "strict rule". Other elements are allowed (and even recommended) as direct children of .rows (such as column breaks). At the other end, other elements extend from .rows (such as .form-rows), thus inheriting the gutters system and being valid column parents.
.row should not be the immediate child of another .row
.col* should not be the immediate child of another .col*
From the Bootstrap docs:
"Content should be placed within columns, and only columns may be
immediate children of rows."
I don't understand why you think you need a row in a row, and what's wrong with just using your layout w/o the nested row. Do you realize that col-12 is the width of a full row?
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<h1>Some title</h1>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2">
</div>
</div>
</div>
http://www.codeply.com/go/jfrWn4QDf1
Bootstrap 4, the same rule applies:
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... In a grid
layout, content must be placed within columns and only columns may be
immediate children of rows" __ Bootstrap 4.1 Docs
Linked: Columns must be immediate children of rows?
I have 6 individual divs as so although it is possible to have more than 6 children divs. What I am trying to achieve is alternating background colors. So first 3 div will have a white background, next 3 - a black background, the next 3 - white again, next three - black again, etc.
<div class="parent">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
<div class="child">child 4</div>
<div class="child">child 5</div>
<div class="child">child 6</div>
</div>
I have tried a few ways with nth-child selector but haven't been able to achieve this pattern. Thanks much.
I am trying to arrange 8 tables in two rows.I have two divs alligned horizontally I am trying to align
4 tables in rows 1
4 tables in row 2
When I try to put this below code inside another [left] DIV container. All the tables go in one line. Below is the code that I am using.
<div class="datagrid"><table>
<thead><tr><th>header</th><th>header</th></tr></thead>
<tbody><tr><td>data</td><td>data</td></tr>
<tr class="alt"><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td></tr>
<tr class="alt"><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td></tr>
</tbody>
</table></div>
Kindly guide me on this issue. If required I can upload complete code that I am using.
You could achieve that by adding a parent container to the first 4 tables and another one to the next 4, like so:
<div class="group">
<div class="datagrid">table 1</div>
<div class="datagrid">table 2</div>
<div class="datagrid">table 3</div>
<div class="datagrid">table 4</div>
</div>
<div class="group">
<div class="datagrid">table 1</div>
<div class="datagrid">table 2</div>
<div class="datagrid">table 3</div>
<div class="datagrid">table 4</div>
</div>
Then, add these style rules:
.datagrid {
float: left;
}
.group {
clear: both;
}
Use the float and clear.
Find the Complete code in jsfiddle
Js Fiddle
css style
.datagrid{
float:left;
}
.firstRow{
}
.secoudRow{
clear:both;
}
I have three column layout. In the third column I have two divs. First div is fixed. Second div is having minimum height of 50px. when the text content inside second div increases then its height should increase to a point where it reaches the bottom of third column and then it should show scrollbars.
So far I have applied my effort here:http://jsfiddle.net/Q2Ata/1/
I have tried to achieve this layout but when I add more text inside then the main table's height also inceases. This issue can be found in this fiddle.
http://jsfiddle.net/Q2Ata/2/
HTML code:
<div class="table">
<div class="table-cell">
<div class="column">Column 1</div>
</div>
<div class="table-cell">
<div class="column">Column 2</div>
</div>
<div class="table-cell">
<div class="column">
<div class="container">
<div class="header">
<div class="table-cell">Header</div>
</div>
<div class="content">
<div class="abc">
text content here ...
</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
.table {display:table;width:100%;height:200px;max-height:200px;table-layout:fixed}
.table-cell{display:table-cell;padding:10px;vertical-align:top}
.column{border:1px solid #000;height:100%}
.container{display:table;width:100%}
.header, .content{display:table-row}
{display:table-row}
.container .table-cell{border:1px solid #F00}
.abc{min-height:50px;padding:10px;border:1px solid #000;height:auto;overflow-y:auto}
You need to set a max-height on your element in order to have the overflow: auto working and you will have scroll bars when the maximum height has been reached.
http://jsfiddle.net/Q2Ata/4/