1

I'm trying to give label after button,but the button is not appearing. Is is working in fiddle but not in my local code.

Please solve the issue.

<div style="float:left;padding-top:5px;">
  <span class="newrdb">
     <label for="all" style="padding-left:15px;padding-bottom:8px;width:100px;font-size:12px;float:left"> 
                                    Default Template
     <input type="radio" name="Template" id="all" value="Default Template" checked="">  
     </label>
   </span>
</div>
Bhargav Chudasama
  • 6,928
  • 5
  • 21
  • 39
Sree11
  • 937
  • 1
  • 7
  • 14
  • No No My requirement is to have a input field but i want the button to appear after the text – Sree11 Jul 19 '17 at 08:57
  • @ThisGuyHasTwoThumbs according to w3 it's fine. "_To associate a label with another control implicitly, the control element must be within the contents of the LABEL element_" https://www.w3.org/TR/html401/interact/forms.html#edef-LABEL . See also https://stackoverflow.com/questions/774054/should-i-put-input-tags-inside-a-label-tag – ADyson Jul 19 '17 at 08:59
  • @ADyson ah I see, never ever seen it done, seems, well to me, illogical, but that's just me :) I'll remove my comment – treyBake Jul 19 '17 at 09:00
  • @ThisGuyHasTwoThumbs yeah I think it's a bit odd too and tend not to do it, but it's perfectly valid markup according to the spec. – ADyson Jul 19 '17 at 09:01
  • your question is not clear – bhv Jul 19 '17 at 09:03
  • @ADyson ok good good, not just me that finds it odd ahaha :) – treyBake Jul 19 '17 at 09:13

2 Answers2

5

Simple solution.. Remove the width:100px;from the label or give it more pixels...
The problem is, that both elements (the text and the radio button) don't fit together inside a 100px element.. So by deleting it or making it wider, they will fit together. 

<div style="float:left;padding-top:5px;">
     <span class="newrdb">
          <label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left"> 
               Default Template
               <input type="radio" name="Template" id="all" value="Default Template" checked="">  
          </label>
     </span>
</div>
Carl0s1z
  • 4,683
  • 7
  • 32
  • 47
2

Keep input field outside of the label tag,

Try following code,

<div style="float:left;padding-top:5px;">
  <span class="newrdb">
    <label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left;"> 
 Default Template
    </label>
     <input type="radio" name="Template" id="all" value="Default Template" checked="">  

 </span>
</div>
Santhoshkumar
  • 780
  • 1
  • 16
  • 36
  • never just leave code - always add an explanation :) – treyBake Jul 19 '17 at 09:13
  • Cool removing downvote :) though I will say, take a look at the comments on the OP's question - I too thought it was invalid markup but thanks to @ADyson - it turns out it's perfectly valid, just maybe not the best practice – treyBake Jul 19 '17 at 09:25
  • Sucks right?! haha sorry to be the bearer of bad news :) – treyBake Jul 19 '17 at 09:28