CODEWITHSUNDEEP
htmlcss
Richard de Ree
Richard de Ree

Reputation: 2540

Radiobutton Style don't show up as expected

I have a very basic form, but I used a third party css which seems to give me a problem. I looked for it pretty long now in this CSS but cannot find anything what cause this problem, 

  Mevr.<input type="radio" name="gender" value="Mevr."> 
  Dhr.<input type="radio" name="gender" value="Dhr.">
   Fam.<input type="radio" name="gender" value="Fam.">

this is what I expect

enter image description here

With the third party CSS active I get this:

enter image description here

My question is: What inline style I can use to get my radiobuttons next to eachother like in the first picture?

note: the css what cause the problem is here:

Upvotes: 1

Views: 99

Answers (3)

Sharique Hussain Ansari
Sharique Hussain Ansari

Reputation: 1456

I have used dummy HTML. Try this:

<div style="float: left">
    <input id="RadioButtonList1_0" name="RadioButtonList1" value="One" type="radio"><label for="RadioButtonList1_0">One</label>

    <input id="RadioButtonList1_1" name="RadioButtonList1" value="Two" type="radio"><label for="RadioButtonList1_1">Two</label>

     <input id="RadioButtonList1_2" name="RadioButtonList1" value="Three" type="radio"><label for="RadioButtonList1_2">Three</label>

</div>

Upvotes: 0

Aleksander Azizi
Aleksander Azizi

Reputation: 9877

Since you didn't include the CSS in your post it's hard to say what the problem is.

A simple guess would be that the inputs have a display property of block. This would cause the line break and possibly other UI changes (as seen in your screenshots).

Using display: inline-block; would solve this.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th { 
margin:0;
padding:0;
}

input[type="radio"] {
    display: inline-block;
}
Mevr.<input type="radio" name="gender" value="Mevr."> 
Dhr.<input type="radio" name="gender" value="Dhr.">
Fam.<input type="radio" name="gender" value="Fam.">

EDIT As per your updated question, the problems seems to be with the width of you input tags.

You should try setting your width property to auto

input {
    border: 1px solid #b0b0b0;
    padding: 3px 5px 4px;
    color: #979797;
    width: auto;
}
Mevr.<input type="radio" name="gender" value="Mevr."> 
Dhr.<input type="radio" name="gender" value="Dhr.">
Fam.<input type="radio" name="gender" value="Fam.">

Just replace it with the existing one in your CSS.

On a side note. I see that your CSS has multiple declarations throughout its content. Consider going through it and removing unnecessary declarations.

Upvotes: 0

aarju mishra
aarju mishra

Reputation: 710

As you have not given the coding.You can try this:

<style>

.some-class {
  float: left;
  clear: none;
}

label {
  float: left;
  clear: none;
  display: block;
  padding: 2px 1em 0 0;
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 2px 0 0 2px;
}
</style>

  
<div class="some-class">
    <input type="radio" class="radio" name="x" value="y" id="y" />
    <label for="y">Thing 1</label>
    <input type="radio" class="radio" name="x" value="z" id="z" />
    <label for="z">Thing 2</label>
  </div>

Upvotes: 1

Related Questions