Как поместить два поля формы в одну строку при применении начальной загрузки? - PullRequest
Новая
       31

Как поместить два поля формы в одну строку при применении начальной загрузки?

1 голос
/ 22 сентября 2019

Могу ли я спросить о стиле CSS, мне нужно, чтобы в одну строку было помещено два поля ввода (дата и время), но я обнаружил, что если я использую класс управления формой из начальной загрузки, он никогда не будет находиться в одной строке, я попыталсянесколько способов, но все же очень трудно найти их, как я и ожидал, но я хочу на самом деле поместить поля даты и времени в одну строку с правильной шириной, сохраняя при этом стиль начальной загрузки.

<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!--<link href="test.css" rel="stylesheet" type="text/css" />-->

    <title>Hello, world!</title>
  </head>
<form (ngSubmit)="onSubmit()">

        <div class="form-group col-md-6 col-sm-6">
            <label for="startDate">Start Date</label>
            <div style="display: inline-block">
            <input type="Date" class="form-control" formControlName="startDate" id="startDate">
            <select id="startTime" class="form-control" formControlName="startTime">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
            </div>
        </div>
        <div class="form-group col-md-6 col-sm-6">
            <label for="endDate">End Date</label>
                <input type="Date" class="form-control" formControlName="endDate" id="endDate">
                <select id="endTime" class="form-control" formControlName="endTime">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
        </div>
        <div class="form-group col-md-6 col-sm-6">
            <label for="endDate">End Date1</label>
                <input type="Date" formControlName="endDate" id="endDate">
                <select id="endTime" formControlName="endTime">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
        </div>

        <div class="form-group col-md-6 col-sm-6">
        <div class="row">
            <label for="endDate">End Date1</label>

                <input type="Date" class="form-control"  formControlName="endDate" id="endDate">
                <select id="endTime" class="form-control"  formControlName="endTime">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
            </div>
        </div>
    </form>
 </html>

enter image description here Не могли бы вы помочь мне найти два поля формы в одной строке?

Ответы [ 2 ]

0 голосов
/ 22 сентября 2019 
If you inspect the element of startDate, you will find form-control takes width as 100%, you need to adjust based on your requirement. 



<div style="display: inline-block">
            <input type="Date" class="form-control" formcontrolname="startDate" id="startDate" style="
    float: left;
    width: 50%;
">
            <select id="startTime" class="form-control" formcontrolname="startTime" style="
    width: 50%;
">
                    <option value="">--Please choose a time--</option>
                    <option value="08:00 AM">08:00 AM</option>
                    <option value="08:30 AM">08:30 AM</option>
            </select>
            </div>

enter image description here

0 голосов
/ 22 сентября 2019

Надеюсь, это поможет ... 

<html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!--<link href="test.css" rel="stylesheet" type="text/css" />-->

    <title>Hello, world!</title>
</head>

<body>
    <section>

        <form (ngSubmit)="onSubmit()">

            <div class="form-group col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="startDate">Start Date</label>
                        <input type="Date" class="form-control" formControlName="startDate" id="startDate">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="startTime">Start Time</label>
                        <select id="startTime" class="form-control" formControlName="startTime">
                            <option value="">--Please choose a time--</option>
                            <option value="08:00 AM">08:00 AM</option>
                            <option value="08:30 AM">08:30 AM</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endDate">End Date</label>
                        <input type="Date" class="form-control" formControlName="endDate" id="endDate">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endDate">End Time</label>
                        <select id="endTime" class="form-control" formControlName="endTime">
                            <option value="">--Please choose a time--</option>
                            <option value="08:00 AM">08:00 AM</option>
                            <option value="08:30 AM">08:30 AM</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endDate">End Date1</label>
                        <input class="form-control" type="Date" formControlName="endDate" id="endDate">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endTime">End Time1</label>
                        <select id="endTime" class="form-control" formControlName="endTime">
                            <option value="">--Please choose a time--</option>
                            <option value="08:00 AM">08:00 AM</option>
                            <option value="08:30 AM">08:30 AM</option>
                        </select>
                    </div>

                </div>
            </div>

            <div class="form-group col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endDate">End Date1</label>
                        <input type="Date" class="form-control" formControlName="endDate" id="endDate">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <label for="endTime">End Time2</label>
                        <select id="endTime" class="form-control" formControlName="endTime">
                            <option value="">--Please choose a time--</option>
                            <option value="08:00 AM">08:00 AM</option>
                            <option value="08:30 AM">08:30 AM</option>
                        </select>
                    </div>
                </div>
            </div>

        </form>

    </section>
</body>

</html>

enter image description here

...