• State Not Answered
  • Replies 4 replies
  • Subscribers 12 subscribers
  • Views 7496 views
  • Users 0 members are here
Options
Related

Grid on WYSYWIG Forms Editor

neil.lindberg
Offline

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.

Parents
  • 0

    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.

  • 0 Offline in reply to AngelaIp

    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

Reply Children
  • 0 in reply to neil.lindberg

    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.