html - Bootsrap input-form-addon height not aligning -
bootstrap's input-form-addon not aligning, shown in screenshot below. i've looked through many questions no solution.
i've tried css fix height of .input-form-addon, doesn't change. there errors in code below? i'm using contact form 7 plugin generates own classes.
<div class="input-group input-group-lg"> <span class="input-group-addon" style="height: 46px !important;"> <i class="fa fa-envelope-o" aria-hidden="true" style="font-size: 14px;"> </i><br> </span><br> <span class="wpcf7-form-control-wrap your-email"> <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control input-lg" id="contact-email" aria-required="true" aria-invalid="false" placeholder="your email"> </span> </div> thank you.
just remove <br> markup.
working snippet
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="input-group input-group-lg"> <span class="input-group-addon" style="height: 46px !important;"> <i class="fa fa-envelope-o" aria-hidden="true" style="font-size: 14px;"> </i> </span> <span class="wpcf7-form-control-wrap your-email"> <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control input-lg" id="contact-email" aria-required="true" aria-invalid="false" placeholder="your email"> </span> </div> 
Comments
Post a Comment