So this kind of question has been asked many times, I know, but for some reason nothing seems to work for me.
This is a simplified version of what I have (with the last solution I tried):
<ul class="pagination pull-right" style="display: table-cell; vertical-align: middle; text-align: center; background: red;">
<span class="pagination-info pull-left" style="background: blue">Filas por página: </span>
<span style="display: inline-block;">
<span class="btn-group dropup pull-left" style="position: relative; display: inline-block; vertical-align: middle;">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
5 <span class="caret"></span>
</button>
</span>
 || Mostrando 1 - 5 de 8 filas en total
</span>
</ul>
And this is what it looks like (colored in blue and red for descriptive purposes):
original layout
JSFiddle: https://jsfiddle.net/oxaa30ug/ (not exactly as the picture but still shows my problem)
What I'm trying to accomplish is to get the blue span as well as the text at the right centered vertically, and not at the top as they currently are. Any help is very appreciated.
You can use a custom class when needed.
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
vertical-align with Bootstrap 3
In bootstrap 4, they have provided a dedicated class align-content-center (using flexboxes)
Related
How can I avoid that the icon jumps to the next line?
In desktop the icons are in-line but in mobile I can't make the icons fit horizontally the screen.
This is the code of the navbar:
<nav class="navbar fixed-bottom navbar-light bg-company-dark nav2" style="margin-top: 5px;">
<div class="d-flex container justify-content-end">
<button class="iconButton" onclick="window.location.href='/';"><i class="fas fa-chevron-left"></i></button>
<button id="translateFromApps" class="iconButton">
<i class="fas fa-language"></i>
</button>
<button id="deleteApp" class="iconButton"><i class="fas fa-trash"></i></button>
<button id="toggleApp" class="iconButton"><i class="fas fa-minus"></i></button>
<a class="iconButton" href="apps/createApp"><i class="fas fa-plus"></i></a>
<button id="editApp" class="iconButton"><i class="far fa-edit"></i></button>
</div>
</nav>
Thanks for any help
the flex-warp:wrap in the class .navbar>.container, .navbar>.container-fluid{} makes the button jump into the next line ...you can either remove it or reduce the padding to fit the buttons in the container
The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.
Add the following css and you're done...
.navbar>.container>* {
display: flex;
flex-direction: column;
flex-grow: 1;
text-align: center;
align-items: center;
height: 35px;
}
.d-flex.container.justify-content-end>*>* {
flex-grow: 1;
display: flex;
align-items: center;
}
I am trying to center the button below - I have tried from other examples altering CSS code or using text-align: center but neither options have worked. I know the code itself can be fixed but I am quite a newbie so any tips would help.
Thanks
<a class="btn-group"
style="color: #ffffff;"
href="http://requestgoods.com/item-request/">Request Goods Now</a></button>
Try This:
div {
text-align: center;
}
<div>
<button><a class="btn-group" style="color: #000" href="http://requestgoods.com/item-request/">Request Goods Now</a></button>
</div>
Take one outer div and set text-align : center to this div.
use this Code :
<div style = "text-align: center;">
<button>
<a class="btn-group" href="http://requestgoods.com/item-request/">Request Goods Now</a>
</button>
</div>
The simplest solution is:
HTML
<div>
<button>
<a class="btn-group"
style="color: #ffffff;"
href="http://requestgoods.com/item-request/">Request Goods Now</a>
</button>
</div>
CSS
div {
text-align:center;
}
Maybe it's a bug, I'm not sure, but when using the mobile collapse menu, the icons and the text are not aligned (see images).
The reason is because of these CSS properties:
HTML:
.side-nav a {
color: #444;
display: block;
font-size: 1rem;
height: 64px;
line-height: 64px;
padding: 0 30px;
}
nav i.material-icons {
display: block;
font-size: 2rem;
height: 56px;
line-height: 56px;
}
<ul style="transform: translateX(0px);" class="side-nav" id="mobile-menu">
<img src="images/costum_logos/logo3.png" class="custom-logo">
<div class="divider"></div>
<a href="index.php" class="waves-effect waves-light">Albums
<i class="material-icons left notranslate">collections</i>
</a>
<a href="?page=settings" class="waves-effect waves-light">Settings
<i class="material-icons left notranslate">settings</i></a>
<a class="waves-effect waves-light red-text text-lighten-1" href="index.php?logout">Logout
<i class="material-icons left notranslate">power_settings_new</i>
</a>
</ul>
Of course, the interesting bits are the line-height and height properties on both the anchor tag, and the icon tag. They are not equal. If I override either one of them, to be exactly like the other - they are perfectly aligned.
My question is: Am I doing something wrong? I can easily get around it, but I want to have a good practice with materialize CSS. Don't wanna hack around and break their conventions.
Thanks in advance!
I'd like to show a <h4> in line with a <button>:
<h4 style="display:inline-block;">headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
https://jsfiddle.net/punwaew1/1/
Result: the two elements are shown below each other. Why?
Because h4 and .dropdown are on the same level. Set display: inline-block for the elements on the same level to make them align.
h4,
.dropdown {
display: inline-block;
vertical-align: top;
margin: 0;
}
<h4>headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
The default value of display on a <div> element is display:block;. You have to set the display:inline-block; to the <div> too!
Simply add the following rule (https://jsfiddle.net/punwaew1/5/):
div.dropdown {
display:inline-block;
}
Add line style to <div class="dropdown" **style="display:inline-block;"**>
DEMO 1
OR use proper rows and column of bootstrap to get best results and consitency.
Here is your fiddle Just give display: inline-block to dropdown div
https://jsfiddle.net/sesn/punwaew1/4/
This can be done without any extra css. So in-order to make your button inline with your headline, place the button between the <h2></h2> heading tag.
Structure:
<h1>Headline
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
Button
</button>
</h1>
Have a look at your updated fiddle here
I have a place on my site which is using a bunch of button elements styled with btn-block (example from the Twitter Bootstrap Docs). I now want to switch some of them to split buttons (example), but I can't seem to get the split buttons and the normal buttons to be the same length.
I have experimented with all kinds of things, but I can't seem to find a way to do this. Has anyone ever managed to do it? Keep in mind that I do not want to hard-code the width of any elements if I don't have to. (Note that this includes not using hard-coded percentages either.) If it is absolutely necessary, I am OK with defining a width for the toggle part of the button (because I know there will only be a single arrow character in there) but want to specify as few "magic numbers" as possible in order to keep the code maintainable in the future.
Wrap the dropdown-lead in a container:
(Note: This example is for Bootstrap 2.x)
.dropdown-lead {
width: 100%;
}
.leadcontainer {
left: 0;
position: absolute;
right: 30px;
}
.dropdown-toggle {
width: 30px;
float: right;
box-sizing: border-box;
}
.fillsplit {
position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<button class="btn btn-block btn-primary" type="button">Block level button</button>
<div class="btn-group btn-block fillsplit">
<div class="leadcontainer">
<a class="btn btn-primary dropdown-lead" href="#"><i class="icon-user icon-white"></i> User</a>
</div>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Edit
</li>
<li><i class="icon-trash"></i> Delete
</li>
<li><i class="icon-ban-circle"></i> Ban
</li>
<li class="divider"></li>
<li><i class="i"></i> Make admin
</li>
</ul>
<div>
</div>
I was looking for the same kind of behavior and found this flexbox solution: http://codepen.io/ibanez182/pen/MwZwJp
It's an elegant implementation which makes use of the flex-grow property.
Just add the .btn-flex class to the .btn-group in your HTML. This is all the CSS you need:
.btn-flex {
display: flex;
align-items: stretch;
align-content: stretch;
}
.btn-flex .btn:first-child {
flex-grow: 1;
}
Credit goes to the author of the pen: Nicola Pressi
If you add the class btn-block to the .btn-group element and give the dropdownbutton elements % widths, that'd do the trick.
.dropdown-lead{
width: 96%;
box-sizing: border-box;
}
.dropdown-toggle{
width: 4%;
box-sizing: border-box;
}
Here's an example: http://jsfiddle.net/eBJGW/5/