Issue with resizing switch and dropdown widget
Question
Application Type
Reactive

I am observing some issue with widgets like switch and dropdown resizing. If I resize these widget height from default to say 30px it does not adjust the size properly. I have seen by modifying few pseudo style it can be resized but that is tedious and slows down the development. Can anyone suggest how to handle this. Attaching a sample app where the switch widget height does not change as I set.

Test.oml

Hello Biswajit,

I referred your oml file. To adjust switch/dropdown widget size enclosed it into a container and then accordingly adjust widget layout height.

I hope this helps you:)

Regards,

Rasika


Hi Rasika,

Thanks, I enclosed switch widget in a container and changed height of both container and widget but this does not help. Could you please share sample oml if it is working at your end.

Hi @Biswajit Kayal ,

To resize the widget apply the below styles 

Switch 

[data-switch]:empty:before {
    height: 20px;
}


[data-switch]:empty:after {
    height: 14px;
    width: 20px;
    top:3.4px;
}

Dropdown

[data-dropdown] > div.dropdown-display {
    height: 40px;
}
// For dropdown arrow
.dropdown-container:after {

}


Regards,

Harika.R

Hi @Harika Ramadalai ,

Thanks, I already used this styling for pseudo elements. But I am looking for something quickly we can do for this kind of scenario. In order to overriding the styling for this pseudo element, we need to identify it which basically slows down the development of a RAPID application development platform. Or is this the only way we can do this?

Hi Biswajit Kayal,

Kindly refer the attached oml and Url.

Hope this helps!

Regards,

Ellakkiya.S


Test.oml

Hi Ellakkiya,

I was looking for something other than styling pseudo elements in the widget. Identifying and then overriding the style is a bit tedious with respect to a RAPID application development platform.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.