Total Pageviews

2017/03/02

[HTML] How to arrange multiple elements in the same row

Problem
In this dialog, I hope the drop down list should be at the right side of the radio button, not in the new line.




The code snippet looks like:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="row">
   <div class="col-sm-12">
      <div class="form-group" style="display:inline">
         <label>即時應用系統異常追蹤整合</label>
         <div>
            <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='0'" (click)="newProject.sentryOption='0'">立即建立專案關聯
            <span style="padding-left:20px">
            <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='1'" (click)="newProject.sentryOption='1'">選擇既有的關聯
            </span>
            <span style="padding-left:5px">
               <select class="form-control" name="sentryProjectId" [(ngModel)]="newProject.sentryProjectId" [style.width.px]="50" *ngIf="newProject.sentryOption==='1'"
               >
               <option value="" selected> 請選擇 </option>
               <option *ngFor="let sp of sentryProjects" [ngValue]="sp.slug">{{sp.slug}}</option>
               </select>
            </span>
         </div>
      </div>
   </div>
</div>


How-to
You can use CSS to fulfill this requirement:
display:inline-block

The drop down list can add style, the updated code snippet is as bellowing:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="row">
   <div class="col-sm-12">
      <div class="form-group" style="display:inline">
         <label>即時應用系統異常追蹤整合</label>
         <div>
            <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='0'" (click)="newProject.sentryOption='0'">立即建立專案關聯
            <span style="padding-left:20px">
            <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='1'" (click)="newProject.sentryOption='1'">選擇既有的關聯
            </span>
            <span style="padding-left:5px">
               <select class="form-control" name="sentryProjectId" [(ngModel)]="newProject.sentryProjectId" [style.width.px]="50" *ngIf="newProject.sentryOption==='1'"
               style="display:inline-block;">
               <option value="" selected> 請選擇 </option>
               <option *ngFor="let sp of sentryProjects" [ngValue]="sp.slug">{{sp.slug}}</option>
               </select>
            </span>
         </div>
      </div>
   </div>
</div>    


See...the radio buttons and drop down list are in the same row.

Reference
[1] https://www.quora.com/I-want-to-put-two-divs-in-HTML-in-the-same-line-but-one-always-comes-under-the-other-one-What-should-I-do
[2] http://crunchify.com/basic-html-how-do-you-create-blank-space-in-html/    

No comments: