Thanks to the solid modular AgileUI arhitecture, modal windows customizations are very flexible and easy to apply.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
Using the grid system you can control the position of the labels. The form example below has the col-md-10 which sets the width to 10/12 and center-margin which centers it.
For making labels vertical you have two options, either use the apropiate grid .col- class or wrap the form in the form-vertical class.
Both the horizontal and vertical form layouts can have the label texts left or right aligned. By default the label text is left aligned. To right align it you need to either add the text-right helper class to it or by adding the form-label-right class to an element that wraps multiple labels.
Both vertical and horizontal labels can have descriptions. You can change the color of the descriptions by using the core font color helpers.
Select inputs can have different sizes and styling. You can also have select inputs that use different styling from the browser default one.
Custom select inputs maintain the dropdown browser styling.
Chosen select inputs completly restyles the select inputs to be more user-friendly and have additional options.
Chosen multiple selects transforms the regular multiselect box into in input with tags maintaing the same functionality.
Textareas can have 4 different height sizes that can be set by adding a CSS helper class to the actual textarea. Available height sizes are: small-textarea, medium-textarea, large-textarea and textarea-autosize - sets the height based on the text you write inside. For widths you can use the grid system helper classes as shown in the examples below.
Checkbox inputs can have a vertical or horizontal orientation.
You can create a custom checkbox inputs by adding the custom-checkbox class to it.
Radio inputs can have a vertical or horizontal orientation.
You can create a custom radio input by adding the custom-radio class to it.
Select inputs with default browser behavior styling.
Custom styling for select inputs with multiple attribute.
Text inputs can have more than one icon appended to them. Check the examples below.
Text inputs can have different styles & sizes, multiple left/right icons and buttons. To control text inputs widths you can use the grid system helper classes as shown in the examples below.
You can append icons to text inputs to the left, right or both.
You can append icons to text inputs to the left, right or both.
Text inputs can have more than one icon appended to them. Check the examples below.
Text inputs can have more than one icon appended to them. Check the examples below.
Use the box shadow core helper classes to style inputs for different validation responses: error, warning, success, info, notice.
Submit buttons are styled like any other Supina Admin button. You can use both the theme & core color schemes.
To view the available buttons options & configurations you can visit the Supina Admin Buttons documentation page.
Use the grid system to create form layouts. You can also control the width of the labels and the input wrapper and the number of form columns.
To view the available grid system options & configurations you can visit the Supina Admin Grid System documentation page.
The form layouts can also be bordered like in the example below. To create bordered layouts you need to wrap your form in an element with class form-bordered.
You can easily and quickly create form validation rules directly from the DOM, without writing additional javascript.
To view the available form validation options & configurations you can visit the Supina Admin Forms Validation documentation page.