0

Alignment drives me crazy. How do I get this center row to center align and middle align? https://www.screencast.com/t/QgEZNvEiQIi

The current classes are the result of trying everything I can think of so they are likely very wrong. The actual code is:

<div class="sticky-top text-center justify-content-center">
   <form action="" method="post" class="my-2 form-inline">
      <input type="hidden" name="timeEnd" value="{ts '2019-07-16 13:56:34'}">
      <div class="form-row w-100 text-center">
         <div class="col-xl-4 form-group flex-nowrap align-middle">
            <div>
               <h3>Shop Monitor</h3>
            </div>
            <div class="form-check ml-auto">
               <input class="form-check-input" type="checkbox" id="showAll" name="showAll" onchange="toggleData();">
               <label class="form-check-label" for="showAll">
               Show all 
               </label>
            </div>
         </div>
         <div class="col-xl-4 form-group flex=center flex-nowrap">
            <div class="row flex-nowrap align-middle">
               <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="back" value="<<<"></div>
               <div class="col text-center px-2">7/16/19 01:56</div>
               <div class="col text-center px-2">==&gt;</div>
               <div class="col text-center px-2">7/16/19 13:56</div>
               <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="fwd" value=">>>" disabled=""></div>
            </div>
         </div>
         <div class="col-xl-4">
            <div class="text-xl-right text-center align-middle">
               <select class="form-control" id="sampleRate" name="sampleRate" onchange="this.form.submit();">
                  <option value="4"> 4 hours (Sample rate: 3m)</option>
                  <option value="10" selected=""> 12 hours (Sample rate: 10m)</option>
                  <option value="20"> 24 hours (Sample rate: 20m)</option>
                  <option value="60"> 3 days (Sample rate: 1hr)</option>
                  <option value="140"> 1 week (Sample rate: 2hr)</option>
                  <option value="280"> 2 weeks (Sample rate: 4hr)</option>
                  <option value="360"> 1 month (Sample rate: 6hr)</option>
               </select>
            </div>
         </div>
      </div>
   </form>
</div>

And if you can tell me an easy way to make this bar sticky UNDER the also-sticky navbar that would be great. Any design advice/criticism would also be appreciated. I'm not a UX guy, but I'm trying to learn.

Earid
  • 832
  • 4
  • 14
  • 22
Daemach
  • 417
  • 5
  • 13
  • 1
    i don't think `flex=center` and `align-middle` is correct here. try adding `align-items-center` and `justify-content-center` instead – rebecca Jul 16 '19 at 14:23
  • 1
    maybe you also need to add `d-flex` to the classes. see here: https://getbootstrap.com/docs/4.0/utilities/flex/ – rebecca Jul 16 '19 at 14:24

1 Answers1

1

like i said in my comments, you used the wrong classes. Please checkout the following snippet (i marked the place where i changed the classes)

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="sticky-top text-center justify-content-center">
       <form action="" method="post" class="my-2 form-inline">
          <input type="hidden" name="timeEnd" value="{ts '2019-07-16 13:56:34'}">
          <div class="form-row w-100 text-center">
             <div class="col-xl-4 form-group flex-nowrap align-middle">
                <div>
                   <h3>Shop Monitor</h3>
                </div>
                <div class="form-check ml-auto">
                   <input class="form-check-input" type="checkbox" id="showAll" name="showAll" onchange="toggleData();">
                   <label class="form-check-label" for="showAll">
                   Show all 
                   </label>
                </div>
             </div>


<!-- CHANGES IN THE FOLLOWING TWO LINES IN THE CLASSES! --->
             <div class="col-xl-4 form-group d-flex justify-content-center align-items-center flex-nowrap">
                <div class="row flex-nowrap d-flex align-items-center">
                   <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="back" value="<<<"></div>
                   <div class="col text-center px-2">7/16/19 01:56</div>
                   <div class="col text-center px-2">==&gt;</div>
                   <div class="col text-center px-2">7/16/19 13:56</div>
                   <div class="col text-center align-middle"><input type="submit" class="btn btn-outline-secondary btn-sm mx-2" name="fwd" value=">>>" disabled=""></div>
                </div>
             </div>
             <div class="col-xl-4">
                <div class="text-xl-right text-center align-middle">
                   <select class="form-control" id="sampleRate" name="sampleRate" onchange="this.form.submit();">
                      <option value="4"> 4 hours (Sample rate: 3m)</option>
                      <option value="10" selected=""> 12 hours (Sample rate: 10m)</option>
                      <option value="20"> 24 hours (Sample rate: 20m)</option>
                      <option value="60"> 3 days (Sample rate: 1hr)</option>
                      <option value="140"> 1 week (Sample rate: 2hr)</option>
                      <option value="280"> 2 weeks (Sample rate: 4hr)</option>
                      <option value="360"> 1 month (Sample rate: 6hr)</option>
                   </select>
                </div>
             </div>
          </div>
       </form>
    </div>
rebecca
  • 943
  • 9
  • 12