html text input and checkboxes. css Issue

Question

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:

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.

Simple add to label float: left and remove float:right from the input. See this jsfiddle — Undefined
– Undefined, Commented Apr 7, 2017 at 13:09

Theo · Accepted Answer · 2017-04-07 13:05:24Z

1

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 :)

answered Apr 7, 2017 at 13:05

Theo

15713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manuel Cheța · Accepted Answer · 2017-04-07 13:27:40Z

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;
    }

That actually might work but see my edit. because the labels are not the same size, it get kinda messy, normally I would do float right on the textbox and checkbox but because there is a label with the checkbox it will get automatically floated to left.
Also I dont think I'll be able to use it as I use asp. you couldnt have known that. @Html.LabelFor(model => model.Workreport.Ordernumber) <input type="text" name="orderNumber" value="" /> <span><input type="checkbox" name="vehicle" value="Bike">I have a bike</span><br />

Alvin · Accepted Answer · 2017-04-07 13:17:34Z

0

Try removing this CSS and see if it helps.

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

OR Just remove float:right

edited Apr 7, 2017 at 13:17

answered Apr 7, 2017 at 13:11

Alvin

3027 silver badges27 bronze badges

Comments

Anand Jackie · Accepted Answer · 2017-04-07 13:51:31Z

0

Remove :

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

answered Apr 7, 2017 at 13:51

Anand Jackie

566 bronze badges

1 Comment

Anand Jackie Over a year ago

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

Катерина · Accepted Answer · 2017-04-13 11:04:16Z

0

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:)

answered Apr 13, 2017 at 11:04

Катерина

4043 gold badges11 silver badges28 bronze badges

Collectives™ on Stack Overflow

html text input and checkboxes. css Issue

5 Answers 5

Comments

2 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

1 Comment

Comments

Related