Etikett mit horizontalen Optionsfeldern ausrichten

In einer meiner Aufgaben muss ich eine Formvalidierung durchführen. Alles ist in Ordnung, abgesehen von der Tatsache, dass die Anzahl der Sterne Label nicht mit den Radiobuttons ausgerichtet ist. Ich stelle dir den Code zur Verfügung.Etikett mit horizontalen Optionsfeldern ausrichten

https://jsfiddle.net/m8nwnc8a/29/

<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate> 
       <div class="form-group" ng-class="{ 'has-error': 
        commentForm.author.$error.required && 
        !commentForm.author.$pristine }"> 
        <label for="author" class="col-sm-2 control-label">Name</label> 
         <div class="col-sm-10"> 
          <input type="text" class="form-control" id="author" 
          name="author" placeholder="Enter Name" 
          ng-model="userComment.author" required> 
          <span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
          <span ng-show="commentForm.author.$error.required && 
           !commentForm.author.$pristine" class="help-block"> 
           Your name is required. 
          </span> 
         </div> 
       </div> 
       <div class="form-group"> 

        <label class="col-sm-3 control-label">Number of stars</label> 
         <div class="radio col-sm-9"> 
           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="1" ng-model="userComment.rating">1 
           </label> 

           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="2" ng-model="userComment.rating">2 
           </label> 

           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="3" ng-model="userComment.rating">3 
           </label> 

           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="4" ng-model="userComment.rating">4 
           </label> 

           <label class="radio-inline control-label"> 
            <input type='radio' name="rating" value="5" ng-model="userComment.rating" checked>5 
          </label> 
         </div> 
       </div> 
      <div class="form-group" ng-class="{ 'has-error': 
        commentForm.comment.$error.required && 
        !commentForm.comment.$pristine }"> 
        <label for="comment" class="col-sm-2 control-label">Comment</label> 
        <div class="col-sm-10"> 
         <textarea class="form-control" name="comment" rows="6" ng-model="userComment.comment" required> 
         </textarea> 
         <span ng-show="commentForm.comment.$error.required && 
          !commentForm.comment.$pristine" class="help-block"> 
          Your comment is required. 
         </span> 
        </div> 
      </div> 
      <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-primary" 
          ng-disabled="commentForm.$invalid">Send Comment</button> 
        </div> 
      </div> 
     </form>

Irgendwelche Ideen?

Danke Theo.

PS. Machen Sie sich keine Gedanken über die verschiedenen Anweisungen wie ng-show, ng-click oder ng-model.

Quelle

2017-02-24 Theo

Wechsel:

<label class="col-sm-3 control-label">Number of stars</label> 
     <div class="radio col-sm-9">

An:

<label class="col-sm-2 control-label">Number of stars</label> 
     <div class="col-sm-10">

Quelle

2017-02-24 09:48:27 Option

Sie es wie this-- ausrichten können an der Position des Etiketts anschauen.

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      
 
      </style> 
 
      </head> 
 
      <body> 
 
      <form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate> 
 
        <div class="form-group" ng-class="{ 'has-error': 
 
         commentForm.author.$error.required && 
 
         !commentForm.author.$pristine }"> 
 
         <label for="author" class="col-sm-2 control-label">Name</label> 
 
          <div class="col-sm-10"> 
 
           <input type="text" class="form-control" id="author" 
 
           name="author" placeholder="Enter Name" 
 
           ng-model="userComment.author" required> 
 
           <span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
 
           <span ng-show="commentForm.author.$error.required && 
 
            !commentForm.author.$pristine" class="help-block"> 
 
            Your name is required. 
 
           </span> 
 
          </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         
 
         
 
          <div class="radio col-sm-9"> 
 
          <label class="col-sm-3 control-label">Number of stars</label> 
 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="1" ng-model="userComment.rating">1 
 
            </label> 
 

 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="2" ng-model="userComment.rating">2 
 
            </label> 
 

 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="3" ng-model="userComment.rating">3 
 
            </label> 
 

 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="4" ng-model="userComment.rating">4 
 
            </label> 
 

 
            <label class="radio-inline control-label"> 
 
             <input type='radio' name="rating" value="5" ng-model="userComment.rating" checked>5 
 
           </label> 
 
          </div> 
 
        </div> 
 
       <div class="form-group" ng-class="{ 'has-error': 
 
         commentForm.comment.$error.required && 
 
         !commentForm.comment.$pristine }"> 
 
         <label for="comment" class="col-sm-2 control-label">Comment</label> 
 
         <div class="col-sm-10"> 
 
          <textarea class="form-control" name="comment" rows="6" ng-model="userComment.comment" required> 
 
          </textarea> 
 
          <span ng-show="commentForm.comment.$error.required && 
 
           !commentForm.comment.$pristine" class="help-block"> 
 
           Your comment is required. 
 
          </span> 
 
         </div> 
 
       </div> 
 
       <div class="form-group"> 
 
         <div class="col-sm-offset-2 col-sm-10"> 
 
          <button type="submit" class="btn btn-primary" 
 
           ng-disabled="commentForm.$invalid">Send Comment</button> 
 
         </div> 
 
       </div> 
 
       </form> 
 
      
 
    </body> 
 
    </html>

Quelle

2017-02-24 09:51:49 neophyte

Etikett mit horizontalen Optionsfeldern ausrichten

Antwort

Verwandte Themen