CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3yii2
Still Learning
Still Learning

Reputation: 130

Place 2 form fields side by side within a bootstrap column

I am struggling to setup, what I thought would be a very straightforward, layout.

I am using Yii2 to generate a form. For the most part all is well, but I need to setup to form fields so they are side by side in a column. I have one form field for feet and one for inches, so I'm looking to have the label followed by the feet field and ' and then the inched field and "

Now, by default my Yii2 is generating (I've tried tons of mutations, but thought I'd post the basic generated code then what I may or may not have messed up).

<div class="col-md-4">
    <div class="form-group field-projects-loadlength has-success">
        <label class="control-label col-md-4" for="projects-loadlength">Length</label>
        <div class="col-sm-6">
            <input type="text" id="projects-loadlength" class="form-control" name="Projects[LoadLength]" value="120.00" tabindex="32" aria-invalid="false">
            <p class="help-block help-block-error "></p>
        </div>
    </div>                
    <div class="form-group field-projects-loadlength has-success">
        <div class="col-sm-6 col-sm-offset-3">
            <input type="text" id="projects-loadlength" class="form-control" name="Projects[LoadLength]" value="120.00" tabindex="34">
            <p class="help-block help-block-error "></p>
        </div>
    </div>            
</div>

I just can't get the CSS, or perhaps the HTMl right? I am using BootStrap 3.

The initial div col-md-4 is the container within which I wish to place my 2 form fields side by side. It is a 3 column setup (each a col-md-4 within a row), 1st column will house length, 2nd width & the 3rd the height

My actual Yii2 code is

<div class="col-md-4">
    <div class="row">
        <div class="form-group form-inline">
            <?php
                echo $form->field(
                    $model, 
                    'LoadOverHang',
                    [
                        'options' => ['class' => 'col-md-8 no-padding'],
                        'inputOptions' => [
                            'value' => Yii::$app->formatter->asInteger($model->LoadOverHang), 
                            'tabIndex'=>'50',
                        ],
                    ]
                )->textInput();
                echo "'";
            ?>
        <!-- </div>
        <div class="col-md-4" style="margin-left: 2px !important;"> -->
            <?php
                echo $form->field(
                    $model, 
                    'LoadOverHang',
                    [
                        'inputOptions' => [
                            'value' => Yii::$app->formatter->asInteger($model->LoadOverHang), 
                            'tabIndex'=>'52',
                        ],
                        'options' => ['class' => 'col-md-4'],
                    ]
                )->textInput()->label(false);
                echo '"';
            ?>
        </div>
    </div>
</div>

Your help is truly greatly appreciated.

Based on feedback, I tried the following, but still end up with the field split on 2 lines, not side by side?

<div class="column">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-xs-6 form-group field-projects-loadoverhang">
                    <label class="control-label" for="projects-loadoverhang"> Overhang</label>
                    <input type="text" id="projects-loadoverhang" class="form-control" name="Projects[LoadOverHang]" value="0" tabindex="50">
                    <p class="help-block help-block-error "></p>
                </div>
                <div class="col-xs-6 form-group field-projects-loadoverhang">
                    <input type="text" id="projects-loadoverhang" class="form-control" name="Projects[LoadOverHang]" value="0" tabindex="52">
                    <p class="help-block help-block-error "></p>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 3269

Answers (2)

sallf
sallf

Reputation: 2878

Do you have a wrapping container around all of that? Also, I think you've got your rows and columns flipped It should be .container > .row > .col-x-x. You can nest multiple .rows and .col-x-xs but "only columns may be immediate children of rows."

See if this helps:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row">
        <div class="col-xs-6"> 
          <div class="form-group field-projects-loadlength has-success">
            <label class="control-label" for="projects-loadlength">Length</label>
            <input type="text" id="projects-loadlength" class="form-control" name="Projects[LoadLength]" value="120.00" tabindex="32" aria-invalid="false" />
            <p class="help-block help-block-error "></p>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="form-group field-projects-loadlength has-success">
            <input type="text" id="projects-loadlength" class="form-control" name="Projects[LoadLength]" value="120.00" tabindex="34" />
            <p class="help-block help-block-error "></p>
          </div>
        </div>
      </div>     
    </div>
    <div class="col-md-4">
      // column 2 content
    </div>
    <div class="col-md-4">
      // column 3 content
    </div>
  </div>
</div>

Here are the docs for Bootstrap 3's grid https://getbootstrap.com/docs/3.3/css/#grid

Upvotes: 1

Still Learning
Still Learning

Reputation: 130

I have managed to put something together

<div class="col-md-4 no-padding">
    <div class="input-group">
        <span class="input-group-addon form-entry"><b>Height</b></span>
        <div class="field-projects-loadheight has-success">
            <input type="text" id="projects-loadheight" class="form-control" name="Projects[LoadHeight]" value="13" tabindex="36" aria-invalid="false">
            <p class="help-block help-block-error "></p>
        </div>                    
        <span class="input-group-addon form-entry form-entry-addon input-group-separator">ft</span>
        <div class="field-projects-loadheight has-success">
            <input type="text" id="projects-loadheight" class="form-control" name="Projects[LoadHeight]" value="13" tabindex="38">
            <p class="help-block help-block-error "></p>
        </div>                    
        <span class="input-group-addon form-entry form-entry-addon">in</span>
    </div>
</div>

Upvotes: 0

Related Questions