Forum Discussion

neil_lindberg's avatar
neil_lindberg
Ideator I
6 years ago

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-gradient(to right, #2000ff30 1px, transparent 1px), linear-gradient(to bottom, #2000ff30 1px, #fff 1px);
background-repeat: unset;

The result is the grid you see. I think this would be a nice UX enhancement that might turn on/off from some control in the editor toolbar.

Forms
Styling
UX UI

4 Replies

  • AngelaIp's avatar
    AngelaIp
    Ideator I
    6 years ago

    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.

    • neil_lindberg's avatar
      neil_lindberg
      Ideator I
      6 years ago

      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.

    • neil_lindberg's avatar
      neil_lindberg
      Ideator I
      6 years ago

      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

      • AngelaIp's avatar
        AngelaIp
        Ideator I
        6 years ago

        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.