Meta Box

Column Gaps Issue With Flex and CSS

Support › MB Columns › Column Gaps Issue With Flex and CSSResolved

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 9, 2024 at 2:36 AM #46370
    Nicholas CoxNicholas 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
    css

    thanks

    Nick

    September 9, 2024 at 2:37 AM #46371
    Nicholas CoxNicholas Cox
    Participant

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

    September 9, 2024 at 10:02 PM #46374
    PeterPeter
    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/

    September 9, 2024 at 10:14 PM #46379
    Nicholas CoxNicholas 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.

    September 16, 2024 at 7:24 PM #46467
    Nicholas CoxNicholas 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

    September 16, 2024 at 10:01 PM #46477
    PeterPeter
    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/

    September 16, 2024 at 10:28 PM #46478
    Nicholas CoxNicholas Cox
    Participant

    ok thanks

    September 18, 2024 at 6:39 PM #46490
    Nicholas CoxNicholas 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%;
}
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.