how to apply overflow x in row class - css

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;
}

Related

How to move 1 column card to to another column bootstrap?

Is it possible to move card from one column to another column?
When the page is reached to mobile view then card 3 should move to 2nd column in middle of card 1 and card 2
How to achieve this?
<div class="container">
<div class="row">
<div class="col-md-4">Demo content</div>
<div class="col-md-4">
<div class= "card">card 1</card>
<div class="card">card 3</card>
<div class="card">card 2</card>
</div>
<div class="col-md-4">
<div class="card">card 3</card>
</div>
</div>
</div>

Use the responsive display classes.
<div class="container">
<div class="row">
<div class="col-md-4">Demo content</div>
<div class="col-md-4">
<div class="card">card 1</div>
<div class="card d-md-none">card 3</div>
<div class="card">card 2</div>
</div>
<div class="col-md-4">
<div class="card d-none d-md-block">card 3</div>
</div>
</div>
</div>
https://getbootstrap.com/docs/4.6/utilities/display/

Divide 4 column to 2 column with Bulma CSS

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/

bootstrap grid bag container ignores boundaries

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;
}

bootstrap layout - left margin issue when deploy multiple spans

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!

windows mozilla dosen't support position absolue

When I try to use position: absolute on a div in Firefox it doesn't seem to work.
For jquery calender I used position:absolute for a div it seems to work all browsers in linux and windows except mozilla in windows. When I remove the position:absolute it will work in windows firefox but only showing alternate months in all other browsers (january, march, may, ..)
<div class="body">
<div class="inner">
<div class="container a pickable month" style="z-index: 999; left: 0px; visibility: visible;
opacity: 1; display: block;">
<div class="row a odd">
<div class="first">
Su</div>
<div>
Mo</div>
<div>
Tu</div>
<div>
We</div>
<div>
Th</div>
<div>
Fr</div>
<div class="last">
Sa</div>
</div>
<div class="row b even">
<div class="outside first">
28</div>
<div class="outside">
29</div>
<div class="outside">
30</div>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div class="last">
4</div>
</div>
<div class="row c odd">
<div class="first">
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div class="last">
11</div>
</div>
<div class="row d even">
<div class="first">
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div class="last">
18</div>
</div>
<div class="row e odd">
<div class="first">
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div class="last">
25</div>
</div>
<div class="row f even">
<div class="first">
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
<div>
31</div>
<div class="outside last">
1</div>
</div>
<div class="row g odd">
<div class="outside first">
2</div>
<div class="outside">
3</div>
<div class="outside">
4</div>
<div class="outside">
5</div>
<div class="outside">
6</div>
<div class="outside">
7</div>
<div class="outside last">
8</div>
</div>
</div>
<div class="container b pickable month" style="z-index: 998; visibility: visible;
opacity: 1; display: block; left: -200px;">
<div class="row a odd">
<div class="first">
Su</div>
<div>
Mo</div>
<div>
Tu</div>
<div>
We</div>
<div>
Th</div>
<div>
Fr</div>
<div class="last">
Sa</div>
</div>
<div class="row b even">
<div class="outside first">
31</div>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div class="last">
6</div>
</div>
<div class="row c odd">
<div class="first">
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div class="last">
13</div>
</div>
<div class="row d even">
<div class="first">
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div class="last">
20</div>
</div>
<div class="row e odd">
<div class="first">
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div class="last">
27</div>
</div>
<div class="row f even">
<div class="first">
28</div>
<div>
29</div>
<div>
30</div>
<div class="outside">
1</div>
<div class="outside">
2</div>
<div class="outside">
3</div>
<div class="outside last">
4</div>
</div>
<div class="row g odd">
<div class="outside first">
5</div>
<div class="outside">
6</div>
<div class="outside">
7</div>
<div class="outside">
8</div>
<div class="outside">
9</div>
<div class="outside">
10</div>
<div class="outside last">
11</div>
</div>
</div>
</div>
</div>
Style sheet is http://snagglefoot.net/ainc/calendar-eightysix-default.css

Try specifying a width or top or left property for the div in question if you did not in the original code.
Position is commented out here. Maybe you didn't mean to.
.calendar-eightysix .body {
position: relative;
}
.calendar-eightysix .body .inner .container {
/*position: absolute;*/
left: 0;
}

Resources