I am using mat-menu from Material-UI to have a menu. I want the menu to take all the width of the button which make it appear.
When I don't custom the width I got this:
However, when I modify in the inspector to add the propriety width: 100% to the class cdk-overlay-pane. I got this :
But when I click elsewhere in the page and click again in the mat-menu. It shows the mat-menu at top left corner of the page.
Also, when I modify the class cdk-overlay-pane directly in the code. The menu is showing directly at top left corner of the page.
My question is: How to modify the mat-menu width to show with the result of the second picture and have a persistent result knowing that the structure is like that when we add a mat-menu in the HTML
Related
I am using this example and copied the same exact code but for some reason my page has a gap between the top of the page and the sidebar as shown in the picture.
I tied absolute and fixed positioning. The height in css is already set to 100%.
What do I need to do to close that gap ?
Without looking at the actual html/css it's hard to guess what the problem is, however from the small strip of bookmarks in your screenshot it looks like you are using Chrome browser which will allow you to "Right Click -> Inspect Element" on the sidebar.
This will let you adjust the css properties live in the browser, from here if you click on the "Computed" tab you will be able to see all the CSS properties that are affecting the div.
I would recommend looking at the margin, padding and top property of the div.
I am working to convert a site to a completely new theme in Wordpress. The original site is here:
Original
The new dev site is here:
Dev site
What I am trying to do is make the menu match as closely as possible to the original site. I am fairly intermediate on CSS so I have the following questions:
How can I make the sub-menu text left align with the parent menu text?
How can I get that pointer to point at the parent menu?
Please note that I am using a plugin called Max Mega Menu for the dev site.
Max Mega Menu includes a location to add custom styling. There is an example at their site:
Max Mega Menu Styling Example
You need two things to achieve sub-menu like in selier.com.
First, you create an empty div which will appear on parent menu hover, and which will have width of 100%. This div will be your semi-transparent background.
Then, for each sub-menu you create, set its background to none, limit its width to some value, and set its position property to absolute.
Also, make sure that the sub-menu shows on top of the background div.
This should do it.
It will be better not to use any plugin and used the custom html menu to get the exact menu like in the demo.
I have a navbar with a user dropdown menu aligned right. When the user has a picture added, I would like to show a small thumbnail next to the users name. This is already done, however I think it is implemented in a flawed way.
When the viewport size shrinks, the image (as it is now) is put on the collapsed list of menu items at the bottom - which shouldn't happen. It should either disappear or stay with the users name.
Also I would like to have the picture clickable and 'grouped' with the user name.
I have made a test navbar of my code here:
https://nkhs.dk/navbar/navbar.html
Can you suggest a change to make this happen?
Regards, Niels.
It should either disappear or stay with the users name.
To disappear it use the .hidden-* class.
e.g if you want to disappear this image on widths <768px, you would use class .hidden-xs.
For more: http://getbootstrap.com/css/#responsive-utilities-classes
I have a list of links to the left and a fixed div with hidden overflow to the right of a web page. The fixed div is wrapped around 3 additional divs with the same height as the fixed div. Each div nested within the fixed div is linked to one of the links in the list to the left of the fixed div.
This works fine, it essentially simulates a hide/show effect with pure html/css. Now what I have been trying to do is highlight the current link selected in the list of links like you would with a menu item in a navigation bar. I did a similar example in jsfiddle.
I can't seem to be able to highlight the current link with pure html/css so I've been attempting to do it with PHP with no success.
Is there a way to do this without Javascript?
a:focus{
border:solid 1px red;
}
will work partially, but only until focus is moved elsewhere.
If the page is reloaded with each click, then you could use PHP to read the #anchor from the URL and add a class to the appropriate link element.
Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}