I am facing difficulty changing the color of antd Modal buttons
That is the cancel button and ok Button. Can any one tell me how can I do that
<Modal
visible={this.state.visible}
title="Title"
closable={false}
footer={null}>
<div>
Test For No two buttons on the footer.
And No One in header.
</div>
<div>
<Button style={{background:'#000000'}} type="ghost" onClick={this.handleClick}>Login</Button>
</div>
</Modal>
Related
I don't understand why unselectable button here is not selectable or clickable when the parent is translateed.
https://play.tailwindcss.com/PmttQCLwcj
in Firefox, the button is clickable (although, the text not selectable).
in Chrome, it is only clickable at the very edge of the button (carefully hover your mouse to the left of the button).
Remove the translate class, and all behaves as expected - the text is selectable and the button is clickable.
<!-- main -->
<div class="absolute inset-0 overflow-y-clip bg-red-200">
<!-- nav -->
<div class="bg-blue-200 w-64 p-3 absolute inset-0 overflow-y-clip translate-x-5 ">
<div class="overflow-y-auto">Lots of content that can overflow in the y-axis</div>
<!-- toggle -->
<div class="bg-green-200 absolute inset-0 left-[100%] ">unselectable <button>button</button></div>
</div>
</div>
I expect to be able to select the text and click the button with the mouse, because I can see it, but I cannot. The button is visible, and can receive the focus by tabbing, and it can be clicked with the keyboard.
Hope it's work !!!
you need to change position of div element, please check below link
https://play.tailwindcss.com/HDOPwIy1fe
Is there any way to hide the disabled year on MUI datepicker? Now I can only hide the button inside MUI div because there is no way to determine between divs.
<div class="PrivatePickersYear-root PrivatePickersYear-modeMobile css-k9reix">
<button type="button" tabindex="-1" class="PrivatePickersYear-yearButton css-m1gykc">2017</button>
</div>
I am attempting to set a Heroicon icon on top of an button background image in Vue 3 and TailwindCSS. I created a circular button component containing a button with a background image and a slot for Heroicon icons:
<!--ButtonComponent-->
<div>
<button type="button" class="relative rounded-full">
<img :src="https://image.shutterstock.com/image-illustration/abstract-vector-blue-color-geometric-260nw-167535434.jpg">
<slot class="absolute"></slot>
</button>
</div>
I then imported that button component into another component, then wrapped that button around an imported Heroicon icon:
<!--ParentComponent-->
<div>
<ButtonComponent>
<VideoCameraIcon />
</ButtonComponent>
</div>
import { VideoCameraIcon } from '#heroicons/vue/outline'
My goal is to configure the slot handling the Heroicon icon to sit on top of the button background image. To handle this, I added a TailwindCSS relative property to the button, and an absolute property to the slot. However, this still doesn't work. How can I go about enabling the slot element to sit on top of image (in order to display the Heroicon icon on the image)?
slot tag doesn't take class attribute in consideration, you should use the :slotted pseudo-class inside a scoped style:
<div>
<ButtonComponent>
<VideoCameraIcon class="btn-icon" />
</ButtonComponent>
</div>
<script >
import { VideoCameraIcon } from '#heroicons/vue/outline'
....
</script>
<style scoped>
:slotted(.btn-icon) {
#apply absolute
}
</style>
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>
How to disable overlay for materiul-ui buttons RaisedButton.
I have a modal window and when I open it - buttons are still shown.
What property should I add to my buttons to disable overlay?
Please who works with material-ui, help.
Screen is bellow
I tried to use z-index for button's container but did not help
I added z-index and position to button, now it is ok.
<div className={styles.watch__button}>
<RaisedButton
onClick={buttonRole}
backgroundColor={timerButtonColor}
style={{zIndex: 0, position: 'relative'}}>
<div className={styles.watch__button__text}>{buttonName}</div>
</RaisedButton>
</div>
<div className={styles.watch__button}>
<RaisedButton
onClick={this.handleShowCalendar}
backgroundColor={genButtonColor}
style={{zIndex: 0, position: 'relative'}}>
<div className={styles.watch__button__text}>Generate</div>
</RaisedButton>
</div>
<Modal
isOpen={showCalendar} >
<button onClick={this.handleShowCalendar}>close</button>
<h1>Modal Content</h1>
</Modal >
Maybe somebody know how to make it with class, because it works only with style