I'm using bootstrap 3.
What I'm trying to do in .cshtml create a 'sticky div'
what I've tried until this time https://jsfiddle.net/r41vunwb/
I don't understand why the sticky part doesn't pass to the next row.
here is my minimized code part
div.sticky {
position: sticky !important;
top: 0;
align-self: flex-start;
height: auto;
}
<div class="panel-body">
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-bottom-style:none;">
<div class="sticky" style="font-weight:bold; font-size:20px; background-color:#c9e8ff"> AAAAAA </div>
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio1</p>
</div>
<div id="chartdivE_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio2</p>
</div>
<div id="chartdivK_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio3</p>
</div>
<div id="chartdivT_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio4</p>
</div>
<div id="chartdivP_i" style="min-height:400px"></div>
</div>
</div>
</div>
thank you for all
Because your sticky div is inside the first row. Move it up under the panel-body: jsfiddle
div.sticky {
position: sticky !important;
top: 0;
align-self: flex-start;
height: auto;
}
<div class="panel-body">
<div class="sticky" style="font-weight:bold; font-size:20px; background-color:#c9e8ff"> AAAAAA </div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio1</p>
</div>
<div id="chartdivE_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio2</p>
</div>
<div id="chartdivK_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio3</p>
</div>
<div id="chartdivT_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio4</p>
</div>
<div id="chartdivP_i" style="min-height:400px"></div>
</div>
</div>
</div>
Related
I am new to web devlopment and stuck on this issue for quite some time now.
I wish to make a table(in 2nd col-6) with buttons at top and than changing content(scrollable cards) below it based on button click.
I tried to implement it but my cards and buttons overlap how to tackle this and overlapping makes buttons non reactive.
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="container">
<div >
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope you are using bootstrap 4 or higher, Try this
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="row">
<div class="col-md-12">
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div class="col-md-12">
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am repeating some kind of tiles in a div with class row. It looks like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
It should look like this: IMAGE
Which basically means that no matter what display size it should always show as many tiles as possible in one row. Currently this does not work on a mobile device for example. Anyone know to fix it?
Is this what you were looking for?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
<div class="ccol-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
</div>
I have this HTML:
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
And CSS:
.box {
width: 300px;
padding-top: 100px;
}
.row > div > div {
width: 100px;
height: 100px;
margin: 0px;
}
I'm also using bootsrap (version 3).
I was able to remove margin between rows, but can't remove margin between columns. Is there a way to force it somehow?
I need all "squares" next to each other without any margins (both between rows and columns).
You can see how it looks here: https://jsfiddle.net/a91zujkj/
If you really want to use col- class, make sure to set the .thumbnail elements width to 100% and use a no-padding class on the col- elements.
Here is an example:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.box {
width: 300px;
padding-top: 100px;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
.thumbnail {
width: 100%;
height: 100px;
margin: 0;
}
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
You actually do not need to use col- classes at all and floats are not needed either. Another way to do this is using display: inline-block.
Here is how that looks:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.wrapper {
width: 300px;
padding-top: 100px;
margin: 0 auto;
font-size: 0;
}
.item {
border: 1px solid #eee;
width: 100px;
height: 100px;
display: inline-block;
font-size: initial;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
And if you're really brave you could also use CSS Grid layout. ;)
CSS Grid Layout
CSS Grid layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Here is how that goes:
.wrapper {
padding-top: 100px;
width: 300px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
}
.item {
border: 1px solid #ddd;
height: 100px;
width: 100px;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
It's because .col-*-4 is wider than 100px, which is the width you've defined for the .thumbnail elements.
You can just remove the .col-* classes and use .pull-left instead.
.box {
width: 300px;
padding-top: 100px;
}
.row > div > div {
width: 100px;
height: 100px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="box center-block">
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
Remove padding-left and padding-right for .col classes and then change width: 100px; to width: 100%; for .row > div > div
.box {
width: 300px;
padding-top: 100px;
}
.padding-0{
padding-right:0 !important;
padding-left:0 !important;
}
.row > div > div {
width: 100%;
height: 100px;
margin: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
Row has it's own style and add margin to element, you can remove it by adding :
.box >.row{
margin:0;
}
I am trying to create a 3 by 3 black and white grid. But instead only black square is showing. I have tried using Bootstrap.
My one square of the grid should cover 3 grids space as per bootstrap grid system and I am using padding-top:100% to maintain the aspect ratio for the squares in the 3 by 3 grid.
body {
margin: 0;
color: pink;
}
.square {
width: 100%;
padding-top: 100%;
background-color: black;
}
.square-w {
width: 100%;
padding-top: 100%;
background-color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="square"></div>
</div>
<div class=" col-md-3 ">
<div class="square-w"></div>
</div>
<div class=" col-md-3 ">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3 ">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
</div>
</div>
Your screen view might be too small.
Changing all the col-md-3 classes to col-sm-3 allows it to be shown on my view
JSFiddle: https://jsfiddle.net/2k5523ym/1/
You just need to put below code in css
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
and then assign nopadding class to every col-md-3 div
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
</div>
Hope this help you
demo: http://www.bootply.com/drT0TDRetE
How can I reduce the gutter between the yellow blocks? I want the red div to align properly on top of the yellow blocks like it currently is. I tried reducing the padding for the columns but then the red div does not align properly.
<div class="container">
<div class="row">
<div class=" col-xs-3 ">
<div class="side-menu">1
<br>2
<br>3</div>
</div>
<div class="col-xs-9">
<div class=" menu ">
menu options here
</div>
<div class="row ">
<div class="col-xs-4 ">
<div class="food-item "></div>
</div>
<div class="col-xs-4 ">
<div class="food-item "></div>
</div>
<div class="col-xs-4 ">
<div class="food-item "></div>
</div>
</div>
</div>
</div>
</div>
CSS
.food-item {
width: 100 % ;
background: red;
height: 200px;
background: yellow;
}
.menu {
background: red;
}
.side-menu {
background: green;
}
DEMO http://www.bootply.com/chuUEA13P4
You have to reduce the padding and the row margin to match:
[class*="col-"].gutter-5 {padding-left:5px;padding-right:5px;}
.row.gutter-5 {margin-left:-5px;margin-right:-5px}
HTML
<div class="container">
<div class="row">
<div class=" col-xs-3 ">
<div class="side-menu">1
<br>2
<br>3</div>
</div>
<div class="col-xs-9 gutter-5">
<div class=" menu ">
menu options here
</div>
<div class="row gutter-5">
<div class="col-xs-4 gutter-5 ">
<div class="food-item "></div>
</div>
<div class="col-xs-4 gutter-5 ">
<div class="food-item "></div>
</div>
<div class="col-xs-4 gutter-5">
<div class="food-item "></div>
</div>
</div>
</div>
</div>
</div>