How can one enlarge the search control in a FuelUX 3.x repeater?

Question

This is a simple customization issue that is not covered by the tutorial: the search control is too small—any reasonable query will not fit. How can one make it longer (possibly occupying all remaining free space)?

Answer 1

Add a CSS rule that overrides: .fuelux .repeater-search { float: left; width: 200px }; such as .myapp .fuelux .repeater-search { float: none; width: auto; };

Then it will look like this

As long as you are using the .repeater-search class you should be able to edit the markup into Bootstrap columns, etc.