Plateforme Level Extreme
Abonnement
Profil corporatif
Produits & Services
Support
Légal
English
Two controls side by side
Message
 
 
À
16/10/2012 16:27:37
Dragan Nedeljkovich (En ligne)
Now officially retired
Zrenjanin, Serbia
Information générale
Forum:
HTML5
Catégorie:
Autre
Divers
Thread ID:
01555066
Message ID:
01555129
Vues:
51
>>but it doesn't seem to work at all. How can I correctly and nicely put them side by side without using table?
>>
>>Thanks in advance.
>
>I do it by using divs or ul/li elements, with appropriate settings. Try this for style:
>
clear: none;
>    display: block;
>    float: left;
>
Should I use this style for both of them?

E.g. I want two divs to be side by side and inside these divs I have more controls and one of them also I want side by side - how do you do this in my scenario?

See this
http://forums.asp.net/p/1851754/5181632.aspx/1?Several+DIVs+one+inside+the+other+and+setting+them+side+by+side
that describes the problem completely.

BTW, I tried specifying this style for both of them and it didn't work.

Here is what I have now:
@model CardNumbers.Objects.Client
<div class="editor-label">
    @Html.LabelFor(model => model.Number)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Number)
    @Html.ValidationMessageFor(model => model.Number)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Address)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Address)
    @Html.ValidationMessageFor(model => model.Address)
</div>

    @*Contact 1*@
      <div style="clear: none; display: block; float: left;">
        <div class="editor-label">
            @Html.LabelFor(model => model.Contact1)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Contact1)
            @Html.ValidationMessageFor(model => model.Contact1)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email1)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email1)
            @Html.ValidationMessageFor(model => model.Email1)
        </div>
        <div id="Phone1">
            <div class="float-left" style ="width:70% ">
                <div class="editor-label">
                    @Html.LabelFor(model => model.Phone1)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Phone1)
                    @Html.ValidationMessageFor(model => model.Phone1)
                </div>
            </div>
            <div class="float-left" style ="width:30% ">
                <div class="editor-label">
                    @Html.LabelFor(model => model.Ext1)
                </div>

                <div class="editor-field">
                    @Html.EditorFor(model => model.Ext1)
                    @Html.ValidationMessageFor(model => model.Ext1)
                </div>
            </div>
        </div>
    </div>
    @*Contact2*@
    <div style="clear: none; display: block; float: left;">

        <div class="editor-label">
            @Html.LabelFor(model => model.Contact2)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Contact2)
            @Html.ValidationMessageFor(model => model.Contact2)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email2)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email2)
            @Html.ValidationMessageFor(model => model.Email2)
        </div>
        <div id="Phone2">
            <div class="float-left">
                <div class="editor-label">
                    @Html.LabelFor(model => model.Phone2)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Phone2)
                    @Html.ValidationMessageFor(model => model.Phone2)
                </div>
            </div>
            <div class="float-left">
                <div class="editor-label">
                    @Html.LabelFor(model => model.Ext2)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Ext2)
                    @Html.ValidationMessageFor(model => model.Ext2)
                </div>
            </div>
        </div>
    </div>

<div class="clear"></div>
<div class="footer">
    <button type="Submit" id="btnSave">Submit</button>
    <button type="reset" id="btnCancel">Cancel</button>
</div>
Do you see what I need to adjust to make it work?
If it's not broken, fix it until it is.


My Blog
Précédent
Répondre
Fil
Voir

Click here to load this message in the networking platform