CODEWITHSUNDEEP
htmlcss
user672009
user672009

Reputation: 4585

Form elements out of place

I'm struggling placing my form elements where I like them to be.

I like my recurrence_interval input field below my select (recurrence) input field.

My two radio boxes for never and on. On top of each other and the input field for ends_on_date below the check box for "On".

My html is as below.

    <div id="dialog" title="Create new appointment">
        <form id="df">
            <label class="align" for="title">Title</label>
            <input type="text" name="title" id="title">
            <label class="align" for="when">When</label>
            <input type="text" name="when" id="when">

            <input id="repeat" type="checkbox">
            <label id="repeat_text" for="repeat">Repeat...</label>
            <div id="repeat_properties">
                <label class="align" for="recurrence">Repeats</label>
                <select id="recurrence">
                    <option value="1">Daily</option>
                    <option value="7">Weekly</option>
                    <option value="repeat-x-days">Every x day</option>
                </select>
                <input id="recurrence_interval" type="text">

                <label class="align" for="ends_never">Ends</label>
                <input id="ends_never" name="endson" type="radio" title="Ends never" checked="checked">
                <label for="ends_never" title="Ends never">Never</label>
                <input id="ends_on" name="endson" type="radio" title="Ends never">
                <label for="ends_never" title="Ends never">On</label>
                <input class="align" id="ends_on_date" type="text">
            </div>
        </form>
    </div>

My css is as below.

.align {
    display: inline-block;
    float: left;
    clear: left;
    width: 30%;
    text-align: left;
}

input[type="text"], input[type="radio"], select {
    display: inline-block;
    float: left;
    clear: right;
}

#repeat
{
    display: inline-block;
    float: left;
    text-align: left;
    clear: left;
}
#repeat_text
{
    float: left;
}

Anyone got a clue about how I can archive the above?

Edit: As seen here, at least with chrome, the fields are clearly out of place.

Upvotes: 0

Views: 70

Answers (1)

rasah_dipikir_jerojero
rasah_dipikir_jerojero

Reputation: 175

change your HTML structure for radio, try using this. 

<label for="ends_never" title="Ends never"><input id="ends_never" name="endson" type="radio" title="Ends never" checked="checked"> Never</label>
<label for="ends_never" title="Ends never"><input id="ends_on" name="endson" type="radio" title="Ends never"> On</label>

edited

try to add styling label { float : left; }

Upvotes: 1

Related Questions