Search code examples
javascripthtmlcssradio-button

How can i keep radio button static upon a text change/add

I have a radio button(list) Which changes texts(using JavaScript) upon clicking on the 'next' button.The text changes but the alignment is off when text gets longer which makes it not remain in a constant position.

i.e enter image description here

Alignment after (shifted some places to left) enter image description here

Javascript (radio is a variable defined upon as'var'): radio[0].nextSibling.textContent = "We can’t explore ourselves beyond our knowledge";

HTML/CSS:

<div  style="position:absolute;transform: scale(2);top:80vh;left:20vw">
         <input type='radio' name='rblist1' value='0'> <br> 
         <input type='radio' name='rblist1' value='1'> <br> 
         <input type='radio' name='rblist1' value='2'>
           </div>

Any help would be awesome!Thanks

Solution

  • Skip the current styling and structure your radios within labels. Then browsers will know that the specified text belongs to the radio and the radio will activate when clicking the text aswell. Keep away from using transform:scale on containers with several elements and be very aware that position: absolute very often will bite you in the a...

    function changeText(){
  $("label>span").eq(1).text("This is an even longer text wich will test the structure of the HTML");
}
    .transformScale2{
 transform: scale(2); 
}

.inputRadioContainer{
margin-bottom: 10px;
font-size: large;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="inputRadioContainer">
    <label>
      <input type='radio' name='rblist1' value='0' class="transformScale2">
      <span>This is the label with a long text</span>
  </label>
  </div>
  <div class="inputRadioContainer">
    <label>  
      <input type='radio' name='rblist1' value='1' class="transformScale2">
      <span>This is the label</span>    
  </label>
  </div>
  <div class="inputRadioContainer">
    <label>  
      <input type='radio' name='rblist1' value='2' class="transformScale2">
      <span>This is the label</span>
  </label>
  </div>
 </div>
 
 <input type="button" onClick="changeText()" value="Click me"/>