Column Gaps Issue With Flex and CSS

This topic has 7 replies, 2 voices, and was last updated 5 months, 1 week ago by Nicholas Cox.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
September 9, 2024 at 2:36 AM #46370

Nicholas Cox
Participant

Hi

I am using the columns extension for my front end forms and when a form is wide the columns have large gaps, i understand you are using Flexbox (CSS Flex) to do this but its difficult to reduce the columns due to the way it has been developed. I dont want to be overriding loads of CSS to keep track of it when updates occur.

Is there a way to use CSS Grid or is there an issue with the Columns extension?

e.g. 2 columns

thanks

Nick

Add New Note to this Reply

September 9, 2024 at 2:37 AM #46371

Nicholas Cox
Participant

picture wont embed so here is a link https://ibb.co/3RLxy1r

Add New Note to this Reply

September 9, 2024 at 10:02 PM #46374

Peter
Moderator

Hello Nick,

There isn't an issue with the MB Columns extension. It is how it is displayed. There is a margin right 5% and the width of column-6 is 47.5%.
If you want to override the Meta Box CSS, please follow the documentation below to enqueue your CSS file
https://docs.metabox.io/actions/rwmb-enqueue-scripts/

Add New Note to this Reply

September 9, 2024 at 10:14 PM #46379

Nicholas Cox
Participant

Hi, yes is huge when the form width is wide. So was wondering if this was intentional or not as i thought even padding widths for responsive design would be a good standard thats all.

Add New Note to this Reply

September 16, 2024 at 7:24 PM #46467

Nicholas Cox
Participant

If I add my own CSS I have to override alot of the CSS added by metabox just to set the correct the spacing between form fields

Add New Note to this Reply

September 16, 2024 at 10:01 PM #46477

Peter
Moderator

If you want to redesign the field style with custom CSS code, we offer a customization service. Please contact us here for more details https://metabox.io/contact/

Add New Note to this Reply

September 16, 2024 at 10:28 PM #46478

Nicholas Cox
Participant

ok thanks

Add New Note to this Reply

September 18, 2024 at 6:39 PM #46490
Nicholas Cox
Participant
For anyone who is interested this is the CSS i used to get even spacing to the fields e.g. gap: 10px;
```
.rwmb-form .rwmb-meta-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rwmb-form .rwmb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rwmb-form .rwmb-column {
  margin-right: 0;
  box-sizing: border-box;
  min-width: 300px;
  flex: 1;
}
.rwmb-form .rwmb-column-1 {
  width: 8.33%;
}
.rwmb-form .rwmb-column-2 {
  width: 16.66%;
}
.rwmb-form .rwmb-column-3 {
  width: 25%;
}
.rwmb-form .rwmb-column-4 {
  width: 33%;
}
.rwmb-form .rwmb-column-5 {
  width: 41.66%;
}
.rwmb-form .rwmb-column-6 {
  width: 50%;
}
.rwmb-form .rwmb-column-7 {
  width: 58.33%;
}
.rwmb-form .rwmb-column-8 {
  width: 66.66%;
}
.rwmb-form .rwmb-column-9 {
  width: 75%;
}
.rwmb-form .rwmb-column-10 {
  width: 83.33%;
}
.rwmb-form .rwmb-column-11 {
  width: 91.66%;
}
.rwmb-form .rwmb-column-12 {
  width: 100%;
}
```
Add New Note to this Reply
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.