Repositioning radio buttons

Support
#1

Hi,

I have a really simple request. I am recreating my site in x theme. I am trying to recreate this page from production (https://www.storeitcold.com/build-it/ac-calculator/) to this page on staging (https://www.newsite.storeitcold.com/build-it/ac-calculator/).

I am almost there except that on staging I currently have the radio buttons below the text boxes, when I want them to the right of their corresponding text boxes as is the case on our current production site. How can I make this change?

I have this section custom coded so I do not want to mess up the way in which the results show up.

Thanks

#2

Hello Optimotive,

Thanks for writing in!

I have checked the page and I found out that you have inserted the for in a raw content element.

<style type="text/css">
  #steps_progress {
  }
  #steps_progress span {
    display: block;
    border: 1px solid #e2eef9;
    padding: 8px 10px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 10px;
    cursor: default;
  }
  #steps_progress span.active {
    background-color: #d9e3f3;
    border-color: #d9e3f3;
  }
  .bullet-points li{
    font-size: 12px;
    font-weight: bold;
  }
  #step3back {
    float: right;
    margin-top: -40px;
  }

  #acc_step2{
    display: block !important;
  }

</style>

<div id="ac_calc" class="row">


  

    <div class="col-md-12">
      <div>
        <h3 style="color: #1c75bc;">Step 1</h3>
        <h4 style="color: #1c75bc;">Walk-in cooler dimensions</h4>
      </div>
    </div>


      <div id="acc_step1" class="col-md-12">

        <div class="col-md-5">
          <div class="row" style=" margin-top: 5px;margin-bottom: 5px;">
            <div class="col-sm-3 col-lg-2">
              <label class="control-label">Length</label>
            </div>
            <div class="col-sm-5 col-lg-3">
              <input class="form-control" type="number" step="0.1" name="length" min="0" oninput="validity.valid||(value='');">
            </div>
            <div class="col-sm-4 col-lg-7">
       
          <div class="row" style=" margin-top: 5px;margin-bottom: 5px;">
            <div class="col-sm-3 col-lg-2">
              <label class="control-label">Width</label>
            </div>
            <div class="col-sm-5 col-lg-3">
              <input class="form-control" type="number" step="0.1" name="width" min="0" oninput="validity.valid||(value='');">
            </div>
            <div class="col-sm-4 col-lg-7">
            <select class="form-control uof" name="width_UOF" style="display: none !important;">>
              <option value="ft">Ft</option>
              <option value="m">Meter</option>
            </select>
            </div>
          </div>

          <div class="row" style=" margin-top: 5px;margin-bottom: 5px;">
            <div class="col-sm-3 col-lg-2">
              <label class="control-label">Height</label>
            </div>
            <div class="col-sm-5 col-lg-3">
              <input class="form-control" type="number" step="0.1" name="height" min="0" oninput="validity.valid||(value='');">
            </div>
            <div class="col-sm-4 col-lg-7">
            <select class="form-control uof" name="height_UOF" style="display: none !important;">
              <option value="ft">Ft</option>
              <option value="m">Meter</option>
            </select>
            </div>
          </div>

        </div>

     <label class="custom-control custom-radio">
                <input id="measure1" name="dimensionsUnit" type="radio" class="custom-control-input measure-f" value="Ft" checked="checked">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Feet</span>
            </label>
            <label class="custom-control custom-radio" style="padding-left: 0px;">
                <input id="measure12" name="dimensionsUnit" type="radio" class="custom-control-input measure-m" value="Mt">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Meters</span>
            </label>
              <select class="form-control uof" name="length_UOF" style="display: none !important;">
                <option value="ft">Ft</option>
                <option value="m">Meter</option>
              </select>
            </div>
          </div>

        <div class="col-md-7">
        </div>
      </div>

      <div class="col-md-12">
      <div>
        <h3 style="color: #1c75bc;">Step 2</h3>
        <h4 style="color: #1c75bc;">Walk-in cooler temperature</h4>
      </div>
    </div>

      <div id="acc_step2" class="col-md-12">

        <div class="col-md-7">

            <div class="row" style=" margin-top: 5px;margin-bottom: 5px;">
                <div class="col-sm-5 col-lg-4">
                    <label class="control-label">Desired Temperature</label>
                </div>

                <div class="col-sm-7 col-lg-8">
                    <div class="form group row">
                        <!-- <div class="col-sm-6">
                            <input class="form-control" type="number" name="temperature" current="8" min="0" max="34" value="42">
                        </div> -->
                        <div class="col-sm-6">
                          <div class="form-inline">
                              <div class="input-group">
                                <input type="text" class="form-control" name="temperature" min="0" max="27" default="8" current="8" value="42">
                                <span class="input-group-addon btn btn-default tempChange" data="inc">
                                  <span class="fa fa-chevron-up"></span>
                                </span>

                                <span class="input-group-addon btn btn-default tempChange" data="dec">
                                  <span class="fa fa-chevron-down"></span>
                                </span>
                              </div>
                          </div>
                        </div>
                        
                        <div class="col-sm-6 temp-box" style="margin-top: 6px;">
                            <label class="custom-control custom-radio">
                                <input id="temp1" name="temperatureUnit" type="radio" class="custom-control-input temp-f" value="&deg; F" checked="checked">
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">&deg; F</span>
                            </label>
                            <label class="custom-control custom-radio" style="padding-left: 0px;">
                                <input id="temp12" name="temperatureUnit" type="radio" class="custom-control-input temp-c" value="&deg; C">
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">&deg; C</span>
                            </label>
                        </div>
                    </div>
                    

                    <!-- <select name="temperature" class="form-control">
                        <option value="0">-Select Option-</option>
                        <option value="1">34&deg;F-38&deg;F(1&deg;C-2&deg;C)</option>
                        <option value="2">38&deg;F-42&deg;F(3&deg;C-5.5&deg;C)</option>
                        <option value="3">42&deg;F-50&deg;F(5.5&deg;C-10&deg;C)</option>
                        <option value="4">55&deg;F(13&deg;C)</option>
                        <option value="5">50&deg;F-60&deg;F(10&deg;C-15&deg;C)</option>
                    </select> -->
                </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                  <br />
                  <button id="step2next" class="btn btn-primary">Get Results <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
              </div>
            </div>
        </div>

        <div class="col-md-5">
          <ul class="ac_notes_ul"></ul>
        </div>
      </div>

      <div id="acc_result" class="col-md-12" style="display: none">


        <div class="col-md-6">
        <div class="results-box">
          <p style="text-align: center;padding: 20px 0;">
              <b style="border: 1px solid;border-radius: 5px;padding: 0 0 10px;text-align: center;display: block;width: 100%;box-shadow: 0 0 0px 0px #0060b0;position: relative;">
                  <span style="color: white;background-color: #0060b0;display: block;position: absolute;left: 0;right: 0;top: 0;padding-top: 5px;padding-bottom: 5px;">Recommended: <span class="recomended"></span></span>
                  <b class="img_box"></b>
                  <b>
                    <a style="display: none;
                        background: #0060b0;
                        padding: 5px 15px;
                        border-radius: 5px;
                        color: #fff;" id="recomendedBtn">Add To Cart</a>
                  </b>
                  
              </b>
          </p>
        </div>
        </div>
        <div class="col-md-6">
        <div class="results-box">
          <p style="text-align: center;padding: 20px 0;">
              <b style="border: 1px solid;border-radius: 5px;padding: 0 0 10px;text-align: center;display: block;width: 100%;box-shadow: 0 0 0px 0px #0060b0;position: relative;">
                  <span style="color: white;background-color: #4a4a4a;display: block;position: absolute;left: 0;right: 0;top: 0;padding-top: 5px;padding-bottom: 5px;">Need Upsizing? <span class="upsizing"></span></span>
                  <b class="img_box"></b>
                  <b>
                    <a style="display: none;
                        background: #0060b0;
                        padding: 5px 15px;
                        border-radius: 5px;
                        color: #fff;" id="upsizeBtn">Add To Cart</a>
                  </b>
                  
              </b>
          </p>
          </div>
        </div>
        <!--
        <div class="col-md-4">
          <p style="text-align: center;padding: 20px 0;">
              <b style="border: 1px solid;border-radius: 5px;padding: 10px 30px;text-align: center; display: block; width: 100%;">
                  <span>Tips for installing your A/C</span>
              </b>
          </p>

          <ul id="useageTips" class="bullet-points">
            <li class="global-bullets">Rectangular rooms should have the A/C placed in the short wall.</li>
            <li class="global-bullets">Insulate with rigid foam if possible and install it over the studs - not in between!</li>
            <li class="global-bullets">If cooling below 55&deg;F make sure you have an insulation value of at least R25 all the way arround!</li>
            <li class="global-bullets">Insulate the floor if you are in the trailer, a container, a deck or any raised floor.</li>
            <li class="global-bullets">For more tips on how to build and insulate your room please visit our <a href="https://www.storeitcold.com/standing-guide/">construction guide page</a>.</li>
          </ul>

          <p style="font-size: 12px;"><a href="/build-it/ac-selection">Don't see the A/C you want? Find our top brands here</a>.</p>

        </div>
        -->
      </div>
    </div>
<script type='text/javascript' src='https://newsite.storeitcold.com/wp-content/themes/x-child/js/ac_calculator-ListAllSteps.js'></script>

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

https://www.w3schools.com/cssref/css_selectors.asp
https://www.youtube.com/watch?v=GMk7ZLuo6Po

I would highly recommend that you check out video tutorials regarding forms so that you can create a simplier forms instead.

Hope this helps.

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.