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
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
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>
I have a main component:
<md-sidenav-layout fullscreen>
<md-sidenav #sidenav>
<md-nav-list>
<a md-list-item *ngFor="let view of views">
<md-icon md-list-icon>{{view.icon}}</md-icon>
<div style="clear:right"></div>
<div class="description-wrapper">
<span md-line>{{view.name}}</span>
<span md-line class="secondary">{{view.description}}</span>
</div>
</a>
</md-nav-list>
</md-sidenav>
<md-toolbar *ngIf="!menuToolbarConfig.IsLoginView">
<div (click)="menuToolbarConfig.goToApprovals()" class="goBack" *ngIf="menuToolbarConfig.IsDetailView">
<md-icon>navigate_before</md-icon>
</div>
<button *ngIf="!menuToolbarConfig.IsDetailView" md-icon-button (click)="sidenav.open()">
<md-icon>menu</md-icon>
</button> {{menuToolbarConfig.ToolbarTitle}}
<!--<button md-fab>
<md-icon>add</md-icon>
</button>-->
</md-toolbar>
<router-outlet></router-outlet>
</md-sidenav-layout>
<div style="background-color: red; height: 30px; width: 100%; position: fixed; top: 0px"></div>
As you can see I am using the official Angular2 material-framework. On every page the toolbar and the sidenav should appear, so I put the <router-outlet> in the <md-sidenav-layout>. Everything is fine, but now I want to create a snackbar that appears out of the bottom of the screen and should be fixed to the bottom. Now I have the problem, when I place the snackbar in a inner-component, that replaces the <router-outlet>, and I want to set the snackbar 'position: fixed' the snackbar would be correctly shown in the bottom of the page, but if I scroll, than the snackbar dont stay at the bottom instead its hovering over the bottom. But when I place a test div (last line) outside the <md-sidenav-layout> it works fine. So the problem is, that the fixed snackbar/div is within the <md-sidenav-layout>. But I need to have the snackbar in my inner-component.
My question now: Is there any smart solution to fix this problem, without a big workaround?
Thank you in advance!
I'm using the Angular UI modal and would like to make it smaller. According to Bootstrap's website, to make the modal smaller I should use the modal-sm modifier class:
<div class="modal-dialog modal-sm">
I'm having trouble incorporating this div into my Angular modal template. Every Angular UI modal example I have found includes only the modal-header, modal-body, and modal-footer divs in the template. Are the outer modal, modal-dialog, and modal-content divs already provided by Angular? If so, is there any way to overwrite them so that I can apply "modal-sm" to the modal-dialog div? I tried adding the full modal div structure to the template and it caused problems with my modal. I also tried setting windowClass = "modal-dialog modal-sm" in my controller but that didn't work either. Any ideas? Thanks.
Update: here is the content of my modal template after I tried to include the outer Bootstrap div's. It is a very simple modal to confirm the user wants to delete an item.
<div class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4>Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="confirm()">Confirm</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
The result is it doesn't show my modal correctly. I can see the backdrop and a very tiny sliver of what I assume to be my modal.
Update: Using #lmyers's solution worked for me, but instead of specifying the width as 60% I did the following to make use of the #modal-sm Less variable.
.confirm-modal .modal-dialog {
width: #modal-sm;
}
OK, I understand now. Here's what we did in the .css:
.appcustom-modal-med > .modal-dialog {
width: 60%;
}
then in the controller:
windowClass: 'appcustom-modal-med'
I never had an experience with Bootstrap modal popup before. But in a recent theme purchase that was fully bootstrap based they demoed modal popups too which was perfectly working on their HTML page. But when I integrate in my master page, everything working fine. But the modal popup alone shows as double as you can see in the image below
I didnt get any idea why it behaves likes this when everything in the HTML page and ASPX page are alike. Also when the modal popup shows, there is a shifting like thing goingon on the page or a kinda small jumping towards the right when the modal popup comes.
Here is my modal popup code
<div class="modal fade bs-example-modal-sm" id="mytestmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
And here is the button code
<button class="btn btn-info btn-block" data-toggle="modal" data-target="#mytestmodal">
<i class="fa fa-copy"></i>| Clone Data
</button>
For that jumping, edit it's CSS
body.modal-open{
overflow: visible !important;
}
The lateral shifting is a known open bug in Bootstrap.
Assuming your modal isn't long enough to need to be scrolled, you could try this supposed workaround:
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}