Is there any way to position the opened dropdown menu? I mean as I click on the <select>, the options appear in the box which is located over the selected option. Is there any solution to move this options box down?
This is what happens:
What I want to happen:
Sample here : jsFiddle
<select>
<option>BMW</option>
<option>Mercedes</option>
<option>Ferrari</option>
<option>Audi</option>
<option>Fiat</option>
</select>
There's no way to position the option dropdown box from a select when using native controls, it's part of the built in control. You'd have to create custom select boxes to control the positioning of the dropdown.
Related
I can not for the live of me figure out why the below code has a black rectangle in it, as far as I can tell its something left behind by the hidden option, but I've got no idea how to hide it or change its color.
What is this and how do we manipulate it?
<div>
<select>
<option hidden>Select flow slides</option>
</select>
</div>
Here is a codepen link where you can see this happen: https://codepen.io/Nick09/pen/NWGmJGy
And a link with the mystery rectangle that appears when clicking the select element: https://imgur.com/9rdbXkS
More image examples: https://imgur.com/a/MhYNPy8
Update: After someone in the comments suggested something I figured out that the problem is much simpler than I first thought. Mainly, whenever you click on a select without any options, you get this little black dropdown: https://imgur.com/ZfFn5DN.
Use style attribute to hide the entire option.
<option style="display:none">Select flow slides</option>
Or use disabled attribute to disable the option (remove hidden attribute)
<option disabled>Select flow slides</option>
So after some time invested in this and quite a bit of help from the community I've managed to come up with a fix.
Since the problem boils down to: on some machines it seems (managed to replicate it on someone else's PC/Windows) that a select element without any options will produce a black drop down on mouse down.
And you need a select element with no options because of different reasons, in my case it was because I was later removing what was inside of the aforementioned select element in order to add a custom drop down.
Then all you need to do is add a event listener that listens for a onmousedown event and do e.preventDefault() on it so that the default drop down list does not open at all.
Tested on all browsers with no issues!
End result: https://imgur.com/moYaFkO
Thank you for your suggestions guys!
I have a mat-sidenav and a list of mat-item and mat-menu. Then when I hover over of one of the items I want the menu to display. This part is working. But then when I move off of that menu or item and over a new item I want its menu to display.
https://stackblitz.com/edit/angular-xsscrm
I have included a stackblitz with a demo of the behavior.
What is wrong here I have both on enter and exit, but then when I leave a menu on to a new one, it doesnt open unless I click on it.
Thanks for the help
The issue here is that when a menu opens, it creates an overlay with a backdrop that overlaps all elements. This backdrop is causing the mouse events to not be 'seen' by the listening element until the overlay is dismissed via a mouse click. Luckily, the menu control has a flag to remove the backdrop; setting this to false fixes the issue you're seeing.
Side note: you have an *ngFor on the <mat-list> element, but I think you want to move it to the <mat-list-item> element instead because you want many list items, not many lists. Since you're using the local variable of *ngFor outside of the <mat-list-item>, you can create an <ng-container> element to house your *ngFor. See below stackblitz:
https://stackblitz.com/edit/angular-xsscrm-kx6jyd
Another side note: this behavior is similar to a tooltip. Perhaps that would be a better control for your use-case? https://material.angular.io/components/tooltip/overview
Is it possible to add radio buttons as options in a drop-down object?
Not in a default <select> element. You'll have to build your own dropdown.
When I click a button, then a drop down menu must be shown. When I click anywhere in the page it, needs to hide. The problem I have is here: when I run the page, I can see the drop down menu instead of the click event. I tried with different div tags, but to no effect.
Demo: http://jsfiddle.net/Navya/69KGD/
You need to set your dropdown list visibility to false (to hide it) when page loads.
$("#container").hide();
After that, when you click the button you set visibility to true (show it).
$("#container").show();
I was wondering how to have all the options in a drop menu (using select tags) highlighted?
I already created a button to created a select all button to do this but I want the drop menu all selected by default when arriving on the page.
It would be great if it works for IE and firefox.
thanks
If your select is multiple then any <option> that has selected="selected" will be highlighted by default.
http://www.w3schools.com/tags/tag_option.asp