I'm trying to align a close icon for a BootstrapVue tab with Bootstrap 4.2 in the top right corner.
<b-tab v-for="order in tabs" :key="order.id">
<template slot="title">
<span class="float-left">{{ order.name }}</span>
<b-button type="button" class="close float-right" aria-label="Close" #click="closeTab(order.id)">
<span aria-hidden="true">×</span>
</b-button>
</template>
...content....
</b-tab>
However, not only does it not align right as expected, the tab appears cut off when focussed:
What I want is for that X to appear in the top right corner of the tab.
How do I do that and make the tab look normal when active?
If you are using BS4 then you can add this styling to make close button on top right
<button type="button" class="p-4 position-absolute top-0 right-0">
<span>×</span>
</button>
In this case css position property is your friend
template {
position: relative;
}
template button {
position: absolute;
right:0px;
}
Related
I want to create a nested menus. The top menu bar has 4 elements.
DevFestFL
Disney
Orlando
Maleficent
The first one doesn't have child menu and the rest of them have children. Now the issue is the first menu is not showing or its color is eaten by the background color. I think that I may need to change the code but not sure.
<mat-menu #childMenu="matMenu" [overlapTrigger]="false">
<span *ngFor="let child of items">
<!-- Handle branch node menu items -->
<span *ngIf="child.children && child.children.length > 0">
<button mat-menu-item color="primary" [matMenuTriggerFor]="menu.childMenu">
<mat-icon>{{child.iconName}}</mat-icon>
<span>{{child.label}}</span>
</button>
<app-menu-item #menu [items]="child.children"></app-menu-item>
</span>
<!-- Handle leaf node menu items -->
<span *ngIf="!child.children || child.children.length === 0">
<button mat-menu-item [routerLink]="child.route">
<mat-icon>{{child.iconName}}</mat-icon>
<span>{{child.label}}</span>
</button>
</span>
</span>
</mat-menu>
StackBlitz Demo
Add below style in app.component.scss, It will fix the issue.
.menu-bar .mat-button.mat-primary {
color: white;
}
Check the modified working code.
https://stackblitz.com/edit/dynamic-nested-topnav-menu-j4hu3k?file=app/app.component.scss
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 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.).