I have a situation where I have a dropdown (a) inside a dropdown (b) etc for a possible 5 levels.
Dropdown (a) is way to tall to fit into the screen, so I applied a overflow-y:scroll and a height of 450px which works well on the dropdown (a)
But when I open a sub or contained dropdown inside dropdown (a) and it is longer than 450px (which is the height of (a)) it does not show the entire dropdown (b).
I understand that this is how it probably should work, but I need a work around and I dont know enough of css to create this.
In the example bellow Admission in Dropdown (a)
and caller is dropdown (b) which you can see from my art work is dropping off the bottom of the bottom.
max-height
css property instead of height.
Related
I have a mat-dialog which contains a mat-stepper. Inside this stepper, I have a step which contains a form. In this form I have multiple elements (list, mat-card and table) which I want to always fill the height of the dialog. Basically, I want the height of the table and also the height of the list on the left side of the table to adjust to the dialog height. The mat-card, which is shown when selecting an item in the list, should always be at the bottom left of the dialog and the list above it should either show all elements (if possible) or display a scroll bar if there is not enough space left to show all elements. The table should also either show all elements if there is enough space or display a scroll bar if there isn't enough space. I do not want any of the elements in this dialog to cause an overflow which would require me to scroll in the actual dialog.
A colleague attempted to solve this by using max-height: calc(90vh - <x>px) before but this really does not work very well at all. How can I do this properly?
Here is a stackblitz which shows the problem:
Stackblitz
Hopefully, my question is clear. If not, please let me know and I will try my best to explain it in more detail.
Your problem is quite simple, the content of the dialog does not fit the height of your dialog.
Every child of the dialog mat-dialog-content, mat-stepper etc, should be maximizing their height (either with height:100% or flex:1 in a flex container).
Here is a quick example of this.
I got an issue position a div element within a page. My problem is that I have a navigation bar with a hierarchical 3-level menu. When I open some of the 3rd level menus the element containing the items goes below the page height. I'd like to keep this element in the page area, maybe moving the top position, so the user can keep use it without scrolling (that is also problematic).
You could see an example here: http://www.frankydev.com/mitoweb/
Many thanks.
I see it even happens on large screens.
Limit the height of the 3rd menu div with max-height, say 300px and then add overflow-y:scroll;. This will add an up-down scroll bar to the 3rd menu element and it looks relatively nice.
Or change all your font size and spacing to allow more room.
I have some dropdown menus that are display:none and only show upon click (using jquery). However, there are divs that have been placed in positions that lie "underneath" the dropdown menu. They have to be underneath considering the dropdown must go overtop everything when it it shows up. However, is there anything I can do to "click through" these dropdown divs?
I know that there is "pointer-events:none" But this would seem to disable all clicking on the dropdown menu, which I cannot have.
I've seen 100s of websites with dropdown menus that cover entire sections of their website. However, when not in use, these menus don't block divs that are positioned "underneath" so what's the solution here?
Is it something I need to fix with the positioning of my dropdown menus?
Any and all help is appreciated. It took me forever to even discover the problem. I was so stumped as to why my divs weren't clickable! Then I did "clear:both" and it moved down and finally realized the hidden divs were in the way.
It seems like you're using opacity: 0 on these dropdown divs, which keeps them in place, and block the mouse events from firing on the elements underneath.
You should be hiding them differently, with either of the following:
Use visibility: hidden or display: none (if you want to also hide it from screen readers)
Absolutely position them off the visible viewport, by using a huge negative offset (e.g. -999em).
This will ascertain that they're still readable by screen readers.
Alternatively, you can toggle pointer-events:none together with its visibility, but old IE does not support pointer-events.
I searched the web but couldn't find a good answer for HTML/CSS designs:
I have a menubar docked to the right of my screen
The menu bar contains select elements (comboboxes) with a fixed width
Sometimes the content of those comboxes is too big to fit that fixed width
Here the current behavior I'm noticing:
in normal position, the choice is simply clipped and that's fine by me
in dropdown position, the dropdown 'box' isn't clipped but is aligned to the left side of the combobox; as a consequence it goes beyond the right side of the screen and part of it is simply unreadable
What I would like to do is force the dropdown box to align with the right of its parent combobox.
Any way to do that in CSS - or even JS I guess but not the preferred solution...?
you'll be out of luck here with pure css.
you could look for a javascript combobox though and style that with css.
Currently I am working on a maintenance of website and I'm stuck with an problem, the problem is like that: I have to redesign the menu bar of the website. Previously in the menu bar there are 6 menus but now there are only 5 menus in it. I have to delete one menu item from the bar. I simply deleted that row from the list items of the menu bars. In the previous designed they used the display property of css to create the blocks but after deleting the one menu the space for one menu item is left, while i like to increse the width of the menu bar.
Without seeing the code, it is hard to say.
However, in your stylesheet you can adjust the width for the list items as such
.menu li{width:35px;}
To figure out how much to adjust, take the width of the last element and divide by 5 (the number of the remaining list elements).
So, if your width was 50px, add 10px to the element style so that each of the remaining elements covers the width of your previous list-item.
Maybe a brute way to this but it actually works great:
Use table instead of list. I use this with some padding offset because spaces between cells are linear based on cell content size and padding gives you constant minimal space between menu elements.
Another way is to use block elements and CSS display:table and table-cell but remember IE7 does not know these ones.
Benefits: no Javascript
If the menu item <li> has a fixed width, then the total width of the menu divided by 5 gives the width of the each menu item. check in the css for the tag "li" or the class specified for li. then change the width of that to the new width