CODEWITHSUNDEEP
javascripthtmlcssvue.jsradio-button
Skyhigh23
Skyhigh23

Reputation: 55

Changing space between two radio buttons from the same group

is it possible to change the space between two horizontal radio buttons? Both buttons are in the same group and I would like to move the right one ("Clear Selection") more to the right so it matches with the ones from another group below.

                <v-radio-group v-model="consent.newselection2"
                row
                   >
                  <v-radio
                   class="radio"
                    color="yellow"
                    v-for="item in conclusionnewitems2"
                    :rules="rules"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  ></v-radio>
                </v-radio-group>

conclusionnewitems2: [
       { label: "Website", value: {'var1':"On our website", 'var2': "included on our website"}},
       { label: "Clear slelection", value: "null"},
],

Upvotes: 1

Views: 1383

Answers (1)

Sebastian
Sebastian

Reputation: 1529

It looks like you're using a framework like Vuetify (or something similar), but as long as that doesn't overwrite your styles, you could either use a class and some CSS:

<template>
  <v-radio class="radio padding-left" .../>
</template>

<style>
.padding-left {
  padding-left: 4px; // or however much you want
}
</style>

...or with a simple style property:

<template>
  <v-radio style="padding-left: 4px;" .../>
</template>

EDIT: To only move a single one (for example no. 2): I like to use index in the loop, and add a dynamic class like so:

<template>
  <v-radio 
    v-for="(item, idx) in conclusionnewitems2"
    class="radio"
    :class="idx === 1 ? 'padding-left' : ''" 
    ...
  />
</template>

This means only the second one (idx == 1) will have padding-left.

Upvotes: 1

Related Questions