Using Bootstrap (3.3.6) collapse, with the collapsible DIVs located between form inputs\labels. When the DIVs expand\hide, there's a sort of snap\jitter.
The code for the problem: https://jsfiddle.net/ybto1zvk/
I've seen similar post talk about jitter when one of the DIVs has padding, but as you can see, there's no styling except what bootstrap is applying...
Have tried with Chrome and Firefox, no difference.
HTML
<form role="form">
<div class="radio">
<label>
<input type="radio" name='radioinput' id="radio1"> One (click me)
</label>
</div>
<div class="collapse" id="collapse-1">
<div class="well">
Sub 1
</div>
</div>
<div class="radio">
<label>
<input type="radio" name='radioinput' id="radio2"> Two
</label>
</div>
<div class="collapse" id="collapse-2">
<div class="well">
Sub 2
</div>
</div>
<div class="radio">
<label>
<input type="radio" name='radioinput' id="radio3"> Three
</label>
</div>
<div class="collapse" id="collapse-3">
<div class="well">
Sub 3
</div>
</div>
</form>
javascript
$('#radio1').click(function() {
$('#collapse-1').collapse('toggle');
$('#collapse-2').collapse('hide');
$('#collapse-3').collapse('hide');
});
$('#radio2').click(function() {
$('#collapse-2').collapse('toggle');
$('#collapse-1').collapse('hide');
$('#collapse-3').collapse('hide');
});
$('#radio3').click(function() {
$('#collapse-3').collapse('toggle');
$('#collapse-1').collapse('hide');
$('#collapse-2').collapse('hide');
});
This is being caused by the bottom margin property (set by bootstrap) on the well. Try adding:
.well{margin:0}
To your css, this should solve the problem.
This issue is because of collapsing margin. As per Mozilla Documentation:
Parent and first/last child: If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
In your case margin-bottom of .well inside .collapse is creating this issue. You can solve this issue by many ways. But two ways are
Add overflow: hidden on parent
Remove margin-bottom from .well
Here is Working Fiddle
Related
I have added radio button in a table using bootstrap 4. Whenever I click on any of the radio button it moves slightly to the left. I have added a GIF below
The code of one row from the table is given below.
<table>
<tr class="" data-id='1'>
<td>1</td>
<td>Md. Khairul Basar</td>
<td class="form-inline table_attendance">
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadio" style=" position: relative;"id="exampleRadios1" value="present">
<span class="form-check-sign"></span>
Present
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input pull-right" type="radio"
name="exampleRadio" style=" position: relative;"id="exampleRadios2"
value="absent">
<span class="form-check-sign"></span>
Absent
</label>
</div>
</td>
</tr>
<table>
If you could help me with the code then it would be great.
It seems to me that it does not move, it just simply gets bigger border and visually it looks like it moved. I guess you could solve your problem by adding to your css for the input with type checkbox this css line - box-sizing: border-box;
$('input[type="radio"]').css("box-sizing","border-box");
At first, you don't need position: relative if you don't use any top/bottom/left/right or position in child element.
The problem is due to your custom add CSS, I assume.
Try using box-sizing: border-box; It will force the element to be in original size, even if you use additional padding or border.
For clarification: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
#input{
display: inline-block;
}
<div>
<div>
<input type="radio">
<label>Item 1</label>
</div>
<div class="inputClass">
<div id="input">Some text</div>
<div id="input"><input type="text"></div>
</div>
<div>
<input type="radio">
<label>Item 2</label>
</div>
</div>
In the above HTML snippet, is there any way I can restrict tabbing to the input inside .inputClass?
Please note that in the actual code I have no way of knowing if .inputClass will hold an input box or not. It could be a button, dropdowns etc or any other tabbable element. So I can't apply tabindex=-1 to the element(s).
Also, please note I don't want a jQuery solution.
I am trying to add a scroll arrow below specific divs that have overflow on them and only when the overflow is active. There are different containers with different heights and I only want this scroll arrow to appear on the ones that have overflow on them, is there a way to do this dynamically?
I have created a JS Fiddle to show my html, so basically when the 'slide' content exceeds the 900px max height it gets overflow but I want it to then display the arrow or the opposite effect and hide the arrow if overflow isnt active!
https://jsfiddle.net/h7r16cah/
<div class="large-12 columns">
<div id="" class="large-9 columns page-content-right">
<div class="slider">
<div class="slide-large-content">
</div>
<div class="slide-small-content">
</div>
</div>
</div> <!---end page content right -->
<div class="large-9 columns">
<div class="scrollarrows-container">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
</div>
</div>
</div>
</div><!---end large 12 cols -->
Any help would be appreciated, and if you need more information let me know!
Thanks in advance
I know div elements are block level elements. They come one by one in different rows. I found one strange behavior. It is not displaying one by one.
<div id ="contend">
<div style='position:relative'> <div class='serach-box'>
<div class="container">
<p>Live Search</p>
<!--Row with two equal columns-->
<div class="row" >
<div class="col-md-3" >
<div class="demo-content">Location</div>
</div>
<div class="col-md-3" >
<div class="demo-content bg-alt">.col-sm-6</div>
</div>
</div>
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
</div>
</div>
</div></div>
<div>hello</div>
<div>hello</div>
</div>
I added two div elements after completing the serach-box div. I gave serach-box a position: absolute; and its parent div position: relative;.
But why did div text appear above ? Why not below the serach-box div?
Code is below:
http://plnkr.co/edit/ONrHDKuaP9bwmT7MsQhD?p=preview
.serach-box{
width: 90%;
height: 150px;
border: 1px solid;
position:absolute;
left:5%;
}
Because the search box is absolutely positioned, it is taken out of normal flow.
Since it isn't in normal flow, it has no influence over the height of its container.
Since its container has no other content, the container ends up with a height of zero.
The elements following the container are, therefore, not pushed down by the container's height.
your position absolute will cause the text to find its way to the top.
Absolute means it will 'hover' on top of the page.
you can set the position to relative and add some with and height to place the box at the top.
just replace absolute for relative
To the div which is relatively positioned, its taking no height so, both the div's with 'hello' text are displaying there itself.
Give some min-height to the relatively positioned div.
<div style='position:relative;min-height: 32%'>
....
....
</div>
Which will work fine for you.
I am using twitter bootstrap, i have an issue with clearfix class in bootstrap. My html is :
<div class="pull-left">This is a text</div>
<hr class="clearfix" />
What i am expecting is horizontal line should come in next line of displayed text but it renders at right side of the text. And if when i use style='clear: both;' in hr than it works fine. Why clearfix not doing the same as clear: both does ?
The class clearfix should be applied to the parent container element
<div class="clearfix">
<div class="pull-left">This is a text</div>
</div>
Demo: Plunker
Try the following:
<div>
<div class="pull-left">This is a text</div>
<div class="clearfix" />
</div>
<hr />
In this case empty clear div is placed next to right of your pull-left div and does clearing.
The matter is if you use float: left on the element then it becomes float and the next element after it is placed to the right if there is a free space for it. So you should place all the elements you need to be float with float: left (say pull-left) in a row and close this sequence with float: none; clear: both (say clearfix) to stop floating.