I have element sidebar and div with class sticky-top:
<div class="row">
<div class="col-lg-4">
<div class="sticky-top">
....
</div>
</div>
</div>
I need pass a margin, when sidebar is sticky, because class sticky-top doesn't have a margin-top.
How I can write margin when sidebar is sticky?
Try:
.sticky-top { top: 0.5em; }
You need to use top instead of margin-top
<div class="row">
<div class="col-lg-4">
<div class="sticky-top" style="top: 30px">
....
</div>
</div>
</div>
Try to use:
.sticky-top{
margin-top:10px;
}
if it gives you trouble, you can force it with !important, like this:
.sticky-top{
margin-top:10px !important;
}
Please note that !important should be used only when other solutions are not working.
Hope it help!
Related
In the employee section of a Wordpress site, I'm trying to have the bio slide open in the correct position when you click on each employee photo.
It's working well when the row is full width (4 columns) and in mobile (1 column) but in the 2 column layout (480px to 882px), position().left is returning 0, so the negative margin isn't being properly applied and the bio goes offscreen.
I can't for the life of me figure out why this is... Any help is greatly appreciated!
The site in question: http://contractor-marketing.website/
The HTML (simplified):
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
</div>
The JS:
jQuery('.column').each(function(s, el) {
jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});
Check my example below. Although I took a different approach, it essentially does what you want, and it even animates the element transition.
NOTE: This animation will happen EACH time you press the animate button. You must prevent such animation from happening more than once (if that is the behavior you are looking for). Also, change the $('#animate') selector and click event to the event of your choice.
$('#animate').click(function() {
$(".bio-full").animate({
left: "+=300",
}, 1000, function() {
// Animation complete.
});
});
body{
padding:0;
margin:0;
}
.bio-full{
background-color: red;
display:hidden;
position:relative;
width:300px;
left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
</div>
I hope this helps!
Cheers!
I'm currently trying to hide a button using LESS. My HTML looks the following way:
<div class="targets">
<div class="target">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-delete" />
</div>
</div>
</div>
</div>
The problem: I use jQuery to add a "target" div to "targets" div, the html looks like this after the DOM manipulation:
<div class="targets">
<div class="target">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-delete" />
</div>
</div>
</div>
<div class="target">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-delete" />
</div>
</div>
</div>
<div class="target">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-delete" />
</div>
</div>
</div>
</div>
I always want to hide the first button with the class btn-delete. I use LESS.
My current LESS looks like this:
.targets {
button[type="button"] {
.btn-delete {
visibility: hidden;
}
}
}
Unfortunately my LESS coding doesn't work as I expected.
Do you know how to solve this issue, thus to always hide the first .btn-delete button with LESS Css?
Thanks! :)
As you are targeting the button with btn-delete class, You need & operator
.targets {
button[type="button"] {
&.btn-delete {
visibility: hidden;
}
}
}
OR, Traditional way
.targets {
button[type="button"].btn-delete {
visibility: hidden;
}
}
Hello use below code it work properly
.targets{
.target:first-child{
button[type="button"] {
&.btn-delete{
visibility: hidden;
}
}
}
}
Its applying the visibility to a element with a class inside the button so
.targets {
button[type="button"].btn-delete {
visibility: hidden;
}
}
Would look for button[type="button"] with the class .btn-delete.
I'm trying to make a mansonry-like layout but with elements that have responsive sizes. The sizes are limited though, they can only be multiples of the smalles rectangle. The idea is that I can have 1x1, 1x2, 2x2, 2x1 elements that fit the best place possible in the page.
I saw some questions like this before but the answer was always something unuseful like 'use bootstrap'. I tried bootstrap grid, skeleton grid and many other already. None of them can handle elements that overlap columns.
I'm using Mansonry js library now, and I'm almost there. There is only one glitch that I'm not beeing able to solve. Mansonry for some reason doesn't like when I make a 2x2 element. It breaks the gutter (even when I include the exact gutter size in the elements width).
Things to note, I'm using a variable (percetage) element width and a height based on that width.
My test html part:
<div class="container">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Exemplo divisão -->
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item grid-item--width2"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
</div>
</div>
My css:
.container {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.grid-sizer,
.grid-item {
width: 33%;
background-color: #666;
margin-bottom: 0.20%;
margin-top: 0%;
}
.gutter-sizer { width: 0.5%; }
.grid-item:before{
content:"";display:block;padding-top:50%;
}
.grid-item--width2{
width: 66.5%;
background-color: #555;
}
This is getting me: http://s23.postimg.org/knxbt44xn/gutter.png
Hello, myself.
I solved it. I tested: Masonry, Nested, Skeleton, Boostrap, (Doing manually), (some cms plugins)...
Finally, the answer was: Freewall.
https://github.com/kombai/freewall
This plugin solves nesting and gutter both vertically and horizontally. If you set widths and heights in proportion, it just works. Actually according to my tests, it works with anything you set. Has tons of options too. I love it!
<div class="container">
<div id="freewall">
<!-- Exemplo divisão -->
<div class="brick"> </div>
<div class="brick two"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick tall"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
</div>
</div>
My final js:
// jQuery
$(document).ready(function() {
var wall = new freewall("#freewall");
wall.reset({
selector: '.brick',
cellW: 320,
cellH: 160,
fixSize: 0,
gutterX: 5,
gutterY: 5,
onResize: function() {
wall.fitZone();
}
});
$(window).trigger("resize");
});
The css just sets the width to 33% (66% on wide), and height to 50% on normal and 100% on tall (heighs based on width using padding top).
Let me first present my code sample:
<div id="StartScroll"></div>
Many divs and content here !
<div id="EndScroll"></div>
My question is that how can i make a scroll bar which starts to scroll from div with id StartScroll and end scroling at div with id EndScroll .
Note that there is content before StartScroll and after EndScroll but i want the scroll bar should not be allow to go outside StartScroll and EndScroll .
How can i make this? Maybe with jQuery ?
Thanks in advance!
overflow-y: scroll could be the solution
http://jsfiddle.net/ds3nqbkz/2/
<div id="StartScroll" style="overflow-y: scroll">
Many divs and content here !<br />
Many divs and content here !<br />
Many divs and content here !<br />
</div>
Wrap the content within the startScroll and endScroll division blocks within a div and assign the following style:
overflow-y: auto;
height: 200px; (or any specific height you wish to)
Try this:
Check here
.makescroll {
height:150px
overflow-y:scroll;
}
<div class="makescroll">
<div id="StartScroll"></div>
<div id="EndScroll"></div>
</div>
You then to wrap your content in single div and give it fixed height and make overflow-y : auto or scroll.
overflow-auto :- Will show scroll only if your content is more than height. Else it will be remove.
overflow-scroll :- Will always show scroll, in case content is less it will show disabled scroll.
You can use any of below approach to apply it. Examples have scroll you can change to auto if needed.
#fixed{
height:150px;
overflow-y:scroll;
}
<div id="StartScroll"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
#
<div id="StartScroll" inlineStyle="height:150px;overflow-y:scroll;"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
##############################################################################################
fixedStyle{
height:150px;
overflow-y:scroll;
}
<div id="StartScroll" class="fixedStyle"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
##################################################################################
documentById("fixed").style = "height:150px;overflow-y:scroll;";
<div id= "StartScroll"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
I was insert text to <div> from java script. Looks like <div> tag width and height already setup. So If I insert large paragraph text then <div> is overlapping on to other <div> under below.
$("#formDescription").text($("#Description").val());
html
<div class="col-sm-10 col-sm-offset-1" id="box_front_bottom" style="display: none;">
<div class="panel panel-default">
<div class="panel-body">
---
---
<div class="form-group">
<div class="col-sm-5" style="overflow: auto">
#Html.Label("Description", new { #class = "control-label" })
</div>
<div class="col-sm-7" id="formDescription">
</div>
</div>
If I use less text, it will show like this
JSFiddle
With the bootstrap CSS you are setting the containers of that information with float:left you may need to clear the floats to keep each form in separate lines; use this:
.form-group:after {
content: " ";
display:block;
clear:both;
}
The demo http://jsfiddle.net/Q2FHr/2/
use display: inline-block; and max-height