This question already has answers here:
Bootstrap horizontal scrolling
(2 answers)
Bootstrap - having one column in a row with horizontal scroll instead of wrapping onto the next line
(1 answer)
Horizontal scrollable div's in a bootstrap row
(7 answers)
Closed 3 years ago.
Is there a way for Bootstrap 4 to create a table like structure with 'container', 'row' and 'col' with a container that expands beyond the width of the page resulting in a horizontal scrolling area.
In the examples I have now the columns of the row are always wrapped to the next row when the area runs out of space which is not desirable for displaying tables.
Probably what you're looking for is to stop the columns from wrapping, there was a similar question here
Basically use a row with the class .flex-nowrap
I do agree with #cloned from the comment - to show data in a table format there is absolutely nothing wrong with using a table tag, bootstrap also helps you out with those: table documentation from bootstrap
Here's the example that works for me just fine. Very cool stuff.
#{
ViewBag.Title = "Home Page";
}
<div>
<h1>Content</h1>
<p>Dit is de content van de site</p>
<div>
<div class="table-responsive text-nowrap" >
#for (int i = 0; i < 20; i++)
{
<div class="row flex-nowrap">
#for (int index = 0; index < 12; index++)
{
<div class="col">Column #index</div>
}
</div>
}
</div>
</div>
</div>
Related
I want my columns to display in 3 columns per row on medium and larger screen sizes (col-md-4), 2 columns per row on smaller screen sizes, and 1 column per row on extra small (col-sm-6), but when I view my app on my tablet, I get floating columns in the 2 column rows. I know its possible to use a clearfix class with ng-if to tell it to make a column every so many rows, but if I use:
<div class='clearfix' ng-if='$index % 2 == 0'>
it will make my columns create a new row every 2 columns, even on larger screens, which isn't what I want. Is it possible to make ng-if only add the clearfix after 2 columns strictly on the col-sm class, and not on the col-md class?
Yes you can do it by listing to window resize event, Based on the screen inner width you can attach or detach the div.clearfix to the dom using ng-if.
EX:
Controller:
maintain a variable to represents the window width $scope.windowWidth
app.controller('MainCtrl', function($scope, $window, $timeout) {
$scope.windowWidth = $window.innerWidth;
$window.onresize = function(event) {
$timeout(function() {
$scope.windowWidth = $window.innerWidth;
});
};
});
View:
Attach the div IF windowWidth <= 768 ELSE Remove the div from the DOM.
<div class="tab-only clearfix" ng-if="windowWidth <= 768">
This will show only on min-width : 768px
</div>
here is a DEMO
Please search for if there is any css fixes for this.
I am trying to create dynamic tiles using the mdl-grid and mdl-cell , but the cell is stretching to the maximum height of the column in that row .
To see the difference Here is the example from Angular material design . Here the tiles are displayed dynamically and the columns are not taking the max width of other columns in that row .
http://codepen.io/anon/pen/bpbxzz
Here is the second example using material lite , But here you can see the columns are stretching
http://codepen.io/anon/pen/xVKaod
Is there any way I can create dynamic tiles using MDL ?
UPDATE
After researching for few hours I found this approach is called Masonry layout . I searched for it and found the below ones . But I can not able to do it with flex layout .
1) JQuery Plugin https://github.com/desandro/masonry
2) This is with CSS3
http://web.archive.org/web/20111226183221/http://sickdesigner.com/index.php/2011/html-css/masonry-css-getting-awesome-with-css3
here is another link
http://jsfiddle.net/RTLun/
here stackoverflow link
Compact arrangement of DIVs in two directions
UPDATE
I found the above links doesn't maintain the order of the items , But this one does . But can not find CSS code to do this
http://michieldewit.github.io/isotope-modulo-columns/
Thanks
using http://masonry.desandro.com/ , it perfectly works for me.
<div class="mdl-grid masonry-grid">
<div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item">
</div>
<div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item">
</div>
</div>
<script src="https://unpkg.com/masonry- layout#4/dist/masonry.pkgd.min.js"></script>
<script>
var elem = document.querySelector('.masonry-grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.masonry-grid-item'
});
</script>
I'm trying to fix a positing issue in a responsive design.
I have a container div, containing 4 (but it could be more or less) divs that are displayed as inline-block. I would like to know how to control the number of divs per line when the page is resized (with CSS, if it's possible). For example, when 4 containees no longer fits in the container, the last one is moved to second line. I would like in that case to have 2 containees in the first line and 2 containees in the second line. I dont know how to do that. Your help would be welcomed!
EDIT:
it could also be 6 containees, in the case the layout would be:
- 1 line of 6 blocks if it fits
- 2 lines of 3 blocks
- 3 lines of 2 blocks
- 6 lines of one
the number of containees is variable. I just want to have the same number of containees per line
the html:
<div class="container">
<div class="containee"></div>
<div class="containee"></div>
<div class="containee"></div>
<div class="containee"></div>
</div>
the css:
.containee {
width:200px;
height:200px;
display:inline-block;
background-color:tomato
}
the example can be seen here : http://cssdesk.com/uGLbq
(PS : I tried to find the solution searching the web but I dont really know the good keywords related with this topic)
You can't with CSS (AFAIK).
You can do "the math" dynamically with Javascript in real time.
In your case,
you known the width of one block (in that moment),
you can easily get the window width (in that moment),
you know the number of your block (in that moment);
Simply apply ( (1) the first time you open the page, and (2) every time the number of blocks changes, or (3) the resolution changes) the algorithm in the following code:
// EXAMPLE OF INPUT
var windowWidth = 1400; // read it...
var blockWidth = 200; // read it or use const...
var numberOfBlocks = 10; // read it...
// Calculate the maximum number of blocks per row
var maxBlocksPerRow;
for (var i=0; i < numberOfBlocks; i++) {
if ( (blockWidth * (i + 1)) > windowWidth){
maxBlocksPerRow = i;
break;
}
}
// Check the highest 0 module combination while iterating backwards
var magicNumberForMatchingBlocks = 1; // if not found, it will be 1.
for (var i = maxBlocksPerRow; i > 0 ; i--) {
if ( (numberOfBlocks % i) == 0){
magicNumberForMatchingBlocks = i;
break;
}
}
alert("With " + numberOfBlocks + " blocks, each one wide " +
blockWidth + " pixels, and a window wide " + windowWidth + " pixels,
the number of blocks per row for having always
the same number of block in any row is: " + magicNumberForMatchingBlocks);
Then use that number to populate or re-arrange the elements with Javascript or better with some Javascript library like jQuery.
html:
<div class="container">
<div class="grouped">
<div class="containee"></div>
<div class="containee"></div>
</div>
<div class="grouped">
<div class="containee"></div>
<div class="containee"></div>
</div>
</div>
css:
.containee {
width:200px;
height:200px;
display:inline-block;
background-color:tomato
}
.grouped {
float:left;
}
Try this:
.container
{
min-width: 410px;
}
Give the .containee a float:left; if the page fits for 4, they will be positioned right beside each other, else, you'll have another line of divs. You can give it as well a margin-top:5px; in case you got another line, the divs of the second line won't be glued to the divs of the first line. Note that with this approach, its not obliged to have equal number of .containee in each line, if you have 4, then you re-size, you'll have 3 - 1, then 2 - 2...etc..
I have a table with four columns. The first column needs to be the minimum size to fit the content, and the other three columns need to be equal sizes and consume the rest of the space in the table. Neither my table nor my content is of a known size. (It's a pretty standard variable-sized-label-and-fixed-size-data layout.)
In the good old days of HTML4 I could do this by using the specifying the size of each column as a proportion of the whole, using the 'relative size' functionality:
<colgroup>
<col width="0*"/>
<col width="1*"/>
<col width="1*"/>
<col width="1*"/>
</colgroup>
However, the width attribute is now deprecated and we're supposed to use CSS instead.
But I haven't found any way to replicate this with CSS; CSS size specifiers only let me specify the width as either a fixed size or a fraction of the whole, where what I actually need is a fraction of what's left after the first column is taken away.
Is there any way to do this using modern techniques? (Note that I can't use CSS3, though.)
I would use a little javascript in order to solve your problem: http://jsfiddle.net/qR9g2/
var tableSize = 400; // example of size
var firstCol = document.getElementById('firstCol_01');
var sizeOfFirstCol = firstCol.offsetWidth;
var myOtherCols = document.getElementsByTagName('td');
var nbcols = myOtherCols.length;
var sizeOtherCols = (tableSize-sizeOfFirstCol)/(nbcols-1);
for(var i=0;i<nbcols; i++)
{
if(myOtherCols[i].className === 'otherCols')
{
myOtherCols[i].style.width = sizeOtherCols+'px';
}
}
first give the size of the overall table. Then go get the size of the first column, and distribute the rest of the width to the other columns.
EDIT: here is a CSS solution. It is not perfect, but better than nothing: http://jsfiddle.net/qR9g2/2/
In the css, the main idea is the following:
.col1{
display:table;
float:right;
}
Add for the first column the tag display:table. This will work like a fit-content for all browsers.
Adding a float:right will push the first column onto the right and "stick" it to the rest of the table.
The visual result is exactly what you want. On the negative side, the problem is that your table takes more place then it seems (on the left). (basically if you have a 400px table with 4 columns, it will automatically give 4*100px for each column. adding the upper CSS solution will simply shift the col1 on the right side of the 100px that are given to that column).
You could always try to play with negative left-margins (i don't recommend) in order to shift your table on the left.
var table = document.getElementById('table');
var first_col = document.getElementById('first-col');
var total_col = document.getElementsByClassName('col').length
var rem_width = table.offsetWidth - first_col.offsetWidth;
var col = document.getElementsByClassName('col')
for(let i=0;i<col.length;i++){
col[i].style.width=rem_width/total_col+'px'
}
<table id="table" width="100%" border="1">
<tr>
<th id="first-col">NO</th>
<th class="col">ISBN</th>
<th class="col">Title</th>
<th class="col">Price</th>
</tr>
<tr>
<td>12</td>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Instead of trying to do a table, you can try a grid layout as follows.
Apologies for the inline css - obviously you would use classes instead but I just tested it quickly and it actually appears to work! I had not actually ever used this before, but making the first column "auto" actually does work and the layout is I think what you are looking for.
<div style="display:grid; grid-template-columns: auto repeat(3, 1fr);">
<div style="width: fit-content">This should fit the content that you decide to insert here</div>
<div>This should fit the content too</div>
<div>This should fit the content .. more text</div>
<div>This should fit the content and some more text</div>
</div>
I checked & grid has been around since 2011 so it's not too modern hopefully. I almost always do my tables with either grid or flexbox now..
For example, i have some <ul> element with <li> blocks floated left.
If i resize my that way, that to <li> elements got place by 3 in a row. Next, i resize window (by mouse for example) and my <ul> got new width with <li> elements placing by 4 in a row for now.
So, how to select last <li> in a every row of that stack of elements, that to set them some CSS rule (margin-right for example).
So i need to know, is there any CSS selector or way to select with behavior explained here:
http://jsfiddle.net/w7PDM/12/
you'll have to calculate the last one, and it's simple.
$('button').click(function(){
$('ul').css('width','200px');
$('.current-last-of-row').removeClass('current-last-of-row');
var itemsPerRow = Math.floor(parseInt($('ul').css('width')) / 40);
//$('li:nth-child(4n+4)').addClass('current-last-of-row');
for(var i=1; i < $('ul li').length; i++)
{
if( i % itemsPerRow == 0 )
{
$('li').eq(i-1).addClass('current-last-of-row');
}
}
$('h1').text('Now, every 4 element is a "last-of-a-row"');
});
check out the demo: http://jsfiddle.net/jun1st/hK9aZ/1/