Custom field spacing

  • Resolved ratamatcat

    (@ratamatcat)


    4 years, 1 month ago

    In part of a form I have several select fields in a straightforward vertical layout.

    I would like to remove the default spacing between each field so they are presented closer together like a continuous group i.e. a reduced amount of space between the bottom border of a select field and the label of the next select field below it.

    Placed imj-evenspace into the Styling tab for each lower field and added to Custom CSS:

    .imj-evenspace .forminator-label .forminator-select-container {
    margin-top: -15px;
}

    I was hoping this would pull up the lower field toward the field above it.

    I’m not sure this is the best technique as it might leave a hole at the end of this group of fields that I don’t want. But it isn’t working anyway.

    thanks,

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @ratamatcat,

    Hope you are doing good today. ??

    If I have understood your query correctly, then you just only have to use .imj-evenspace class, ie for example:

    .imj-evenspace {
	margin: -9% 0 0 0;
}

    Doesn’t the above CSS help? The above should help with removing the margins. You can adjust the value of margin in the above CSS according to your need.

    If the above is already tried and if you still notice any issues then please do share a link to the page where you have the form added so that we could better advise a CSS based on that.

    Looking forward to your response. Have a nice day ahead.

    Kind Regards,
    Nithin

    Thread Starter ratamatcat

    (@ratamatcat)

    Thanks Nithin,

    I see what you’ve done, it looks great, with each select list exactly aligned below the next:

    https://drive.google.com/file/d/1uiYqpywg2e6ZMi_al7NTU1qjOD7vbdA2/view?usp=sharing

    From a functional and usability perspective, what do you think regarding the field label being hidden though? Below I have done a similar thing to your spacing, but increase the spacing enough to just show the field label:

    https://drive.google.com/file/d/1rHjEJOzTdQVNkYTzESvlhFqfzwSM33-L/view?usp=sharing

    Although the first example with tight spacing looks good, with the looser spacing the user can see the ‘required’ field asterix, which is only going to be on the first field.

    thanks,

    Plugin Support Dimitris – WPMU DEV Support

    (@wpmudev-support6)

    This looks great to me @ratamatcat, good job there! ??

    Warm regards,
    Dimitris

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom field spacing’ is closed to new replies.