Develop Reference

material-ui input select attribute hides the body overflow-y scroll - react js

I am using material-ui v3.1.2 with react js v16.5.2. In my page, there are many places where i am using <TextField> with select attribute. So, whenever i click on that TextField and when the dropdown appears, it hides my parent vertical scrollbar causing some ui shifting towards right as it hides the scrollbar. I don't want that to happen, so any solution would be of great help.
Here is the screenshot of before opening the dropdown,
Here is the screenshot of after opening the dropdown,

A workaround for this issue can be to use the Select component of material-ui and use the 'disableScrollLock: true' property. But in that case, the scroll bar will not disappear on opening select, so the whole page will be scrollable while the select options are open.
<Select
MenuProps={{
disableScrollLock: true,
}}
...
/>

I have a problem using Select component, so The solution using a textField:
<TextField select SelectProps={{ MenuProps: { disableScrollLock: true } }}/>

Answering only if it helps somebody.
By default whenever you open the dropdown using mat <Menu></Menu> it will add overflow: hidden; to the body node.
One possible solution is that you add overflow-y: auto !important; on the body element and this also worked for me.
For example:
Here you see I have added overflow-y: auto !important; in my body style
Now here you see mat is automatically assigning overflow: hidden; to my body element. Which I have catered by !important;

How to make row hover cover the selection in datatable?

I want to add a row hover to the Webix datatable using hover property, but it doesn't affect to the selected row by default.
I've tried to modify the :hover of the selection class, but the current notation works only for the hovered cell (while I need a hovered row):
<style>
.bluehover{
background:lightblue;
}
.webix_row_select:hover{
background:lightblue !important;
}
</style>
Snippet here.
Will appreciate any help.

Just change
.webix_row_select:hover{
background:lightblue !important;
}
to
.webix_row_select *:hover{
background:lightblue;
}
Updated snippet

I think the solution from #aisah is not up to date anymore.
Under webix 8 one only needs to set hover:<css_class> and define
.<css_class>{background: <my_color>;} without the hover selector.
Snippet
Webix Documentation

How to add class in wijmo combo box

I need to add the styling to dropdown values on mouseover. To achieve it I need to add class to dropdown.
Is there any other way to fix the issue?
fiddle here jsfiddle.net/37GHw/165

You could override the existing css class of the dropdown items and provide your own styling.
.wj-listbox-item:hover {
background-color: blue !important;
}
Please check the updated fiddle : http://jsfiddle.net/37GHw/177/

How to align jQuery UI selectmenu with buttons?

I've been struggling with this for a while (I'm really not experienced with jQuery UI).
I'm trying to implement a jQuery UI that has a selectmenu next to some regular buttons. For some reason I can't understand, the selectmenu is mis-aligned; it's way higher up on the page than the buttons.
Here's what it looks like:
I'm not sure if this is a bug or not, it sure looks very wrong to me. I've been struggling for quite a while now but haven't been able to figure it out.
The markup is really very basic so I don't think it's very helpful to include it here., but it's all here: http://jsbin.com/afixij/10/edit?html,css,js,output. Widen the Output to see all three elements (the selectmenu, and the buttons Foo and Bar) on the same line.

You could just apply vertical-align:middle to the dropdown which is made up of spans to get the buttons aligned properly with the dropdown.
#speed-button{
vertical-align : middle;
}
Bin
It appears there is no option to provide a custom classname for select menu widget (It is bad if that is the case) as applying rule to a class would be much better. You could as well do:-
Apply a classname for the select
and in css provide a generic rule for any .menu-buttons
.menu-button + .ui-selectmenu-button{
vertical-align : middle;
}
Bin2

It might actually be easier to make the actual buttons (not menu) up by using
<button style="vertical-align: top"></button>
It can be inlined and creation of a custom class isn't required.

The solution I applied was to place the content I wished to be vertically aligned in a display: flex entry. For example:
<div style="display: flex; align-items: center;">
... other elements here
</div>
for more details on this display type, see this excellent discussion:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

To expand on the marked answer, there is a way to obtain the jquery object the selectmenu creates. Make sure you initialize the selectmenu first or it won't work.
$("#speed").selectmenu();
$("#speed").selectmenu("widget").addClass("fixAnnoyingSelectAlignmentClass");
CSS:
.fixAnnoyingSelectAlignmentClass
{
vertical-align: middle;
}

How to apply CSS(specially padding/margin ) to options or optgroup of select drop down?

Padding or margin CSS only applies to the options in FF browser. I have tried same thing in IE chrome but does not work. Can someone let me know how we can style(padding/margin) option in select menu.

There is a DropKick JQuery library , where you can customize your dropdown (it's automatically replacing the native dropdowns with this element, so you don't need to replace your <select> elements in html code.

You won't see an option for padding or margin. That's because it isn't needed. What I typically do is I wrap the select dropdown in a div and style it like so.
.myDropdown select{
border: solid 1px red; font-weight: normal;width:300px;height:40px;font-size:12px;background:#FFC;
}
The reason padding is not available is because it really isn't needed. You can adjust the height or width of your box and the font size. Adjusting the height and width essentially adds more space around your text within the select. Anything more than adjusting these settings is just overkill. If you're really wanting that much control over styling then use something like jQuery UI or bootstrap.