I'm using bootstrap 3. My idea is to expand/collapse some words between other words (transcriptions in dictionary) by clicking on one button.
Words and transcriptions between them all have class display: "inline-block". It's there a way to make strictly horizontal transition, and avoid this display:"block" part of it? Panel heading should be always in one line. (And avoid to write additional js)
<div class="panel-heading">
<div class="note">{{note}} </div>
<div class="word -arabic-text-big">{{word}}</div>
<div class="collapse transcription">[******]</div>
</div>
<button type="button" class="btn btn-info"
data-toggle="collapse" data-target=".transcription">
Transcipt
</button>
Sorry, the answer was too simple. But before i did something wrong...
.note, .word, .transcription {
display: inline-block;
}
.transcription.collapse.in {
display: inline-block;
}
.transcription.collapse {
display: none;
}
Related
I have a modal
<div class="modal fade editModal in" data-backdrop="static" style="display: block; padding-left: 15px;">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-2 col-md-offset-5 col-md-2 text-center">
<img width="80" src="/assets/be/img/baby/solidfood.png"><br><br><br>
<input type="time" value="14:25" name="updatedAt" width="100%" height="80">
<br><br>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<br><br>
</div>
<br>
<button onclick="updateLog('7873')" class="btn btn-option btn-success btn-block">Done</button>
<br>
<button onclick="deleteLog('7873', 'solidfood')" class="btn btn-option btn-danger btn-block">Delete</button>
</div>
</div>
</div>
CSS
.btn-option {
width: 100%;
height: 80px;
}
I have no idea why the buttons is not extended to the end!
It stopped at 95%.
How do I debug this and make it take a full width ?
The cause
The problem was caused by the margin-right: 10px;.
.btn, .btn:hover {
color: white;
margin-right: 10px;
}
A solution
So, what should you do? Setting margin-right: 0px; would produce the result you can see below. This is not what you want because there's no space in-between these two elements.
You need to set margin-right: 0px; only to the right (i.e., last) element. You can do this by adding this:
.btn:last-child, .btn:last-child:hover {
margin-right: 0px;
}
This will produce the result you can see below.
Try removing those two <br> tags inside the <div>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<!-- Try removing these -->
<br><br>
</div>
I don't think you'll need them inside a flexbox anyways.
Or maybe it's the padding-left:14px on the parent div that's causing this.Try changing that too and this should fix it.
I opened your code provided and unchecked "margin-right:10px;" and it removed the margin on the right side of the button so that the buttons take up the full width of the row (parent element) and both buttons are taking half of the row. See image: CSS code highlighted in yellow and Fixed App
There are multiple ways to skin this cat.
The bootstrap way:
This solution uses the built-in bootstrap grid system to accomplish the result you're looking for.
Remove the inline styling from your container div and replace it with bootstrap's row class. Then wrap each contained button inside divs with the class col-lg-6.
<div class="row">
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
</div>
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
</div>
Result:
It looks clean require no additional css or overrides. However you are stuck with the bootstrap default column gap between buttons which may not be desirable.
Incidentally, if at all possible, I highly recommend upgrading to bootstrap 4 instead of 3, as it's much more flexible to tweaking this kind of thing without having to resort to writing more css.
Custom CSS way:
If you want more control over the gap between the buttons, bootstrap may not be your best bet.
This is similar to the solution above from Cervus Camelopardalis and uses the :first-child and :last-child pseudo-classes.
Remove the inline style from the container element and instead give it a descriptive class name. I chose "double-btn" but use whatever makes the most sense to you.
HTML:
<div class="double-btn">
<button onclick="updateLog('7997', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7997', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
In your CSS, add a rule for this class to set display: flex.
Then add another rule targeting any .btn's that are children of this class, removing the default bootstrap margin.
Then add one last set of rules targeting the :first-child and :last-child pseudo-classes of those .btns, setting the margin-right and margin-left to half of your desired gap, respectively. I chose a ten pixel gap here, but with this approach you can change it whatever looks best to you.
CSS:
.double-btn {
display: flex;
}
.double-btn .btn {
margin: 0;
}
.double-btn .btn:first-child {
margin-right: 5px;
}
.double-btn .btn:last-child {
margin-left: 5px;
}
Result:
From here, you can adjust the above margin-right and margin-left values to change the size of the gap between buttons.
It looks like you have margin-right on those two buttons, because your buttons have width of 100% and there is space between them and at the end of that div.
Try adding margin: 0; on .btn-option.
If this doesn't do the trick try setting white-space: normal; on parent div.
<div class="row">
<div class="col-lg-2">
Panel for filter
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button>
then i show the contents
</div>
</div>
I have a row in bootstrap. The row is divided into two parts. One is a div for filter panel and second is to show some content.
I have a button in the second part (bootstrap modal button). In the navigation breadcrumb, I'm giving an option to hide the filter panel.
All works fine. My problem is that when I hide the first div, In the filter panel my button in the second div also changes the position.
My requirement is that if I hide the filter panel, the button in the second div should not change even though the contents in the second div changes.
Does anyone know any workaround to achieve the desired result?
Try this:
$('button').click(function(){
$('#panel').toggleClass('inactive');
});
#panel{
background-color:red;
height:100px;
display:block;
}
#panel.inactive{
display:none;
}
#content{
position:relative;
background-color:green;
height:100px;
}
.btn{
position:absolute;
top:0;
right:0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-2" id="panel">
Panel for filter
</div>
<div class="col-lg-6" id="content">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button>
then i show the contents
</div>
</div>
The reason that the element (your button) moves can be caused by the different interpretation of position: fixed; on a few mobile devices.
I have experienced that the fixed element in question can not be a child-element of any moving (eg. scrolling) element. On desktop this seems not a problem. So you should place the button outside of the row or if needed inside just
position: absolute;
top:10px;
right: 10px;
or so as stated by kittyCat
A next reason could be: if you hide the first part of your row col-lg-2 then there are two grid-cells missing to the line. So just hide the content of the row:
So take the Example of kittyCat and change:
<div class="col-lg-2" id="panel">
Panel for filter
</div>
to
<div class="col-lg-2" >
<div id="panel"> Panel for filter</div>
</div>
and it should work as wanted.
Or if you need the space and you want to hide the col-lg-2 then change the class of the second element from col-lg-6 to col-lg-8.
I currently have a few buttons on a line that I have horizontally but would like to add margins to push the buttons away from each other.
I was editing my code in a smaller window and the buttons were spaced fine using CSS margins, but when I maximized the window I noticed that the margins between the buttons either pushed some buttons to a new line or pulled them back.
I haven't been able to find a way to set margins for these buttons on the same row in a responsive way so they don't push to a new line or pull back.
Any ideas?
HTML
<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button>
Select All
Deselect All
<a class="btn btn-info btn-infospacer" role="button" data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button>
CSS
.btn-selectspacer {
margin-left: 40em;
}
.btn-infospacer {
margin-left: 2.25em;
}
.btn-submitpadding {
padding-top: 7px;
padding-bottom: 7px;
}
Image
Button Spaced with margins horizontally
Thank you,
Alex
You can do this by using the grid system that comes with Bootstrap. For example the Submit taking up 9 col's, the select/all taking up 2 and then more info taking up 1. And then just align the submit button to be on the left of the column.
This is very simple solution for what you need. I tried out my self, results are just like you want in attached image.
As if you are testing it in very large devices, I would recommend you to download the following bootstrap css for extra large devices.
BOOTSTRAP CSS FOR EXTRA LARGE DEVICES
Put this css below your bootstrap css file and you can then use another column class like "col-xl-numbers of columns". For your specific case i am adding "col-xs-12" to the button div.
Note: Upcomming Bootstrap 4 has built in class for extra large devices.
You css should only be
.btns-right {
float:right;
margin-right:5%;
}
.btn-submitpadding {
padding-top: 7px;
padding-bottom: 7px;
}
and your html should be
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button>
<div class="btns-right">
Select All
Deselect All
<a class="btn btn-info btn-infospacer" role="button" data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button>
</div>
</div>
In Twitter bootstrap 3, I have some glyphicons in my divs and I add "pull-right" for default pages.
When I change direction to RTL texts etc. flips successfully but pull-right doesn't switched to pull-left.
What should I do to have an icon in right for LTR and in left for RTL ?
(Of course it is possible to add javascript code and check for all pull-rights in page body and change them to pull-left, but I don't prefer JS solution. I tried this but it didn't help.)
Fiddle:
http://jsfiddle.net/mavent/dKPE3/1/
<div id="div1" class="alert alert-info">This is my fancy description <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>
<div id="div2" class="alert alert-info">هذا هو بلدي وصف الهوى <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>
You can override .pull-right class to float to the left when it appears after an rtl element.
Like this:
.rtl {
direction: RTL;
}
.rtl .pull-right {
float:left !important;
}
And your div element:
<div id="div2" class="alert alert-info rtl">
هذا هو بلدي وصف الهوى
<span class="badge badge-info">122</span>
<a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa">
<i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i>
</a>
</div>
Here is a FIDDLE
Alternatively, you can do it using javascript: (Using your same code just add javascript)
$(document).ready(function() {
$('.pull-right').each(function() {
if($(this).parent().css('direction') == 'rtl')
$(this).attr('style', 'float:left !important');
});
});
Hope this helps.
I don't know if this might help you but you can use this Demo, i.e. overriding the pull-right class
css
#div2 {
direction: RTL;
}
#div2 .pull-right {
float: left !important;
}
I'd suggest looking into this library. It is built on the Bootstrap core, and right-to-left support is included.
Another option to use this stand-alone library.
You could use RTLCSS to generate a complete RTL version of your CSS, It gives you the ability to extend its functionality to support custom scenarios. Plus it has support for CSS3 transforms (matrix, translate, rotate ... etc.).
I have a JSFiddle set up here showing what is currently happening: http://jsfiddle.net/YX7T6/1/
This is the code:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>
CText
</li>
</ul>
<div class="pull-right">
<button class="btn btn-default btn-lg"> button1 </button>
<button class="btn btn-default btn-lg"> button2 </button>
</div>
</div>
</nav>
<div class="container">
<a href="#">
<img src="http://placekitten.com/g/150/150" class="img-thumbnail" style="margin-top:-130px">
</a>
</div>
I'm trying to get the image to show on top of the navigation not behind it as it is now. I've tried changing the z-index of the image to something higher but nothing has changed. What should I try next?
As the other answers mentioned, z-index only works on elements that have position. Applying z-index to an element that has no position will simply be ignored.
img {
position: relative;
z-index: 1;
}
Will make the browser recognize the z-index attribute, and place the image above the nav menu. In the future whenever you're having issues with z-index not being recognized, the first thing you should do is check whether the elements in question have position.
However, in this specific case, rather than messing with negative margins, it may be simpler to do:
img {
position: absolute;
top: 0;
}
Just add position like position:relative; to your element
if you plan to control it's z-index property
fiddle
Alternatively, use position: absolute on the img and skip the z-index stuff.
http://jsfiddle.net/YX7T6/8/