#angular #html #twitter-bootstrap-3
#angular #HTML #twitter-bootstrap-3
Вопрос:
Я хочу, чтобы форма внутри контейнера красиво вписывалась в панель
<div class="panel panel-primary" style="height: 657px; width: 600px; margin:auto;">
<div class="panel-heading">A random header</div>
<div class="panel-body">
<div class="container">
<div class="jumbotron" style="height: 615px; width: 600px;">
<div class="form-group" >
<label attr.for="{{ 'instanceType' i}}">Instance Type<span class="text-danger">*</span></label>
<select class="form-control" id="{{ 'instanceType' i}}" name="instanceType" formControlName="instanceType" required [(ngModel)]="presetInstanceType">
<option value={{presetInstanceType}} disabled selected>{{presetInstanceType}}</option>
<option>Service</option>
</select>
</div>
</div>
</div>
</div>
</div>
Вот изображение:
Комментарии:
1. Я сохранил одно выпадающее окно в коде для простоты и удобочитаемости
2. Вы понимаете, что на самом деле там нет формы, верно?
3. Итак, почему вы жестко задаете размер jumbo?
4. @MikeOne под формой я имел в виду выпадающий список и другие поля ввода внутри jumbrotron
Ответ №1:
Я смог воспроизвести проблему. Чтобы устранить проблему, удалите ширину и высоту, заданные в вашем Div с помощью class=»jumbotron». И поместите Div с class =»form-group» внутри контейнера div.
Вот как должен выглядеть ваш код:
<div class="jumbotron" >
<div class="container">
<div class="form-group">
<label attr.for="{{ 'instanceType' i}}">Instance Type<span class="text-danger">*</span></label>
<select class="form-control" id="{{ 'instanceType' i}}" name="instanceType" formControlName="instanceType" required [(ngModel)]="presetInstanceType">
<option value={{presetInstanceType}} disabled selected>{{presetInstanceType}}</option>
<option>Service</option>
</select>
</div>
</div>
</div>