I would like to show a scrollable table with fixed header as grid bag layout.
So I created an outer container, one row for the header and a second row for the data.
The problem is that the inner container which was intended to be used for scrollbar ignored boundaries of out container.
#maincontainer {
height:500px;
background-color:lightgrey;
}
#innercontainer {
height:100%;
overflow-y: auto;
}
#headerrow {
background-color:grey;
height:200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<body>
<div class="container" id="maincontainer">
<div class="row" id="headerrow">
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</div>
<div class="row" id="listrow">
<div class="container" id="innercontainer">
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
In that snippet the light grey container is the outer container with the size for the complete list.
The dark grey is the header. and the data below should fit into the light grey box and show a scrollbar on the right side.
Any help is appreciated.
You have set the height of #innercontainer to 100% but not set it relative to anything so it will adopt the the height of body in this case.
Something like this should get you on the way:
#maincontainer {
position:relative;
height:500px;
background-color:lightgrey;
}
#innercontainer {
height:100%;
overflow: scroll;
overflow-x: hidden;
}
#listrow {
positon: relative;
height: calc(100% - 50px);
}
#headerrow {
background-color:grey;
height:50px;
}
As a sidenote, bootstrap comes with some good table styling which I think is a good usecase for what you are trying to create.
you can add this code css
#listrow {
background-color:lightgrey;
}
Related
In this example http://jsfiddle.net/rodrigolinkweb/k8qg14xL/ I need to select only "Container 12", how can I do this?
ps: note that both divs have the same class name "wrapper".
.container:nth-child(n+3){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
You can select them with the .wrapper class, like this
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
If you want to select it from backwards you can use :nth-last-of-type() . Refer to the following fiddle here
No matter what content the .wrapper has :nth-child will select child based on its position where as :nth-of-type selects with appropriate attribute.
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
Some link
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
I have this code -
<div class="columns">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
<div class="column">column 4</div>
</div>
I want to make like this with Bulma css -
https://codepen.io/hashem/pen/ausJL
If I resize ( mobile version ) , those columns break in to 2 columns , instead 4 .
This should solve your question:
<div class="columns is-mobile is-multiline">
<div class="column is-half-mobile">column 1</div>
<div class="column is-half-mobile">column 2</div>
<div class="column is-half-mobile">column 3</div>
<div class="column is-half-mobile">column 4</div>
</div>
If you want to fit in as many columns as possible and have them wrap when the screen size gets smaller use this:
<div class="columns is-mobile is-multiline">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
<div class="column">column 4</div>
<div class="column">column 5</div>
<div class="column">column 6</div>
<div class="column">column 7</div>
<div class="column">column 8</div>
<div class="column">column 9</div>
<div class="column">column 10</div>
</div>
Check these links for more information about what you're trying to do.
https://bulma.io/documentation/columns/responsiveness/
https://bulma.io/documentation/columns/options/
how to apply Row scroll overflow on x-axis direction for col-5, col-6, and col-7
<div class="container-fluid">
<div class="row">
<div class="col-4">col 1</div>
<div class="col-4">col 2</div>
<div class="col-4">col 3</div>
<div class="col-4">col 4</div>
<div class="col-4">col 5</div>
<div class="col-4">col 6</div>
<div class="col-4">col 7</div>
</div>
</div>
You need to add a specific class descriptor for those columns to give them additional styling
<div class="container-fluid">
<div class="row">
<div class="col-4">col 1</div>
<div class="col-4">col 2</div>
<div class="col-4">col 3</div>
<div class="col-4">col 4</div>
<div class="col-4 xoverflow">col 5</div>
<div class="col-4 xoverflow">col 6</div>
<div class="col-4 xoverflow">col 7</div>
</div>
</div>
app.css
.xoverflow {
overflow-x: auto;
}
I think you should use this:
.col-4:nth-child(5), .col-4:nth-child(6), .col-4:nth-child(7) {
overflow-x:scroll;
}
I created the following custom table:
http://jsfiddle.net/pg92nzh2/ (live example)
<div class="table-custom">
<div class="table-heading">
<div class="table-cell">title 1</div>
<div class="table-cell">title 2</div>
<div class="table-cell">title 3</div>
<div class="table-cell">title 4</div>
</div>
<div class="table-row">
<div class="table-cell">test 1</div>
<div class="table-cell">test 2</div>
<div class="table-cell">test 3</div>
<div class="table-cell">test 4</div>
</div>
<div class="table-row">
<div class="table-cell">test 1</div>
<div class="table-cell">test 2</div>
<div class="table-cell">test 3</div>
<div class="table-cell">test 4</div>
</div>
</div>
Everything works great but I would like to be able to put a tag between rows (div, span or whatever) that won't affect the behavior of my table (the final goal is to use ng-repeat to this tag so I can have modular tables). Here is an example of what I would like to do: http://jsfiddle.net/gzdrz9mr/
I would like to put this tag preferably wherever I want without affecting anything...
I use Bootstrap for my css layout.
How come the following html code produces different margin-left for the side elements ?
Like the screen shot shows.
Thanks a lot for the help.
<body>
<div class="container-fluid pink"> <!--container-->
<div class="row-fluid">
<div class="span12 grey"> <!--header-->
header<br/><br/><br/><br/>
</div>
<div class="row-fluid"> <!--navs-->
<div class="span2 green">nav 1</div>
<div class="span2 yellow">nav 2</div>
<div class="span2 yellow">nav 3</div>
<div class="span2 green">nav 4</div>
<div class="span2 yellow">nav 5</div>
<div class="span2 green">nav 6</div>
</div>
<div class="row-fluid">
<div class="span3 yellow"> <!--sidebar-->
<div class="span12 cyan">side 1</div>
<div class="span12 blue">side 2</div>
<div class="span12 cyan">side 3</div>
</div>
<div class="span9 blue"> <!--Body-->
body<br/><br/><br/><br/><br/>
</div>
</div>
<div class="row-fluid"> <!--footer-->
<div class="span4 green">foot 1</div>
<div class="span4 grey">foot 2</div>
<div class="span4 green">foot3</div>
</div>
</div>
</div>
</body>
You have nested rows in the side bar. Try this for that section
<div class="row-fluid">
<div class="span3 yellow"> <!--sidebar-->
<div class="row-fluid"> <!-- start nested rows -->
<div class="span12 cyan">side 1</div>
</div>
<div class="row-fluid">
<div class="span12 blue">side 2</div>
</div>
<div class="row-fluid">
<div class="span12 cyan">side 3</div>
</div> <!-- end nested rows -->
</div>
</div>
For full details, see the fluid nested section at http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
Good luck!