CODEWITHSUNDEEP
htmlcss
Félix Montreuil
Félix Montreuil

Reputation: 35

Second select element is not showing on browser

I'm having issues with my last row not showing at all when I compile the program. I tried many things but there seems to be an issue with the Select element because what ever I try to add after the first Select row doesn't show up.

What am I missing?

Here is my code:

  <!DOCTYPE html>
  <html lang="en">

  <head>
      <link rel="stylesheet" href="~/css/OpenStore.css" asp-append-version="true" />
  </head>

      <p align="center" style="color:red">
          Open Store
      </p>

      <div class="OpenStore">
          <form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">

              <div class="row">
                  <div class="form-group form-group-sm col-sm-6 col-md-13">
                      <div class="row col-md-13">
                          <label class="col-form-label col-md-6">Store # :</label>
                          <div class="col-sm-3">
                              <input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row">
                  <div class="form-group form-group-sm col-sm-6 col-md-13">
                      <div class="row">
                          <label class="col-form-label col-md-6">Store Name :</label>
                          <div class="col-sm-3">
                              <input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row">
                  <div class="form-group form-group-sm col-sm-6 col-md-13">
                      <div class="row">
                          <label class="col-form-label col-md-6">Language :</label>
                          <div class="col-sm-3">
                              <select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"/>
                              <datalist id="Languages">
                                  <option data-value="English">English</option>
                                  <option data-value="Fr">French</option>
                              </datalist>
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row">
                  <div class="form-group form-group-sm col-sm-6 col-md-13">
                      <div class="row">
                          <label class="col-form-label col-md-6">Group :</label>
                          <div class="col-sm-3">
                              <select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"/>
                              <datalist id="Groups">
                                  <option data-value="2">>Laura</option>
                                  <option data-value="3">Melanie Lyne</option>
                              </datalist>
                          </div>
                      </div>
                  </div>
              </div>

          </form>
      </div>
  </html>

Here is what it looks like in chrome:

html render

Upvotes: 3

Views: 81

Answers (2)

Johannes Wulf
Johannes Wulf

Reputation: 203

The second <select> is not shown, because the closing </select> tag is missing. <select> tags are used with <option> tags inside them.

<select asp-for="LanguageId" class="form-control form-control-sm" id="Language"
    style="width:100px">
    <option data-value="English">English</option>
    <option data-value="French">French</option>
</select>

The list attribute is not valid for select. If you want to use a datalist you should switch to <input> tags.

Upvotes: 2

Top
Top

Reputation: 95

Please use the <select></select> instead of <select/>

<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>


<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype="multipart/form-data">

  <div class="row">
    <div class="form-group form-group-sm col-sm-6 col-md-13">
      <div class="row col-md-13">
        <label class="col-form-label col-md-6">Store # :</label>
        <div class="col-sm-3">
          <input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="form-group form-group-sm col-sm-6 col-md-13">
      <div class="row">
        <label class="col-form-label col-md-6">Store Name :</label>
        <div class="col-sm-3">
          <input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="form-group form-group-sm col-sm-6 col-md-13">
      <div class="row">
        <label class="col-form-label col-md-6">Language :</label>
        <div class="col-sm-3">
          <select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"></select>
          <datalist id="Languages">
                <option data-value="English">English</option>
                <option data-value="Fr">French</option>
            </datalist>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="form-group form-group-sm col-sm-6 col-md-13">
      <div class="row">
        <label class="col-form-label col-md-6">Group :</label>
        <div class="col-sm-3">
          <select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
          <datalist id="Groups">
                <option data-value="2">>Laura</option>
                <option data-value="3">Melanie Lyne</option>
            </datalist>
        </div>
      </div>
    </div>
  </div>
</form>

Upvotes: 0

Related Questions