Anthony Kong
Anthony Kong

Reputation: 40884

How to keep the div and label in the same row?

This is what I wish to achieve: display a message next to an input box.

enter image description here

However, when the message is too long the whole thing goes under the input box.

enter image description here

css

.data-form{
    display: block;
    box-sizing: border-box;
    line-height: 22.8px;
}
.data {
    box-sizing: border-box;
    display: inline-block;
}
.form-group {
    margin-bottom: 15px;
    // box-sizing: border-box;
}
.data-status {
    display: inline-block;
    color: red;
    word-wrap:break-word;
}
.data-label {
    display: inline-block;
}

.form-control {
    width:200px;
    font-size: 16px;
}

html markup

<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    <form class='data-form'>
        <div class='data form-group row'>
            <label class='data-label'>
                <span> Add a data code </span>
                <input type='text' name='data' class='form-control'>

                <div class='data-status'>
                   <span class='data-status'>TEST  </span>
               </div>

            </label>

        </div>
    </form>
</div>

I want to keep the whole error message to the right hand side of the input regardless of the length of error text

I have tried

  1. 'break-word'
  2. various different structure such as moving the message inside a div which sits at the same level of label.

Unfortunately they do not work.

Here is the code that demonstrated the problem http://jsfiddle.net/kongakong/o338t791/3/

Any suggestion? It uses bootstrap css

Upvotes: 1

Views: 2293

Answers (3)

Dhanuka777
Dhanuka777

Reputation: 8636

In the form-control, add a display-inline.

.form-control {
    width:200px;
    font-size: 16px;
    display:inline;
}

Data status as,

.data-status {
    display: inline;
    color: red;
    word-wrap: break-word;
}

Default comes with form-control is display:block. This will make span and input inline. Wrap the "Add a data code" within a div.

Here is the complete html and css,

<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    <form class='data-form'>
        <div class='data form-group row'>
            <label class='data-label'>
                <div>
                <span> Add a data code </span>
                    </div>
                <input type='text' name='data' class='form-control'>

                <div class='data-status'>
                   <span class='data-status'>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</span>
               </div>
            </label>

        </div>
    </form>
</div>

CSS;

.data-form{
    display: block;
    box-sizing: border-box;
    line-height: 22.8px;
}
.data {
    box-sizing: border-box;
    display: inline-block;
}
.form-group {
    margin-bottom: 15px;
    box-sizing: border-box;
}
.data-status {
    display: inline;
    color: red;
    word-wrap:break-word;
}
.data-label {
    display: inline-block;
}

.form-control {
    width:200px;
    font-size: 16px;
    display:inline;
}

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

do some changes in your html code as

<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    <form class="data-form">
    <div class="data form-group row">
    <label class="data-label">
    <div> Add a data code </div>
    <div class="data-status">
    <input class="form-control" type="text" name="data">
    </div>
    <span class="data-status">TEST TEST TEST TEST TEST </span>
    </label>
    </div>
    </form>
</div>

and in your stysheet put

.data-status
{
vertical-align: middle;
}

Upvotes: 0

user764357
user764357

Reputation:

Just change the .data-status rule to this to remove the inline-block:

.data-status {
    color: red;
    word-wrap:break-word;
}

Here is a fiddle which shows it in action

enter image description here

The inline-block rule is whats forcing the element to remain in a single line. You can also change it to display:inline; but this is the default rule for a span element.

Upvotes: 2

Related Questions