CODEWITHSUNDEEP
htmlcsscheckbox
Катерина
Катерина

Reputation: 404

html text input and checkboxes. css Issue

edit: Looks like this now: https://jsfiddle.net/vmd7m3yh/5/ It's better, definitely, but I need to sort out how to list the inputs correctly.. Kinda messy right now.

I am running into a problem in html/css. I am trying to make something like this: enter image description here

The problem is that I dont know how I can align them this way. I have tried to use float on the the input and checkbox, however the checkbox get pushed back to the first label.

current situation:

https://jsfiddle.net/vmd7m3yh/

The CSS for the specific div is at the bottom of the file.

Any idea what I should change? I am quite ashamed of asking a question on SO about html. please, be nice :)

/*Custom form*/

.workorder-form {
  margin-bottom: 5px;
}

.workorder-form form {
  margin-top: 15px;
  width: 500px;
}

.workorder-form label {
  margin-top: 5px;
}

.workorder-form input[type=text] {
  float: right;
  margin-top: 5px;
}

.workorder-form input[type=checkbox] {
  background-color: yellow;
}

.workorder-form textarea {
  width: 350px;
  height: 200px;
  padding-bottom: 5px;
}
<div class="workorder-form">
  <form class="workorder-form">
    <h4>@Resources.WorkReport</h4>
    <label>some label</label>
    <input type="text" name="orderNumber" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="phone" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="email" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="email" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="email" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <input type="text" name="email" value="" />
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

    <label>some label</label>
    <textarea name="email" value=""></textarea><br />

  </form>
</div>

edit: Looks like this now: https://jsfiddle.net/vmd7m3yh/5/ It's better, definitely, but I need to sort out how to list the inputs correctly.. Kinda messy right now.

Upvotes: 0

Views: 3425

Answers (5)

Катерина
Катерина

Reputation: 404

I solved it doing something completely different. I made 1 div and inside that div I inserted 2 new divs. so I had the checkbox and span in another label then the form. Problem solved:)

Upvotes: 0

Anand Jackie
Anand Jackie

Reputation: 56

Remove :

.workorder-form input[type="text"] { float: left; (remove) }

Upvotes: 0

Manuel Cheța
Manuel Cheța

Reputation: 500

You can try the changes I did to your HTML/CSS code in this JS Fiddle - https://jsfiddle.net/39L08e96/

html:

<div class="workorder-form">
        <form class="workorder-form">
                <h4>@Resources.WorkReport</h4>
                <label>
                  <span>some label</span>
                  <input type="text" name="orderNumber" value="" />
                  <input type="checkbox" name="vehicle" value="Bike">
                  <span>I have a bike</span>
                </label>

                <br />

                                <label>
                  <span>some label</span>
                  <input type="text" name="orderNumber" value="" />
                  <input type="checkbox" name="vehicle" value="Bike">
                  <span>I have a bike</span>
                </label>

                <br />


                        <label>some label</label><br />
                        <textarea  name="email" value=""></textarea><br />

        </form>
</div>

and css:

  .workorder-form label * {
        float: left;
        margin-top: 5px;
        margin-left: 5px;
    }

     .workorder-form input[type=text] {
        float:left;
        margin-top: 5px;
    }

Upvotes: 1

Alvin
Alvin

Reputation: 302

Try removing this CSS and see if it helps.

.workorder-form input[type=text] {
    float:right;
    margin-top: 5px;
}

OR Just remove float:right

Upvotes: 0

Theo
Theo

Reputation: 157

Your inputs are too big on that fiddle, try adding something like 

input {
    height: 30px;
}

in your css and see

Edit : you can add bootstrap as an external resource on the left of fiddle instead of copying it in the css box :)

Upvotes: 1

Related Questions