h2oai / wave

Realtime Web Apps and Dashboards for Python and R
https://wave.h2o.ai
Apache License 2.0
3.9k stars 323 forks source link

Add `flex-grow`/`flex-shrink` option to components within `ui.inline` #2228

Open nipunchamikara opened 6 months ago

nipunchamikara commented 6 months ago

Is your feature request related to a problem? Please describe

In v0.22.0, it was possible to allow components to fill remaining space within ui.inline by setting width="100%". However, in v1.0.0, settings width="100%" sets the widget to the same size of the parent (ui.inline).

Describe the solution you'd like

Some option that either gives separate options for flex-grow/flex-shink (e.g.: flex-grow=true), or an option to specify flex options within the element (e.g.: flex="1 1 0" or flex="grow"). Or, a parameter to add custom inline css (e.g.: style="flex: 1 1 0;".

Describe alternatives you've considered

In simple scenarios, like two elements, setting width="50%" would suffice. But this becomes more problematic when some elements can change in size but some do not within a ui.inline component.