I use the ionic framework and I'm trying to create a tab with 3 full width buttons that will cover the whole screen.I used the button-full option about width but how can i change the height?
html
<ion-view view-title="Rating">
<ion-content>
<button class="button button-full button-balanced">
What's good
</button>
<button class="button button-full button-assertive">
What's bad
</button>
<button class="button button-full button-positive">
Help us improve
</button>
</ion-content>
</ion-view>
.button.customBtn{
width:150px;
}
<button class="button button-dark customBtn">
text </button>
This code worked for me when trying to set a fixed width to a button on an Ionic app.
custom size may not be responsible if its is mandatory lets set style in that tag with height and width or create a css that will be more comfortable to use in all button with same format.
Related
In my code, adding m-0 to a button's classes does not work to reduce the margin around the button to 0. But when I add .close {margin:0;} into my SCSS file, it works in reducing the margin to 0. I was told not to do this and to use shortened bootstrap classes like m-0 and p-0. So why is adding them to a button not working and how can I make it work in as little code as possible?
<h2 class="modal-title mx-auto mt-0">My text <br> Hi there </h2> <button type="button" class="close position-absolute m-0" data-dismiss="modal" aria-label="Close"> <i class="fas fa-times" style = "color: #2C757E;"></i> </button>
The margin works fine (Inspect the code and check).
You get space because of the space (Press spacebar) in your HTML.
Related: https://www.wikihow.com/Insert-Spaces-in-HTML
I have made a page with a button in a button like the following :
<button mat-button class="library-tile-button">
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="..."/>
</button>
<img class="library-picture" src="..."></img>
</button>
The buttons use angular material design.
When I click on the parent button I want to navigate to a certain page and when I click on the child button I want to display some additional content. This is working.
When I click on the parent button the default angular material animation for button is triggered. That's fine with me. My problem is that when I click on the child button this is as if the parent button has also been clicked and so the default angular material animation is triggered for both button. I would like to prevent that. What I want is for the animation to be trigerred only for the child button when I click on it.
Any lead how I can acheive that ? Thanks in advance.
As WorksLikeACharm posted, do not nest the buttons. If your problem is just positioning, wrap them into a div and use absolute position on one of them.
Like this:
div {position:relative;}
button {background-color:transparent; border:0;}
.edit-library-button {
position:absolute;
top:40px;
left:40px;
}
.edit-library-button img {width:30px;}
<div>
<button mat-button class="library-tile-button">
<img class="library-picture" src="https://lh3.googleusercontent.com/proxy/7TiJY6Mswv0hNIXdXRS0fgT687TBQ2SaZFd7PNpO8qfknkj4oIjggatPNPhG_6h9DJedmAycJaWe3p2dVHbFhOgyA0P0JbNu_aS1Tynre891APND36cFHll9qyIQWZ2vEk9kmg" />
</button>
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="https://img.icons8.com/material/4ac144/256/facebook.png"/>
</button>
</div>
A possible solution would be to remove the nesting of your buttons, thus seperating the click-events.
<button mat-button class="library-tile-button">
<img class="library-picture" src="..."></img>
</button>
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="..."/>
</button>
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.
I’m using button element in a bootstrap template.
I was wondering if it is the normal behavior in bootstrap :
When there is not enough space to show all the buttons on one line, or when the window is resized, some buttons are shown on a 2nd line and it’s ok like that but there is no margin-bottom.
I can add it :
.btn {
margin-bottom: 5px;
}
But i find it strange that it is not handled by bootstrap.
Maybe i’m doing something wrong ?
SOURCE : http://jsfiddle.net/Vinyl/zx9oefya/
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
In Bootstrap's buttons.less and button-groups.less there's nothing about margin-top or margin-bottom. Having a margin by default would likely conflict when combining it with other elements (e.g. a form)
I think the best solution might be adding all buttons inside a btn-toolbar and to style that combination:
.btn-toolbar .btn {
margin-bottom: 5px;
}
Just add the spacing class. m for margin and p for padding.
<button class="btn btn-success mr-2" type="submit">Add</button>
<button class="btn btn-danger mr-2" type="button">Delete</button>
so, here mr is margin-right. similarly, you can add do for other cases.
mb-5 = margin bottom ..just add that :) sorted :)
I think that it's the normal behavior ( not 100% sure ) because it's "cleaner" to add margin ourselves when we want it that having to remove the default margin when we don't want it, from my opinion...
http://getbootstrap.com/components/#btn-groups
There's no margin on bootstrap's buttons examples, only on the parent div class btn-group but it's coming from a different stylesheet ( docs.min.css ). So I think it's that way for devs to add their own custom margins.
See here:
If I want to minimize icon size, how can I make icon small when using bootstrap?
This is demo http://jsfiddle.net/AqUBu/
I'd like to minimize the size of this human icon.
<span class='badge badge-success'><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i></span>
If you are using Bootstrap 3, you can use the <small> tag, like this: <small><span class="glyphicon glyphicon-send"></span></small>
It works perfectly with Bootstrap 3.
Glyphicons and other icons can be re-sized precisely with the CSS property font-size:
You know... being glyphs and all.
You can use class="btn btn-xs"
Reference: https://getbootstrap.com/components/
From http://getbootstrap.com/css/#small-text
Small text
For de-emphasizing inline or blocks of text, use the
<small> tag to set text at 85% the size of the parent. Heading
elements receive their own font-size for nested <small> elements.
You may alternatively use an inline element with .small in place of
any <small>.
Try:
<span class='badge badge-success small'>
<i class='icon-user icon-white'></i>
<i class='icon-user icon-white'></i>
<i class='icon-user icon-white'></i>
</span>
None of the above worked for me, I am using a combination of Bootstrap 4 and FontAwesome icons. I discovered Bootstrap 4 has it's own class to make smaller buttons:
<button class="btn btn-sm btn-secondary ">
<i class="fa fa-pencil"></i>
</button>
Bootstrap 4 button documentation (#Sizes)
If you want to make a button any smaller than this you will probably have to make some custom css, as simply changing the icon's size will no longer modify the size of the wrapping button.