Grid on WYSYWIG Forms Editor
I'd like this added to the body style of the iframe that is loaded in the Forms Editor (html.html_edit_form body.claro.body_edit_form).
background-size: 12px 12px;
background-image: linear-gradie...
Forum Discussion
Wow cool! I also tried this once ago but didn´t get that far! I actually wanted to build some kind of snap grid for positioning - but failed. I right now always assign x/y positions directly for each field.
As I can see in your picture you use left aligned labels for your field. Maybe you already know this one. This small CSS helps to align these kind of fields much more easily:
Just add it to the 'Form Body' tab (Innovator 12):
.sys_f_label_left,
.aras-field__label
{
width:200px;
}
The code defines a fixed size for the label container. This makes it much more easier to align fields with left aligned labels.
Thank you for the tip! I would really really like to understand how to make Innovator recompile the CSS files into the used .min.css files, or just adjust the "Form Body" tab to always include such a snippet - so it becomes a default for all forms.
I think it funny that the form builder has mismatch, unaligned, different font, elements. I think that reflects the attention to that area. I'd like to improve it.
I'd like to adjust all the inputs to align. It seems that the widths are all inline styling though. I was hoping to use: sys_f_value
Hi Neil,
I don´t think you have to customize the codetree to build a default stylesheet set.
You can link your custom stylesheet in the Form Body tab, so you can store your styling at one place. This also had the advantage that you don´t have to overwrite the original Innovator files, so you have a much better overview of your changes.
An example is shown in this community project:
https://github.com/ArasLabs/custom-form-css
You can add relatives links to your stylesheet(s) in the Form BodyTab, e.g.:
-----------------------------------------------------------
@import url("../customer/stylesheets/field_borderbottom.css");
@import url("../customer/stylesheets/filepicker.css");
@import url("../customer/stylesheets/button_large.css");sys_f_label_left,
.aras-field__label
{
width:200px;
}------------------------------------------------------------------
In this sample I used several individual stylesheets for certain custom elements. You can mix the external links with custom css. For example I have large and small buttons designs. I just add the links to the Form for the elements I use. Of course you can also use one big stylesheet.
You just have to ensure to clear your browser cache, so your Innovator works with the latest version.
Regarding styling the value it depends on the element. Regular text elements are ".input", dropdowns would be ".aras-form-input". The browser debugger helps to identify these elements.
