I am using mat drawer sidenav and content.
In the sidenav i have a button. the button should be above the sidenav and the content and between them.
I am not able to present the button above the two and it gets overwritten by them.Stackblitz
i do prefer not to change the css of the material warpper elements and focus on the button itself if it's possible.
position: fixed
to the button, solved the issue.
Related
I add a vuetify drawer to my application, and set the position to fixed and temporary.
When the drawer is open (and I have overlay), when I try to scroll the drawer stay in position - good. but the problem is the event pass to the page, and the page is do scroll.
How can I fix that?
My code on codesandbox.
open the link
click on toggle and the drawer is open.
try to scroll (with the mouse)
if you do, it's bad.
Your problem is that you give the wrapper div height:3000px.
you have to set it to height:100vh - in this case it will take the maximum height of your screen (like 100% of it)
I am using materialize-css library in angular. Along with the materialize-css I am using materialize-stepper library that is based on the materialize-css.
MaterializeCSS uses .waves-effect CSS class to provide ripple effect on buttons, a tag and on all other clickables.
materialize-stepper also uses the .waves-effect. When I click on the node with .waves-effect class it appends a div having the ripple effect. Problem is on the next click it adds one new div with ripple effect. So it makes the clickable button or node with dark background (step 2) as this does not remove existing div.
what could be the possible issue?
I'm using Minton Template (http://coderthemes.com/minton_2.1/blue_hori/index.html)
As you can see from the image above, the top of datepicker being blocked by the fixed header menu. It seems the datepicker not automatically being placed at the bottom of the input field.
This is the JS code that I used.
jQuery('#date-range').datepicker({
toggleActive: true
});
This happen on smaller screen. Bigger screen display correctly with the datepicker placed at the bottom of the input field as image below.
I dont want the menu blocks the datepicker. Please help.
check the z-index of datepicker. the z-index in the css should be greater for the datepicker class than for the menubar.
check this link for more information about z-index
I'm using Primefaces 5.3, and AdminLTE 2 as a template for my website (Which based on bootsrap).
The problem is when I open a dialog box, this dialog gets hidden by the top navbar, and this topbar doesn't get disabled I can still click on its links.
[![enter image description here][2]][2]
As you can see in that picture a portion of the dialog box is hidden by the top nav bar.
How can I solve this problem ?
Without a sample code to work and check your issue. Here is a probable solution that i can suggest to you. Check the z-index of the navbar and the dialog. Try setting z-index for both where the dialog box z-index value is greater than the navbar.
Hi I am using bootstrap drop down button but it's height is smaller than button
I don't wont to use since I'm Using already.
thanks in advance
Because you provide only image, so i can only provide bootstrap document
http://getbootstrap.com/components/#btn-groups
Please be sure you add class btn-group on wrapper div of dropdown button.
Try this: http://www.bootply.com/MincjjEhJw