HTML输入中断

时间:2018-07-16 15:46:27

标签: html angular angular-ui-bootstrap

因此,我只是在文件中的一些HTML周围移动,而输入标签奇怪地折断了。除单选按钮正上方的标签外,页面上的其他所有内容都可以使用(但是当单选按钮位于其他html元素下方时,标签可以使用)。

<div class="col-sm-6 firstchild">
        <div class="form-group">
            <label class="control-label" for="templateName">Template Name
                <span class="text-danger">*</span>
            </label>
            <span class="help-tip">
                <p>Please confirm the Template Name</p>
            </span>
            <input class="form-control" type="text" formControlName="templateName" id="templateName" placeholder="Add Template Name"
             (keydown.Tab)="checkDuplicateTemplates($event)" (blur)="checkDuplicateTemplates($event)" />
            <div class="alert alert-danger" *ngIf="!form.controls['templateName'].valid && form.controls['templateName'].touched">You must enter Temaplte Name.</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label" for="language">Language</label>
            <span class="help-tip">
                <p>Confirm the Language</p>
            </span>
            <select class="form-control" formControlName="language">
                <option value="english">English</option>
            </select>
            <div class="alert alert-danger" *ngIf="form.controls['language'].hasError('required') && form.controls['language'].touched">You must enter Language.</div>
        </div>
    </div>
<!--Piece that was moved-->
<div class="form-group">
        <label class="control-label" for="approvalrequired">Will be used for External Client:</label>
        <span class="help-tip">
            <p>Select Yes or No</p>
        </span>
        <div class="form-inline">
            <div class="radio">
                <input type="radio" id="externalClientYes" class="form-control" formControlName="approvalrequired" value="Y" />
                <label for="externalClientYes">Yes</label>
            </div>
            <div class="radio">
                <input type="radio" id="externalClientNo" class="form-control" formControlName="approvalrequired" value="N" />
                <label for="externalClientNo">No</label>
            </div>
        </div>
    </div>
<!--End of piece-->
    <div class="form-group emailSubject">
        <label class="control-label" for="emailSubject">Subject:</label>
        <span class="help-tip">
            <p>Subject of the email template</p>
        </span>
        <textarea class="form-control" rows="3" formControlName="emailSubject" placeholder="Add Email Subject..." maxlength="400"></textarea>
        <div class="alert alert-danger" *ngIf="form.controls['emailSubject'].hasError('required') && form.controls['emailSubject'].touched">You must enter the Email Subject</div>
    </div>

当我尝试在两个输入标签下方也选中复选框输入时,也会发生相同的问题。我完全不知道为什么会这样。我知道它也仅仅是HTML(我在[添加/移动任何其他输入之前]重新加载了HTML的先前版本,并且工作正常)。

谢谢!

编辑:

因此,我在这个问题上的范围有所缩小,但是这个问题甚至还不清楚。

因此,我进行了相应的更改,并在有问题的代码下建立了一个空表单组:

<div class="col-sm-6 firstchild">
            <div class="form-group">
                <label class="control-label" for="templateName">Template Name 
                    <span class="text-danger">*</span>
                </label>
                <span class="help-tip">
                    <p>Please confirm the Template Name</p>
                </span>
                <input class="form-control" type="text" formControlName="templateName" id="templateName" placeholder="Add Template Name"
                 (keydown.Tab)="checkDuplicateTemplates($event)" (blur)="checkDuplicateTemplates($event)" />
                <div class="alert alert-danger" *ngIf="!form.controls['templateName'].valid && form.controls['templateName'].touched">You must enter Temaplte Name.</div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="control-label" for="language">Language</label>
                <span class="help-tip">
                    <p>Confirm the Language</p>
                </span>
                <select class="form-control" formControlName="language" id="language">
                    <option value="english">English</option>
                </select>
                <div class="alert alert-danger" *ngIf="form.controls['language'].hasError('required') && form.controls['language'].touched">You must enter Language.</div>
            </div>
        </div>
    <div class="row">
        <div class="form-group">

        </div>
    </div>

此时输入仍然有效。但是,如果我在中放了任何内容,则输入会再次中断。有谁知道为什么输入变成了似乎被禁用的输入(但不是,也不无效)。

这也不是我可以控制CSS使用方式的项目,因此我无法尝试任何需要编辑CSS的答案。

2 个答案:

答案 0 :(得分:0)

您可以在引导程序4中为每个div使用引导程序边距或填充类。 像mb-1底边一样。有关更多信息,请参见here

    private void isCameraInUse(){
            if(context == null) return;

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-->  line 163       mCameraManager = (CameraManager)getSystemService(Context.CAMERA_SERVICE);
            }
            else{
                Toast.makeText(context, "You need to run Android version "+
                                Build.VERSION_CODES.M+" or above",
                        Toast.LENGTH_SHORT).show();
                return;
            }

或者,使用css实现相同功能-

.mb-1 {
  margin-left: ($spacer * .25) !important;
}

在所有发生中断的div中使用此类。

*此外,您还应该在单选按钮中提供名称属性,以避免同时选择这两个选项。

答案 1 :(得分:0)

label标签的for属性必须与inputtextarea的{​​{1}}属性相对应。

id