CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
dotnetdevcsharp
dotnetdevcsharp

Reputation: 3980

Why is my modal bootstrap form behaving like this?

My modal is not displaying as I need it for some reason the controls are being put to the left.Basically I want the ability of a number field and a message area they can right comments about their redeeming of points.

echo "<div id='thanks' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>";
echo "<h4 class='modal-title'>Redeem Points</h4>";
echo "</div>";
echo "<form class='form-horizontal'  class='contact' name='redemmpointsForm' id='redemmpointsForm' >";
echo " <div class='form-group'>";
echo "<h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>";
echo "<input type='hidden' name='playerid' value='<?php echo $playerId;;?>' />";
echo "<input type='number'  valuemax='<?php echo $maxpoints;?>' name='points' id='points' class='form-control' placeholder='How many points do you wish to redeem.' />";
echo "<label class='control-label col-md-4' for='Comments'>Comments?</label>";
echo "<input type='text' name='comments' />";
echo "</div>";
echo "<div class='form-group'>";
echo "<div class='col-md-6'>";
echo "<input type='button' class='btn btn-success' name='submit' id='submit' Text='Submit'>";
echo "<a href='#' class='btn' data-dismiss='modal'>Close</a>";
echo "</div>";
echo "</div>";
echo "</form>";
echo "</div>";
echo "</div>";
echo "</div>";
}

enter image description here

Upvotes: 1

Views: 47

Answers (1)

Shehary
Shehary

Reputation: 9992

Put <form></form> inside <div class="modal-body"></div>

without <div class="modal-body"></div>

echo "<div class='modal-body'>";
echo "<form class='form-horizontal'  class='contact' name='redemmpointsForm' id='redemmpointsForm' >";
echo " <div class='form-group'>";
echo "<h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>";
echo "<input type='hidden' name='playerid' value='<?php echo $playerId;;?>' />";
echo "<input type='number'  valuemax='<?php echo $maxpoints;?>' name='points' id='points' class='form-control' placeholder='How many points do you wish to redeem.' />";
echo "<label class='control-label col-md-4' for='Comments'>Comments?</label>";
echo "<input type='text' name='comments' />";
echo "     </div>";
echo "    <div class='form-group'>";
echo "            <div class='col-md-6'>";
echo "                <input type='button' class='btn btn-success' name='submit' id='submit' Text='Submit'>";
echo "     <a href='#' class='btn' data-dismiss='modal'>Close</a>";
echo "         </div>";
echo "      </div>";
echo "</form>";
echo "</div>";

will fix the problem

Fiddle

SideNote: if you remove class='form-horizontal' from <form> and use bootstrap grid system, can have better look and control over form elements

Fiddle

Upvotes: 1

Related Questions