Expanded on o-input in Oruga UI + Vue 3 - 46
We are going to use the expanded attribute to expand an input in Caterpillar UI with Vue 3.
To be able to display the expanded Oruga UI fields, simply set the expanded attribute:
src/components/CRUD/Movies/SaveComponent.vue
***
<o-input v-model="form.title" expanded></o-input>
***
<o-input v-model="form.description" type="textarea" expanded></o-input>
***
<o-select v-model="form.category_id" expanded>I think that is what we have to do if we want to make any changes, the first thing we should do is check the official page to see what it recommends, in this case we already have an attribute that does exactly what we want to do, expand the width of the field to 100%, if not, make changes using CSS, although, it is important to clarify that you cannot define classes directly for Oruga components, you must either overwrite the style using CSS or modify the style as indicated in the official documentation.
- Andrés Cruz
This material is part of my complete course and book; You can purchase them from the books and/or courses section, Curso y Libro CodeIgniter 4 desde cero + integración con Bootstrap 4 o 5 - 2025.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter