Help with Inject CSS syntax for form items

Chris Dunlop

11 Juni 2024 20:14

Hello.  I'm building my first Studio Web app, and am trying to tighten up the margins and padding on form items to remove some of the white space.  I know this can be done with the Inject CSS activity, but I'm having some trouble with the syntax.  In my form, there are some horizontal lines.  Inspecting one of them yields this:

<hr class="MuiDivider-root MuiDivider-fullWidth HorizontalRule gcx-forms-hr1 gxw-ltr-18l7j8d">       where hr1 is the specific item id on my form

How would I use the Inject CSS activity to change the margin-top and margin-bottom to 0px for ALL horizontal lines on my form?

Thanks!

0

• 

  Berend Veldkamp

  14 Juni 2024 12:23 Redigerad

  If you're okay with changing this for all forms, you could use this (in a global startup workflow):

  .gcx-forms hr {
    margin: 0 !important;
  }

  Left and right margins appear to be 0 already, so you can simply specify one value for all 4 sides in this case.

   

  If you need this for specific HR's only, you could put them inside a Section form element (set to unstyled, if needed), and then use:

  .gcx-forms-section1 hr {
    margin: 0 !important;
  }

  Where section1 is the ID of the section.

   

  0
• 

  Mike Diss-Torrance

  14 Juni 2024 11:57

  Other than all forms, you could also target the individual component. Depending how many forms you have to apply this to, that could be a lot of work. 

  div.panel-a3180fe0 {

  css code

  }

   

  

   

  0
• 

  Chris Dunlop

  14 Juni 2024 16:45

  Thanks for the info.  I'm trying to set default symbology for all forms, so I tried Berend's solution.  Unfortunately it didn't seem to work.  The only syntax that I've managed to get working is:

  .gxw-ltr-18l7j8d {margin-top:6px;margin-bottom:6px}

  What I'm not sure about though, is how persistent the class names will be over time...   

   

  0

Du måste logga in om du vill lämna en kommentar.