I have a requirement where my drop-down values in my select are an expanded div which has 3 lines. For example my options Could be something like below
Honda Accord
19'
Blue
--------------
Honda Civic
17'
Red
This is what my dropdown would look like when expanded. So instead of regular one line option I have a div with more detailed options. The challenge I am facing is when making my selection (I can correctly display the grid as above) my dropdown selection value shows as the context of the whole div. So for example my dropdown after selection would look like this.
[Honda Civic17'Red]
I am using Angular Material for my dropdown. Is anyone aware of a way to set the selection to another value than the option text? For example I would like my dropdown when selected to display [Honda Civic] instead of [Honda Covic17'Red].
Any help would be appreciated.
Thank you.
You can customize the display of the selected item using MatSelectTrigger. An example is provided here: https://material.angular.io/components/select/overview#customizing-the-trigger-label.
Related
when i click on the arrow or the name the list drops down
this is how the expanded list looks like
how do I get this type of collapsible list using html and CSS
I tried it with details and summary tags but it puts the list further away from the other normal lists is there any other way to achieve it.
The question is already answered on stackoverflow and on the internet. Make sure to do some research before asking.
Here are some links: 1. Link 1
2. Link 2
You can take some ideas from these two and make your own custom dropdown.
I'm trying to implement a dropdown with an input but whenever I try to click the dropdown, it overlaps to the other row of the table since the inputs are inside the table. Please see my screenshot below.
Screenshot:
Note: This is pure bootstrap 3, and didn't add any customization yet.
I've had a look around but not finding what I'm looking for, or I'm not searching for the right thing.
Language: ASP.NET
Basic idea of my problem:
2 pages - 1st page has 4 buttons, 2nd page has a dropdown box with 4 options.
If I press button 1 I want option 1 in the dropdown to be selected when I navigate, if I was button 2 then I want option 2 in the dropdown to be selected.
I still want to be able to change the value in the dropdown after navigation BUT the initial value should depend on which button I pressed.
Any help or guidance would be appreciated.
You can transmit index of button via ViewBag. And in the 2nd page you set the property "selected" for the item which have the same index with value received from ViewBag.
Right now i have about 100 options in my list (HTML Dropdown list) and as it shows around 10 options and the rest on scroll.
What i need is to reduce the height of options list ie. up on clicking the dropdown, show 3 options and rest on scroll.
I will really appreciate you if you could able to answer this or direct me to a possible solution.
Thanks in advance,
Tismon Varghese
You can use size="5" attribute.
It will display 5 options for example.
I want to create a Custom ComboBox in which the DropDown contains the Horizontal Line or you can say HRule immediate after the First Item. here I am providing you the image For that you can see i have used paint to draw the HRule i want component similar like that. Please provide me valuable Links or code for that. Here is the Image.
Thanks in Advance
Have # nice Day...
Here is your answer : How to add a separator to your ComboBox