CODEWITHSUNDEEP
htmlcss
bruce
bruce

Reputation: 463

CSS flex box isn't working correctly, how to correctly align form in css, flex box

I've tried multiple things to align this form like the picot below. I've used flex box a few times and regular CSS. its also hard because I'm not suppose to change the HTML.

How can I correct this and why my approach was incorrect would be helpful Any help is appreciated 

ul.stacked .with.d {
  display: flex;
  flex-direction: column;
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <fieldset>
    <legend><span>Name</span><img mouseover="buttons/help_icon_over.png" alt="Help" class="tooltip" id="tooltip-registrant_name" title="Put your full name and in these boxes. Please do not use nicknames or initials. If this application is for a change of name you will be asked for your previous name in a later section.  And don&#39;t forget to include your title (Mr., Mrs., Miss, Ms.)."
        src="//s3.amazonaws.com/rocky-assets/assets/buttons/help_icon-bbee0add7434a7895a446d9bb29279210486f843afea4d4ae67a54f262979001.png" /></legend>
    <ul class="stacked">
      <li class="width_d registrant-form__name-title__line">
        <h3><label for="registrant_name_title">Title</label><span class='required'>*<span class='required--text' style='display:none;'>(Required)</span></span>
        </h3>
        <div>
          <select data-client-validation-required="Required" name="registrant[name_title]" id="registrant_name_title">
            <option value=""></option>
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
            <option value="Miss">Miss</option>
            <option value="Ms.">Ms.</option>
          </select>
          <select name="registrant[name_suffix]" id="registrant_name_suffix">
            <option value="">(none)</option>
            <option value="Jr.">Jr.</option>
            <option value="Sr.">Sr.</option>
            <option value="I">I</option>
            <option value="II">II</option>
            <option value="III">III</option>
            <option value="IV">IV</option>
            <option value="V">V</option>
            <option value="VI">VI</option>
            <option value="VII">VII</option>
          </select>
        </div>
      </li>
    </ul>
  </fieldset>

</body>

</html>

Upvotes: 0

Views: 41

Answers (1)

S&#248;lve
S&#248;lve

Reputation: 4406

In your picture, you do not have the middle name, so I don't know if this is what you want. But what you can do if I understand you correctly; Make the first, last and middle name display: inline-block to make them span on the same row.

.registrant-form__first-name__line,
.registrant-form__middle-name__line,
.registrant-form__last-name__line {
  display: inline-block;
}


@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
a {
  color: #23B7FB;
  cursor: pointer;
  text-decoration: none;
}

body {
  font-family: 'Oswald-Bold';
  color: #797979;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-image: none;
}

#header {
  background-color: #fff;
  background-image: none;
  border-top: 1px solid #ccc;
  height: 0;
}

fieldset legend span {
  width: 90px;
  height: 55px;
  color: #ff0031;
  font-size: 37px;
  font-family: Oswald-Bold;
  font-weight: bold;
}



#main form ul li.registrant-form__name-title__line {
  display: flex;
  flex-direction: row;
}

input#registrant_first_name {
  display: flex;
  flex-direction: row;
}

ul.stacked .with.d {
  display: flex;
  flex-direction: column;
}


.registrant-form__first-name__line, .registrant-form__middle-name__line, .registrant-form__last-name__line  {
  display: inline-block;
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <fieldset>
    <legend><span>Name</span><img mouseover="buttons/help_icon_over.png" alt="Help" class="tooltip" id="tooltip-registrant_name" title="Put your full name and in these boxes. Please do not use nicknames or initials. If this application is for a change of name you will be asked for your previous name in a later section.  And don&#39;t forget to include your title (Mr., Mrs., Miss, Ms.)."
        src="//s3.amazonaws.com/rocky-assets/assets/buttons/help_icon-bbee0add7434a7895a446d9bb29279210486f843afea4d4ae67a54f262979001.png" /></legend>
    <ul class="stacked">
      <li class="width_d registrant-form__name-title__line">
        <h3><label for="registrant_name_title">Title</label><span class='required'>*<span class='required--text' style='display:none;'>(Required)</span></span>
        </h3>
        <div>
          <select data-client-validation-required="Required" name="registrant[name_title]" id="registrant_name_title">
            <option value=""></option>
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
            <option value="Miss">Miss</option>
            <option value="Ms.">Ms.</option>
          </select>
        </div>
        <span class="error"></span>
      </li>
      <li class="width_b registrant-form__first-name__line">
        <h3><label for="registrant_first_name">First Name</label><span class='required'>*<span class='required--text' style='display:none;'>(Required)</span></span>
        </h3>
        <div class=""><input data-client-validation-required="Required" type="text" name="registrant[first_name]" id="registrant_first_name" /></div>
        <span class="error"></span>
      </li>
      <li class="width_c registrant-form__middle-name__line">
        <h3><label for="registrant_middle_name">Middle</label></h3>
        <div class=""><input type="text" name="registrant[middle_name]" id="registrant_middle_name" /></div>
        <span class="error"></span>
      </li>
      <li class="width_b registrant-form__last-name__line">
        <h3><label for="registrant_last_name">Last Name</label><span class='required'>*<span class='required--text' style='display:none;'>(Required)</span></span>
        </h3>
        <div class=""><input data-client-validation-required="Required" type="text" name="registrant[last_name]" id="registrant_last_name" /></div>
        <span class="error"></span>
      </li>
      <li class="width_d registrant-form__name-suffix__line">
        <h3><label for="registrant_name_suffix">Suffix</label></h3>
        <div>
          <select name="registrant[name_suffix]" id="registrant_name_suffix">
            <option value="">(none)</option>
            <option value="Jr.">Jr.</option>
            <option value="Sr.">Sr.</option>
            <option value="I">I</option>
            <option value="II">II</option>
            <option value="III">III</option>
            <option value="IV">IV</option>
            <option value="V">V</option>
            <option value="VI">VI</option>
            <option value="VII">VII</option>
          </select>
        </div>
      </li>
    </ul>
  </fieldset>

</body>

</html>

Upvotes: 1

Related Questions