I would need to make sure that when the page is scrolled the div ".col-left" is placed in the fixed position (it must start from the top ".ctn-parte-iniziale").
Also, when it gets to the bottom of the footer ".bg-orange" it must stop and it must no longer be in the fixed position.
How can I do?
A thousand thanks!
This is my code:
<div class="ctn-parte-iniziale">...</div>
<div id="main-site">
<div class="bg-white">
<div class="container">
<div class="page_layout page_margin_top clearfix cnt-corsi-gen">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-12">
<div class="col-left">
...
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-orange"></div>```
Try adding this to col-left. In 2021 you may not need the webkit line but try it first.
So, in CSS
div.sticky {
position: -webkit-sticky; <!-- Safari/Chrome --->
position: sticky;
top: 0;
}
And then in your HTML
<div class="col-left sticky">
Related
I have a sidebar and content div. I want scroll page and height of content to be longer then my sidebar. Now I tried to fix my sidebar when height ended, but content scroll. My code is here:
<div class="container-fluid" style="padding:5px 35px">
<div class="row">
<div class="col-md-3">
<div class="card d-none d-md-block" style="margin-top:30px;margin-
bottom:50px;"></div>
</div>
<div class="col-md-9 ">
#include('Products.ProductList')
</div>
</div>
</div>
I don't use any classes for sidebar and content, how can I solve this problem?
If I understand what you're asking for correctly, all you need to do is this and you can change that 500px height to whatever your max height needs to be:
.container-fluid {
height: 500px;
overflow-y: auto;
}
I need to rearrange some content based on window/screen size.
This is how it looks when in full:
And this is what I need when screen size 768 or less:
This is my code structure:
<div class="container">
<div class="row">
<div class="col-md-9 site-main-content">
<div class="content">
<!--Main content-->
</div>
</div>
<div class="col-md-3 site-sidebar-content">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
</div>
</div>
Not sure how to achieve this.
Update: I can not use hidden property. Box 1 contains some ajax search form. If I put it above main content (on full screen) and set display none, ajax form doesn't work anymore. So I am looking for a javascript snippet to remove box 1 from it's location and load it above main content when on smaller screen.
I have used hidden classes in my example please check and let me know...
Updated Fiddle
HTML
<div class="row">
<div class="col-md-9">
<div class="box-1 hidden-md hidden-lg">
Box 1
</div>
<div class="mainBox">
<div class="content">
Main Content
</div>
</div>
</div>
<div class="col-md-3">
<div class="box-1 hidden-xs hidden-sm">
Box 1
</div>
<div class="box-2">
Box 2
</div>
<div class="box-3">
Box 3
</div>
</div>
</div>
CSS
.mainBox{
background:green;
min-height:300px;
padding:10px;
margin-bottom:10px;
}
.box-1{
background:red;
min-height:100px;
padding:10px;
margin-bottom:10px;
}
.box-2, .box-3{
background:#00A2E8;
min-height:100px;
padding:10px;
margin-bottom:10px;
}
Question Background:
I have a simple view consisting of a Form, a button and some text. Through CSS i have horizontally and vertically centered the contents of the page.
The Issue:
When a user clicks onto the button I am appending a spinner .gif image to a div. The issue I have currently is as the content is centered appending the image causes the form to move up which dosen't look good.
Code Pen example:
Please see my codepen for a demo of the issue
http://codepen.io/daveharris/pen/dMvaGW
HTML:
<div id="centerDiv" class="centered">
<div class="col-lg-12 text-centered pushDown">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="row">
<div class="col-lg-4 form-group text-center">
A HomePage Item
</div>
<div class="col-lg-4 form-group text-center">
A HomePage Item
</div>
<div class="col-lg-4 form-group text-center">
A HomePage Item
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input type="submit" id="submitBtn" class="btn btn-success btn-block" value="Submit" />
</div>
</div>
<div class="col-lg-12 text-center">
<h4>This is homepage text</h4>
</div>
<div id="loadSpinner" class="text-center">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.pushDown {
margin-top: 50px;
}
.spinnerSize {
height: 60px;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
}
JavaScript & jQuery:
$('#submitBtn').click(function(){
var spinner = '<img src="http://i870.photobucket.com/albums/ab267/GLaDOS_Chibi/Aperture_Science_by_crazychrislau93.gif" class="spinnerSize">';
$('#loadSpinner').append(spinner);
});
How can I go about changing this so the contents is still vertically/horizontally centered by when the button is click and spinner append it dosen't cause the contents to jump up?
You could give #loadSpinner a corresponding height of 60px. This will get rid of the "jumping":
#loadSpinner {
height:60px;
}
Updated Codepen
I'm having an issue trying to get two divs that are side by side the same height when the content for each of the divs are generated using an ng-repeat.
Flex box stops the site being responsive and i can't work out when would be a suitable time to call a Jquery function as the views are nested and the page doesn't actually load when the new html is displayed. I have tried ng-repeat-start and end to no avail.
Ideally once the content has loaded i would the div on the right to be the same height as the div on the left.
Would really appreciate any help with the problem.
Cheers
EDIT - Code Included
<div class="row">
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing rottnestGreen">
<div ng-repeat="bh in bikeHire" class="row">
<p class="col-xs-6">{{bh.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
<p class="col-xs-3 blueText">{{bh.price | currency}}</p>
</div>
</div>
</div>
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing np rottnestGreen">
<div ng-repeat="sf in sAndF" class="row">
<p class="col-xs-6">{{sf.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
<p class="blueText col-xs-3">{{sf.price | currency}}</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Is it something like this you are looking for? https://jsfiddle.net/yczgaLgm/2/
Wrapping everything in a container:
<div class="row container">
And then styling the container to use flexing is the way I usually do this
.container {
display: flex;
flex-wrap: wrap;
}
The biggest downside though is IE support, I dont hope you are supporting below IE10?
I need to center align every divs in Bootstrap3. To make it an accounting report. There're 3 level of divs - Header, subheader and detail list. Each level I use col-md-* to limit the width. I've tried text-align but it's not help.
Here's the code :
<div class="container">
<div class="header text-info">
<h1>Heading</h1><br />
<h2>Acc. Type</h2><br />
<h3>Month</h3>
</div>
<legend>Income</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div>
</div>
<legend>Expense</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div><!-- /col-md-12 -->
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
</div><!-- /acc-content -->
</div>
DEMO : http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/ (please view in desktop).
I expect all the divs to center aligned like this : (red border is just a test)
Please be adviced.
Add col-md-offset-*. For example:
<div class="col-md-10 col-md-offset-1">
and
<div class="col-md-8 col-md-offset-2">
You must also change your margin: 5px on .acc-content div[class*='col-md-'] to margin-top: 5px; margin-bottom: 5px because it overwrites Bootstrap's margin-left for col-md-offset-*.
DEMO: http://jsfiddle.net/mshwa1yt/5/embedded/result/
DOCS: http://getbootstrap.com/css/#grid-offsetting
using block-center class wrapping using row
all the col classes from bootstrap have the float left property. either remove them (not adivsed) and add margin:auto to the divs...or add more divs:
if u have a col-8 add col-2 left and col-2 right (offsets)...so you keep the grid system in place
You need to add this to the divs:
.acc-content div[class*='col-md-'] {
float: none;
margin: 5px auto;
}
First one overwrites the float: left rule that's pretty much the opposite of center aligning it, the second one actually aligns it to center.
Bootstrap 3 has a mixin called center-block found in utilities.less.
First, add class center-block to elements that should be centered.
Then, if using Less, add to CSS:
.center-block {
.center-block();
}
If using plain CSS, add:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
in this example replace this
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
with this
<div class="col-md-10 col-md-offset-1">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8 col-md-offset-2">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
add class col-md-offset-"number of cols" to col- divs