CODEWITHSUNDEEP
twitter-bootstrapyii2
sam
sam

Reputation: 956

How to remove space between input field and containing div

I have this on my pageenter image description here

and this code

 <div class="col-md-9 .list-title-input" style="border:1px solid red;" >
    <?= $form->field($model, 'product_title')->textInput([  ]); ?>

 </div>

How can i remove the bottom space between the text input field and the containing div to get Draft saved placed immediately after the Div

I added css to control the input like this

.list-title-input input{
width:100%;
height:30px;
position: relative;
border-radius: 2px;
border: 1px solid #ccc;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
background: #ffffff;


}

and i didn't add margin to the input, the input field was generated my yi2 active form so i guess the problem is there because if i don't use active form everything is fine i hope someone can help me with this

i think the problem is with automatically generated input field when i inspect the element i found that a div with class form-group was added so does bootstrap form-group has margin- button and if it does how can i remove this. thanks

Upvotes: 1

Views: 2866

Answers (2)

Chetan Sharma
Chetan Sharma

Reputation: 2557

Margin to the input field is usually applied via .form-group class i.e

.form-group {
    margin-bottom: 10px;
}

Which is applied to the wrapper to the input field.

<div class="form-group field-user-name required">
<label class="control-label" for="user-name">Name</label>
<input id="user-name" class="form-control" name="User[name]" maxlength="255" type="text">
<div class="help-block"></div>
</div>

You can change this class while you are initiating the filed in _form.php

<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>

So, the file code for your desired class will be:

<?= $form->field($model, 'name', ['options' => ['class' => 'MY-CLASS-WITH-NO-MARGIN']])->textInput(['maxlength' => true]) ?>

then output will be:

<div class="MY-CLASS-WITH-NO-MARGIN field-user-name required">
<label class="control-label" for="user-name">Name</label>
<input id="user-name" class="form-control" name="User[name]" maxlength="255" type="text">
<div class="help-block"></div>
</div>

So in this way you can control the behavior for your wrapper div.

Upvotes: 1

Nguyen Tuan Anh
Nguyen Tuan Anh

Reputation: 1036

Could not reproduce your issue, so my assumption is you have some CSS that defines margin of your input field. You can do this to override that margin value.

.no-margin {
  margin: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-9" style="border: 1px solid red;">
  <input type="text" class="no-margin" />
</div>

UPDATED:

If you need to override the form-group class, simply add another class to your element that uses that class, like this:

CSS:

.form-group.no-padding {
 padding: 0 !important;
}

HTML:

<div class="form-group no-padding">
   ...
</div>

Upvotes: 1

Related Questions