I am using Semantic-UI in project. When resize a window, the width of the menu container becomes smaller then the menu items width.
You can see this effect on the Semantic-UI example page
Sample code.
body {
overflow: auto;
}
.big.block {
width: 1000px;
height: 100px;
background: red;
}
<div class="ui grid">
<div class="row">
<div class="sixteen column">
<div class="ui floated left main mini menu">
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="big block">big block</div>
</div>
</div>
</div>
Example in the JSFiddle
How to fix this?
Related
I am using bootstrap 4. I have 3 columns in a single row. One of the columns contains a list and the other two do not. I want only the column with the list to be scrollable but not the entire container, which means that the scrollbar muss appear only within that column.
I would appreciate any help.
<div class="row">
<div class="col-sm-4">
<div class="card">...
<div class="col-sm-4">
<div class="card">...
<div class="col-sm-4">
<div class="card">...
</div>
You could do something like this:
<div class="row">
<div class="col-sm-4">
<div class="card">...</div>
</div>
<div class="col-sm-4 scroll">
<div class="card">...</div>
</div>
<div class="col-sm-4">
<div class="card">...</div>
</div>
</div>
then in your css:
.scroll {
max-height: 100px;
overflow-y: auto;
}
I need to implement a cartesian plane with Bootstrap 4 and Flex. The desired output is something like the following image:
The plane is composed by a 10x10 matrix. Moreover I need a row containing the x labels and a column showing the y labels.
Here you are my code:
<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
<div class="d-flex flex-row">
<div class="p-2 align-items-stretch">1</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
<div class="p-2 align-items-stretch">11</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
</div>
<!-- the same for the other 8 rows -->
</div>
And the associated css:
.p-2 {
border: 1px solid lightgray;
}
.p-2:before {
content:'';
float:left;
padding-top:100%;
}
The actual result is:
I have two problems:
the row number 11 should be stretched until the last column;
the grid items should adapt their size according to the available space
of the container.
How I can reach these goals? Thank you
You can use the Bootstrap grid like this...
Demo: https://www.codeply.com/go/sQA6tvHiZh
<div class="container text-center">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="row">
<div class="col-1">y</div>
<div class="col-11">
<div class="row">
<div class="col">1
</div>
<div class="col">2
</div>
<div class="col">3
</div>
<div class="col">4
</div>
<div class="col">5
</div>
<div class="col">6
</div>
<div class="col">7
</div>
<div class="col">8
</div>
<div class="col">9
</div>
<div class="col">10
</div>
</div>
<!--/row-->
9 more row ...
<div class="row">
<div class="col">x
</div>
</div>
</div>
</div>
</div>
</div>
<!--container-->
</div>
HTML:
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
SCSS:
.item{
background-color:skyblue;
#for $i from 1 through 4{
&:nth-child(#{$i}){
margin-left:$i * 10px;
}
}
}
The nth-child(3) doesn't select that.
I try to use nth-of-type, but it's only take nth-of-type(1).
Do I need to add a class in every .item ?
The correct way is to use the space since you are talking about children and not siblings
div div div {}
div div div{
background: red
}
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
To use nth-child you will have to change the markup structure
div:nth-child(3){
background: red
}
<div class="item">
首页
</div>
<div class="item">
项目
</div>
<div class="item">
招贤
</div>
<div class="item">
联系
</div>
I'm using Bootstrap 3 (and angularJs) and i'm trying to make it so all the column of a row have the same height whatever their content is.
But the grid uses float so of course each column only has its content height.
Is there any "out of the box" solution in bootstrap?
Thanks in advance
EDIT: Adding code
<div class="row-fluid">
<div class="col-md-6">
<div class="row-fluid">
<div class="col-md-1">
</div>
<div class="col-md-1">
item
</div>
<div class="col-md-1">
item
item
item
item
item
item
item
item
item
</div>
<div class="col-md-1">
item
item
item
</div>
<div class="col-md-1">
item
item
item
</div>
<div class="col-md-7">
item
item
item
</div>
</div>
</div>
<div class="col-md-6">
</div>
Aside from jQuery to calculate the height of the tallest, you can also try something like this using CSS..
<div class="row">
<div class="col-sm-4">
some content
</div>
<div class="col-sm-4">
some content
</div>
<div class="col-sm-4">
some content more blah blah blah
</div>
</div>
CSS
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row{
overflow: hidden;
}
Demo: http://bootply.com/112728
I would like to make a small, two-column menu with bootstrap. The idea is to have a div that is 200px by 300px high. The structure would, I think, look like this:
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.menu{
width:200px;
height: 300px;
background-color:green;
}
.filterEl{
position: relative;
height:40px;
border: solid black 2px;
}
The issue is that everything gets mashed to the upper left corner of the menu div. How can I get everything evenly spaced in the meny div as if I were using Bootstrap on a full page?
From your example, I think you want the span2 div to actually be your row-fluid as well:
<div id="menu">
<div class="container">
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
See this jsfiddle for a demo.
Parent of every column should be a row.
So, try below structure.
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Reference