menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Twill

Rapidly create a custom admin console that content publishers will love. Twill is an open source CMS toolkit for Laravel, crafted by AREA 17.

Channels
Team

Compacting form layouts to take up less room on screen

March 14, 2020 at 12:44pm

Compacting form layouts to take up less room on screen

March 14, 2020 at 12:44pm (Edited 2 years ago)
Something I've found useful from very early on using Twill was adding some extra wrappers around my form elements and then a little custom css in order to better compact the size of my forms.
Whilst I love the basic clean styling of Twill, the issue I sometimes have is that when forms that have more than say 6 or 8 fields, I often feel that they just use unnecessary space when there is only a single form field per line. Especially when the data that needs inputting into a text input is say a phone number, having that input field take up the whole width of the form seems really wasteful as the phone number is going to be around 10 chrs long and the text field that takes up the whole form space supports around 100 chrs!
So in the interest of sharing I will place an example below of what I'm doing.
I just wondered if anyone else has been developing some much fancier CSS to further wrangle the layouts and improve them over the default stylings? I'd be especially interested if the solutions are pure CSS.
Inside a blade view...
<div class="gridX2">
@formField('select', [
'name' => 'apartment',
'label' => 'Apartment',
'native' => true,
'options' => $properties,
])
@formField('input', [
'name' => 'apartment_unit_number',
'label' => 'Unit Number',
'maxlength' => 20,
'type' => 'number'
])
</div>
And inside my custom CSS file...
@media screen and (min-width: 1040px) {
.gridX2 {
display: flex;
}
.gridX2 div {
flex: 50% !important;
}
.gridX2 .input:nth-of-type(1) {
padding-right:15px;
}
.gridX2 .input:nth-of-type(2) {
padding-left:15px;
}
}

March 14, 2020 at 12:47pm
Here is how it looks...
You'll love Twill's columns partial, then 👽
@component('twill::partials.form.utils._columns')
@slot('left')
@formField('input', [
'name' => 'time_start',
'label' => 'Time',
'placeholder' => '00:00',
'required' => true,
])
@endslot
@slot('right')
@formField('input', [
'name' => 'time_end',
'label' => 'End',
'placeholder' => '00:00',
])
@endslot
@endcomponent
like-fill
1
Twill 2.0 has a component alias so it's just ('formColumns')
For three or more columns, you'll still need a custom flexbox implementation.
Thanks for sharing your solution, by the way! This is the best part about a new community: when people start sharing what works.
arrhhh dammit I thought it was surprising there was nothing like this built in and of course there is.
Ok so at least for 3 or more columns it would seem my example still has some relevance if it was extended a bit further.
Edited
Thanks as always for sharing ;)