I have two rows, one with a button and one with text, I want to add a simple animation on the button by changing it's margin-top, problem is that all the rows below will move with the button. I tried with position-absolute on button and position-relative on col, but then bootsrap coloumns doesn't wrap in responsive.
button:active {
margin-top: 4px;
}
<div class="row">
<div class="col">
<button>
<p>Button</p>
</button>
</div>
<div class="row">
<div class="col">
<button>
<p>Text.</p>
</button>
</div>
To adjust the appearance of an element without adjusting how it affects the rest of the page, use the transform property. In this case you want to move in the y-direction so use translateY():
button:active {
transform: translateY(4px);
}
Related
I have a container div with 2 buttons inside, used in several places on my website, with different content on the buttons. Ideally, they should be placed next to eachother, but if the text in the buttons is too large, they are split over 2 rows, underneath eachother. In that case, there should be a 10px margin between them.
I don't know if it makes any difference, but I'm using Bootstrap 3 and SCSS.
Is there a way to put a condition in there in SCSS to add this margin-bottom to the first element ONLY if they are displayed on 2 rows?
I've also tried simply adding margin-top: 10px to both buttons, but then I have an unnecessary extra margin.
I was also thinking of calculating the total width of the child elements (the buttons) and checking if it exceeds the width of the container, but I have no idea how to achieve this without having to use javascript.
You can do this with plain HTML/CSS. Wrap your two buttons in two divs, an outer and an inner one.
Apply Flexbox layout to the outer div.
Add a negative margin to the inner div.
Give your buttons a positive margin, equal to the negative margin of the inner div.
.outer-wrapper {
background: #ddd;
display: flex;
}
.inner-wrapper {
margin: -10px;
}
.btn {
margin: 10px;
}
/* Test the button wrapping */
.narrow-wrapper {
width: 20rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-wrapper">
<div class="inner-wrapper">
<button type="button" class="btn btn-primary">Button with a lot of content inside</button>
<button type="button" class="btn btn-primary">Another button</button>
</div>
</div>
<br>
<div class="outer-wrapper narrow-wrapper">
<div class="inner-wrapper">
<button type="button" class="btn btn-primary">Button with a lot of content inside</button>
<button type="button" class="btn btn-primary">Button below the first one</button>
</div>
</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 have the following ion-view :
<ion-view view-title="Success" ng-controller="successController" class="success-view">
<ion-content>
<div class="row row-center">
<div class="col">
<h1>Success!</h1>
<h3>Your login credentials will be SMSed to you shortly</h3>
<button class="button button-block button-positive" ui-sref="login">
Okay
</button>
</div>
</div>
</ion-content>
</ion-view>
I'm trying to vertically align that col in there in the screen. Now I understand that the only way this is going to work is if my row takes up 100% of the height. Yet if I go ahead and add style="height: 100%;" to my row it doesn't work, the row's height still wraps to it's contents. Even if I add !important it still doesn't span the full height of the screen... Any ideas?
Seems like Ionic framework adds a dynamic class scroll wrapping the row. Add a height: 100% to the parent scroll as well.
.row, .scroll {
height: 100%;
}
Output:
Ionic Demo
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>
Essentially, what I have in mind is a bunch of div elements, and I want to alternate colours. I could do this using IDs, but I want to use classes to minimize the amount of extra (and potentially spaghetti) code needed.
<div id="divs">
<div class="bla">
</div>
<hr/>
<div class="bla">
</div>
</div>
I've already tried nth-child, but it didn't work.
Edit: And I want to keep the hr.
You need to remove the <hr> element, see this fiddle
HTML
<div id="divs">
<div class="bla">bla</div>
<div class="bla">bla</div>
</div>
CSS
div.bla:nth-child(even) {
background-color: #CCC;
}
div.bla:nth-child(odd) {
background-color: #FFF;
}