group sections inside form

user_13041590 0
Viewed 89

I have this form I want to separate the form into three different sections. One of the sections of the form is the one you see in the picture below around the red border. I have used the fieldset element to separate the section. the code is this:

.field_set {
  border-color: black;
  border-style: solid;
  border: 1px #F00 solid;
}
<fieldset class="field_set">
  <div class="form-group m-form__group row">
    <legend> Start </legend>
    <!-- form group 4(adress) -->
    <!-- From address -->
    <div class="col-md-4">
      <input type="text" id="ac1" class="form-control" name="google-autocomplete" placeholder="<?php echo trans('manage_request_labels.address_input_placeholder_text');?>">
      </input>
    </div>

    <div class="col-md-4">
      <select class="form-control" id="type_of_fuel" name="type_of_fuel_input" style="width: 100%">
        <option value="">
          <?php echo trans('manage_request_labels.select_fuel_text');?>
        </option>
      </select>
    </div>

    <div class="col-md-4">
      <select class="form-control" id="euro_class" name="euro_class_input" style="width: 100%">
        <option value="">
          <?php echo trans('manage_request_labels.select_euroclass_text');?>
        </option>
      </select>
    </div>

    <div class="col-md-4">
      <select class="form-control" id="type_of_vehicle" name="type_of_vehicle_input" style="width: 100%">
        <option value="">
          <?php echo trans('manage_request_labels.select_vehicle_text');?>
        </option>
      </select>
    </div>

    <div class="col-md-4">
      <select class="form-control" id="vehicle_capacity" name="vehicle_capacity" style="width: 100%">
        <option value="">
          <?php echo trans('manage_request_labels.select_vehicle_capacity_text');?>
        </option>
        <option value="0">
          0%
        </option>
        <option value="10">
          10%
        </option>
        <option value="20">
          20%
        </option>
        <option value="30">
          30%
        </option>
        <option value="40">
          40%
        </option>
        <option value="50">
          50%
        </option>
        <option value="60">
          60%
        </option>
        <option value="70">
          70%
        </option>
        <option value="80">
          80%
        </option>
        <option value="90">
          90%
        </option>
        <option value="100">
          100%
        </option>
      </select>
    </div>


  </div>
</fieldset>

enter image description here

  • My first question is why does the border go over the legend text like that and how do you solve it
  • second question. How would you make the border a bit rounder and more slick kind of
  • Last question. Is there a better way to separate the section via bootstrap or something? Any ideas are welcomed. I tried to use the well bootstrap class(https://www.w3schools.com/bootstrap/bootstrap_wells.asp) but it did not work for some reason. Nothing happened when I added the well class to the same div as "row" in the code below
bootstrap-4 css html javascript
1 Answers

You need to override some bootstrap styles (see code below).

But first, move the legend outside the div (it does not belong in there).

To get a bit more space between the elements, wrap them in the class form-group

<div class="form-group">
    <input type="text" id="ac" class="form-control" name="google-autocomplete" placeholder="" />
</div>

For rounded border, use border-radius

border-radius: 4px;

.field_set {
    border: 2px #F00 solid;
    border-radius: 4px;
    margin: .75rem;
    padding: .75rem;
}

legend {
    padding: 4px!important;
    width: unset!important;
}


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset class="field_set">
    <legend>Start</legend>
    <div class="form-group m-form__group row">
        <!-- form group 4(adress) -->
        <!-- From address -->
        <div class="col-md-4">
            <div class="form-group">
                <input type="text" id="ac1" class="form-control" name="google-autocomplete" placeholder="" />
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <select class="form-control" id="type_of_fuel" name="type_of_fuel_input" style="width: 100%">
                    <option value="">
                    </option>
                </select>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <select class="form-control" id="euro_class" name="euro_class_input" style="width: 100%">
                    <option value="">
                    </option>
                </select>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <select class="form-control" id="type_of_vehicle" name="type_of_vehicle_input" style="width: 100%">
                    <option value="">
                    </option>
                </select>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <select class="form-control" id="vehicle_capacity" name="vehicle_capacity" style="width: 100%">
                    <option value=""></option>
                    <option value="0">0%</option>
                    <option value="10">10%</option>
                    <option value="20">20%</option>
                    <option value="30">30%</option>
                    <option value="40">40%</option>
                    <option value="50">50%</option>
                    <option value="60">60%</option>
                    <option value="70">70%</option>
                    <option value="80">80%</option>
                    <option value="90">90%</option>
                    <option value="100">100%</option>
                </select>
            </div>
        </div>
    </div>
</fieldset>
Admin1
Related