Horizontal Options using CSS columns : small margin gap on top of first column

Support
#1

Hi

I use Options in an horizontal orientation and spanned over columns defined in CSS for cleanliness. I noticed that the radio buttons in the first column are slightly higher than the next ones, as you can see below.

It is barely noticeable, but noticeable anyway, barely a few pixels. However HTML does not seem to treat the first span differently from the other.

And I have not defined anything about margin in SCSS rules.


  .options-two-columns {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;

    .v-radiobutton > label {
      white-space: nowrap;
    }
  }

  .options-three-columns {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;

    .v-radiobutton > label {
      white-space: nowrap;
    }
  }

Not sure to understand why. Is there magic CSS rule that I missed ?

Mike

options_first_column_vertical_upper_shift

options_first_column_vertical_upper_shift_html

#2

Hello, Michael

First element of OptionsGroup has top margin which is larger than other elements have. To fix it you should write additional SCSS rule for option elements span.v-radiobutton.v-select-option and set them the same margin-top.

#3

Thanks Daniil.

Do you mean I should rewrite my scss rules like below ?


  .options-two-columns {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;

    .v-radiobutton > label {
      white-space: nowrap;
    }
    span.v-radiobutton.v-select-option {
      margin-top : 5px
    }
  }

Mike

#4

Actually in case of using column-count the best variant is to set zero value to margin-top for the first child:


.options-two-columns {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;

  .v-radiobutton > label {
    white-space: nowrap;
  }

  .v-radiobutton.v-select-option:first-child {
      margin-top: 0px;
  }
}

margin-top

#5

Thanks Daniil, I will definitely try once I have solved current other issues I have.

#6

Maybe I can help you with your issues?

#7

That’s kind of you. I opened other threads for them.

#8

Hi for the record I finally managed to get things aligned with a 6px top margin (code below).

.options-two-columns {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;

.v-radiobutton > label {
  white-space: nowrap;
}
.v-radiobutton.v-select-option:first-child {
      margin-top: 6px;
 }

}