Question

I have the following scenario:

<span>
      <input checked="checked" id="rad" name="rad" type="radio" value="1" /> Opt1
      <br />
      <input id="rad" name="rad" type="radio" value="2" /> Opt2 
</span>

 <span>   
        <button id="btn">Find</button>  
 </span>

Upon loading of the form, the button is invisible. When the user clicks on the option button (rad), the btn button becomes visible.

Works perfectly fine with one exception. When the button appears, it makes the size of line two larger and the white space between opt1 and opt2 increases. So from the users perspective, it looks like the lower radio button is moving.

How can I stop this?

thanks

Answer 1

It’s hard to say without seeing the overall layout. But from what I’m understanding, I would make the first span display: inline-block which would force it to be treated as one element on a single line.