New Form block radio field styling

  • Hi,

    I do not know if this is the right place.

    I installed GB 2.3.0 beta 2 and GB Pro 2.6.0 beta 2.
    Besides other questions, like notification email styling this is maybe a simple one.

    I added a radio field with options, that are displayed in flex / column.
    I’d like to display the option on one line, so I added flex-direction: row; in CSS.
    However the global styling is overruling my local block styling.
    See this css from dev tools:

    :where(.gb-form-field--checkbox-group) .gb-form-field__group, :where(.gb-form-field--radio) .gb-form-field__group {
        display: flex;
        flex-direction: column;
        gap: .5em;
    }
    
    .gb-form-field-control-6bf7d3d7 {
        flex-direction: row;
    }

    Of course I could add !important to my local css, but I wonder if that is the right thing to do.

    I ask this, because I sometimes in the past I get this overruling issue as well in the regular plugins of GB / GB Pro.

    I use external css files in GB and first thing I do, when problems arise: Regenerate external css files.

    Regards,
    Jan

  • Hello,

    Please, select the form block, then select the appropriate selector.

    Form radio selector

    Then, set your flex settings in there.

    Form radio field flex settings

    https://learn.generatepress.com/blocks/block-guide/getting-started-generateblocks/generateblocks-pro/forms/#styling-forms

  • Hi George,

    Thanks very much.
    That did the trick!

    I didn’t find the learn pages of Generatepress for this, unfortunately.
    I will look into it.

    kind regards,
    Jan

  • Ok, no problem!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.