php - Bootstrap button input group wont display correctly with <form> tags -


so i'm working on social networking facebook type proof of concept project college , i'm trying bootstrap, multi-button input group display comment box.

i have text area, comment , button on right hand side, whole input group filling width of panel seen below.

trying achieve this!

the problem when add in <form> tags, formatting of entire group within <div class="row"> goes crazy , forms little box on left hand side (screenshot below). if take out <form> tags formats properly, i'm not sure how manage <form> tags/where put them achieve multi-button group.

how displays currently

the code below few undos later when forms weren't broken, know isn't how went achieving it, i've succumbed now.

if knows how achieve i'd grateful!

while($row = mysqli_fetch_assoc($result)) {          //get relative timestamp current post         $timestamp = strtotime($row['statustimestamp']);         $stamprelative = checktimestamp($timestamp);          echo '<div class="panel panel-default">                 <div class="panel-heading">                     <h3 class="panel-title">'.$row['username'].'<small class="posttimestamp"> '.$stamprelative.'</small></h3>                 </div>                 <div class="panel-body">                     '.$row['statuscontent'].'                 </div>                 <div class="panel-footer clearfix">';         echo '      <div class="row">                         <div class="col-lg-11">                             <div class="input-group">                                 <form action="'.commentonstatus($row['statusid']).'" method="post">                                     <input type="text" class="form-control" name="comment" placeholder="post comment...">                                     <span class="input-group-btn">                                         <button class="btn btn-default" type="submit">comment</button>                                         <input type="hidden" name="statusid" value="'.$row['statusid'].'">                                     </span>                                 </form>                             </div>                         </div>                         <div class="col-lg-1">                             <form action="'.likestatus($row['statusid']).'" method="post">                                 <button type="submit" id="like" name="'.$row['statusid'].'" class="btn btn-primary pull-right">like</button>                             </form>                         </div>                     </div>                 </div>               </div>';     } 

i checked code. should work fine. let me know if not work. there minor problems of placing elements. please use in row :

  <div class="col-lg-11">        <form  method="post">            <div class="input-group">                  <input type="text" class="form-control" name="comment" placeholder="post comment...">                  <span class="input-group-btn">                       <button class="btn btn-default" style="border-width: 1px 0 1px 0;border-radius: 0;" type="submit">comment</button>                       <button type="submit" id="like" name="'" class="btn btn-primary" style="border-radius: 0 5px 5px 0;">like</button>                   </span>                   <input type="hidden" name="statusid" value="">             </div>         </form>    </div> 

this output

enter image description here


Comments

Popular posts from this blog

html - Styling progress bar with inline style -

java - Oracle Sql developer error: could not install some modules -

How to use autoclose brackets in Jupyter notebook? -