I am using a MUI TextField component with a select prop, and do not manage to position the options menu below the input field (the menu covers the input field when open). This happens in MUI's own sandbox as well:
https://codesandbox.io/s/9oqjs?file=/demo.js:1442-1496
In the sandbox, in all of the examples to the left, the menu covers the input field. It doesn't happen in the examples to the right, as these use the native select html tag, but this comes at the price of using the browser's menu.
Any idea how to position the menu correctly without the native select?
Many thanks!
It looks like Position of <MenuItems> under the Material-ui <Select> component can answer your question.
I also found that if the list of MenuItems is too long to fit under the TextField, the Menu will expand vertically over the TextField to accommodate the list. Adding a max-height to the menu can fix that.
<TextField
...
select={true}
SelectProps={{
MenuProps: {
sx: { maxHeight: '50%' }
}
}}
>
Related
I want to achieve the ComboBox functionality in which the ComboBox values are highlighted on mouse hover. In ComboBoxCellEditor only the selected is highlighted when the drop down is shown. There is no effect of the mouse hover on the list.
In the above pic my cursor is pointing to String2 and its highlighting String2. Here i'm using ComboBox.
But In the above pic my cursor is pointing to String2 but its highlighting the String0 which is selected. I want to achieve the first pic functionality using ComboBoxCellEditor.
There are two implementations of a combo box in SWT:
Combo uses the platform's native widget
CCombo (C for custom) is a control composed of a text and a button which opens a List to let the user select an item
The ComboBoxCellEditor internally uses the CCombo widget. To have a combo box like shown in the first image of your question in a cell editor, you need to implement your own AbstractComboBoxCellEditor that uses the Combo widget.
The two combo box implementations are mostly API compatible. You may want to use a copy of the ComboBoxCellEditor as a start, change the type of the comboBox field to Combo and adjust the remaining code passages.
I am using the GWT to build the radio button , but when i display it shows one after another (in row).
Is there any way to stack the radio buttons in the group vertically?
It depends on the Panel you are adding it to. If you want things to line up vertically without any hassle, add each radio button to a VerticalPanel.
The reason it lines up is because GWT generates RadioButtons as HTML <span> elements, which by default has the CSS display set to inline.
If you prefer not to use a VerticalPanel, you can make RadioButtons have display:block;
One way is to wrap each RadioButton in a SimplePanel.
Another way is to set their display css attribute to block.
GWT RadioButton has a default provided CSS class for styling the RadioButton gwt-RadioButton
Example :
.gwt-RadioButton
{
display : block;
}
How can I style a dijit.form.Select drop down menu if a use the HTML markup.
<select id="sourceselect" dojoType="dijit.form.Select" style='width:200px' onChange="changeDetected();">
</select>
To make it clear it want to style the drop down menu that is filled with the content. I want to change the height of that menu and have a scroll bar if the height is exceeded.
I am using Dojo version 1.6. Here is a Fiddle example: http://jsfiddle.net/NH7dd/.
Edit: Why the minuses?
The menu that is generated by Dojo is placed in the root of the DOM node. It's a common mistake that the menu is somehow relative positioned towards the textfield, but it isn't.
If you wish to change the style of the menu, then you could use the following CSS selector:
div[dijitpopupparent="sourceselect"] > .dijitMenu {
/** Your CSS */
}
The reason this works is because the menu is wrapped inside a dijit/popup. This popup allows displaying/hiding the menu and as you can see it has an attribute dijitpopupparent which has the original ID of the field.
I also updated your JSFiddle, which now looks like this. But I don't really recommend changing the behavior of the menu like this, since you might mess up the original functionality/behavior of the combobox. I mean, right now I have problems going to certain values because one "scroll tick" already passes a value. With the updated style I can't even properly select "2" anymore.
EDIT: In the updated JSFiddle the scrollbar will always be visible, if you want the scrollbar only to appear when there are more options, then change overflow-y: scroll to overflow-y: auto.
You can set the property for maxHeight.
<select id="sourceselect"
dojoType="dijit.form.Select"
data-dojo-props="maxHeight: 200"
style='width:200px'
onChange="changeDetected();">
</select>
Also, the newer syntax for dojo is "data-dojo-type" instead of "dojoType".
Here is JSFiddle showing the maxHeight property. (I used dojo 1.9, but maxHeight is available in 1.6)
http://jsfiddle.net/NH7dd/17/
Is it possible in GWT to set Menu Item text in two different alignments,what I mean to say is
I want my menu item's label to be left justified and its accelerator key to be right justified.
i.e,
Create Alt+Ctrl+C
Edit Shift+E
Optimize Ctrl+O
There's a "boolean asHTML" option when creating menu items, set that to true, then use CSS to left align and right align the text you want to align.
See the docs: http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/MenuItem.html
i have a select box with height: 60px. when i user clicks an option, i would want that option text to appear on the lower bottom of the select box...however safari and chrome automatically vertically aligns the text in the middle.
I have tried increasing line-height, padding-top, margin-top...but these do NOT work for safari/chrome.
please help, if this type of styling in "impossible" for safari/chrome. please let me know as well. Thanks in advance!
Unfortunately you can't style select elements generated by Safari and Chrome. What you're dealing with has been coined Shadow DOM: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
Essentially the browser creates elements that all of the select box to function as the page is being rendered, but these elements can't be styled by CSS.
I would recommend using a tool like Chosen: http://harvesthq.github.com/chosen/ if you're looking to do some heavy styling of select boxes. It uses javascript to place elements on top of the select box, replacing its functionality and allowing you to style it with CSS.