area17 / twill

Twill is an open source CMS toolkit for Laravel that helps developers rapidly create a custom admin console that is intuitive, powerful and flexible. Chat with us on Discord at https://discord.gg/cnWk7EFv8R.
https://twillcms.com
Apache License 2.0
3.72k stars 568 forks source link

MultiSelect Dropdown out of screen bounds #2508

Open kfina-planxy opened 6 months ago

kfina-planxy commented 6 months ago

Description

Using the MultiSelect with the inline option in the FormBuilder with a big amount of elements (e.g. 10 is enough) and as the last element on the edit page, the menu grows outside of the page bounds and it's impossible for the user to scroll there.

Steps to reproduce

in the Controller->getForm() function

// Add some elements to take up space on the page
$form->add(Input::make()->name('exampleA') );
$form->add(Input::make()->name('exampleB') );
$form->add(Input::make()->name('exampleC') );
$form->add(Input::make()->name('exampleD') );
$form->add(Input::make()->name('exampleE') );
// Add a MultiSelect with the inline() option
$form->add(MultiSelect::make()->name("numbers")->label("Numbers")->inline()->options(Options::make( 
    array_map(fn($x) => Option::make($x, "Item $x"), [1,2,3,4,5,6,7,8,9,10])
)));

Expected result

All options of the drop down are visible

Actual result

image

Versions

Twill version: 3.x-dev Laravel version: 10.0 PHP version: 8.1.17 Database engine: Xampp (MySQL)