I am using this code to make toolbar responsive
<md-toolbar>
<div fxLayout fxShow="false" fxShow.gt-xs>
<button md-raised-button><md-icon>add</md-icon>New Role</button>
<span style=" flex-grow: 0.1"></span>
<button md-raised-button><md-icon>mode_edit</md-icon></button>
<button md-raised-button><md-icon>delete</md-icon></button>
<span style=" flex-grow: 2"></span>
<button md-raised-button><md-icon>perm_identity</md-icon>Add User</button>
<span style=" flex-grow: 0.1"></span>
<button md-raised-button><md-icon>delete</md-icon></button>
</div>
<!--button that will be visible when screen is small-->
<span style="flex: 1 1 auto;"></span>
<button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-xs>
<md-icon>menu</md-icon>
</button>
</md-toolbar>
Now when the screen size is extra small all other button gets hidden and a menu button is shown. The problem I am facing is that when the screen is of full size the flex-grow properties are not working in the toolbar. I have given the flex-grow to 0.1,2 in span element, but on UI there is no gap between button.
What could be the possible issue?
And is there any other better way to make toolbar responsive?
Updated
I have tried fxFlex directive still no effect.
As all the buttons are under div, now if I remove that div container, it works. But as I have to hide all the buttons based on screen size so div is necessary to contain all the buttons.
Related
I have the following part of the form:
<div class="d-grid mb-3">
<button class="btn btn-primary mb-3" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
Button rstpss is conditional and appears only in case user has entered wrong login or wrong password at the same time.
Both buttons currently use 100% of div's width and placed strictly one below another.
But I want the rstpss button to be placed below the userlogin one only in case there is no available predefined div's width to place them one next to another keeping in mind they both will take all available div's width, be the same width and contain the same space between them as their bottom margins (the same margin is used with the input above the buttons).
When only userlogin button is shown it must take 100% div's width.
I suppose it shouldn't be very difficult and must be clearly described at the Bootstripe's documentation, but I've started using Bootstrap just yesterday and just don't know what to look for. Any example I have found doesn't answer my question.
A clear example will help me greatly to understand how to deal with such cases in the future. And what to search at the Bootstrap's documentation, too.
Here is an example of what I am trying to achieve:
Try this:
<div class="d-flex mb-3">
<button class="btn btn-primary mb-3 flex-fill" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3 flex-fill" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
This should expand the first button to a 100% if the second one doesn't exist, and keep both buttons on same line with equal width if both exist.
I have made the following pile of tags. It does the job while it seems to be not the most elegant one.
<div class="row" style="--bs-gutter-x: 1rem">
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" type="submit" name="userlogin">Click or tap here to login</button>
</div>
</div>
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" formaction="/reset.php" name="rstpss">Click or tap here to recover your password</button>
</div>
</div>
</div>
The default value of the row class is 1.5rem. I have not found how to set the row class' size through predefined classes so I've made it 1rem with inline style to make the horizontal space between two buttons equal to vertical space between the form's elements with mb-3 class applied.
There is also inline style white-space: nowrap for the button tag to prevent its height growing instead of putting the long texted button to the next line.
I've used the first example from the Bootstrap's Grid system except the outer div with the container class as it prevents achieving my goal.
My code still appear to me as an overproduced and incorrect one so I can't accept this answer as the answer.
The correct solution is still highly appreciated.
Currently I'm struggling with flexbox column. Checked so many websites, but still no solutions to be found on the internet for this problem.
The case:
On the right side of my viewport I've got a full-height flex-column, containing 2 elements (see headset icon and hangup button). I used flex-column to vertically align my elements.
The first element should be on the top right corner, the second element should be at the center right.
Since it's a flex-column I can't use align-self-center on the second element, because it will be centering on the x-axis instead of the y-axis.
I was wondering if this is even solvable with just flexbox or if I need to position this centered element a different way?
I'm using the bootstrap 4 flex classes to apply flexbox.
Code example: https://jsfiddle.net/mv1e7py0/18/
<div class="flex-container flex-column main-containere video-container">
<div class="communication-controls d-flex justify-content-between">
<div class="left-controls d-flex flex-column justify-content-between">
<button class="chat-toggle">
Chat
<div class="indicator bg-red"></div>
</button>
<button class="mic-toggle">
Mic
</button>
</div>
<div class="right-controls d-flex flex-column justify-content-between">
<button class="speaker-toggle">
Headset
</button>
<button class="dismiss-call red align-self-center">
<span>Hang up</span>
</button>
</div>
</div>
</div>
What I want it to look like:
#miranda-breekweg here are 2 quick solutions that I hope you'll find helpful:
In both cases we'll keep justify-content set to space-between.
the first thing that comes to mind is to simply set the height of the right column to 50% (+ half the height of that button you want to center)
.right-controls {
height: calc(50% + /half the height of your button/);
}
the second and probably the easiest solution is to simply add auto margins (top and bottom) to the targeted button. This way, you don't have to worry about calculations:
.dismiss-call {
margin: auto 0;
}
Fiddle:
https://jsfiddle.net/mv1e7py0/39/
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>
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 twitter bootstrap to create a button group.
When I changed font size of smaller class to 12px (14px by default), the height of the left button grows 1px. How can I avoid it? Checked by Chrome 26, Firefox 20.
<div class="btn-group">
<button class="btn">
Foo
<div class="smaller" style="font-size: 12px;">
Smaller
</div>
</button>
<button class="btn">
Bar
</button>
</div>
Example is available at http://jsfiddle.net/kawachi/xkP9j/
set the line-height also
http://jsfiddle.net/xkP9j/5/
<div class="smaller" style="font-size: 12px;line-height: 12px;">
Smaller
</div>
The problem is the line height. You need to either remove the line-height attribute from .btn or you need to add it to div.smaller to match the font-size