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>
Related
Hello I am looking for a CSS only solution for animations pause on hover halfway until hovered off. I have one example working but it is on page load.
<h2>I want to pause this one on hover mid-way</h2>
<button type="button" class="psuedo-animation btn-primary">Pause on Hover
</button>
<h2>Example 2 - This is everything I want EXCEPT animation loads on page load though</h2>
<button type="button" class="psuedo-animation-2 btn-primary">Paused on Hover
</button>
https://codepen.io/fawn-marie/pen/NWYBjEo
I would like to have the button positioned on the right. With the code the button is no longer in the fieldset "callout"
< button type="button" class="success button">Save</ button>
< button type="button" class="success button float-right">Save</ button>
You need the class clearfix on a wrapper around the button or on its current parent element.
See https://foundation.zurb.com/sites/docs/float-classes.html
You can see the difference at https://codepen.io/DanielRuf/pen/QzmgJR
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;
}
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.
I am trying to take the Bootstrap justified grouped buttons style and create divs that will appear like grouped buttons will be just result in non-link divs. I am using it as a "steps" representation, so button one would be highlighted with text symbolizing that we're on step 1, or button two would highlight when you're on step 2. Please see my attached image here for an example.
The buttons I screenshotted work wonderfully as stage indicators, but I don't want users to be confused and think they should be linking to something. I've tried replacing the button input with spans as follows:
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<span class="btn btn-default">Q&A</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-info">Proposal Submissions</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Best & Final Offers</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Final Selection</span>
</div>
</div>
I don't know if this is even the way I should be going about this, or if there's a standard way to do this with divs. I also tried using divs with the btn classes instead of buttons or spans, same result, it still becomes a link. I am happy to keep using the button classes so long as I can remove the link effect when a cursor is hovered over it.
Thanks for your help.
I would suggest you to see if bootstrap has a component like breadcrumb, because that makes more sense for your use case. But if you want to hack something quickly, you can override btn classes. You could give the parent a class like c-steps and then override the styles for the btn groups:
html
<div class="btn-group btn-group-justified c-steps" role="group">...
css
.c-steps .btn-group,
.c-steps .btn.btn {
text-decoration: none;
/* other override styles */
}