Search code examples
cssadminorchardcms

How can I put the Orchard CMS Admin controls inline

I'm developing a site for a client using Orchard CMS and a custom made module. In the Admin section, I've added two radiobuttons, but can't seem to style them properly.

This is my code:

    @Html.RadioButtonFor(m => m.UserImportLinkMode, UserImportLinkMode.New, new {id="newGroup", name="group"})
    <label for="newGroup">@T("New")</label>
    @Html.TextBoxFor(m => m.NewGroupName, new {})<br/>

    @Html.RadioButtonFor(m => m.UserImportLinkMode, UserImportLinkMode.Existing, new {id="existingGroup", name="group"})
    <label for="existingGroup">@T("Existing")</label> 
    @Html.DropDownListFor(m => m.SelectedGroupId, new SelectList(Model.Groups, "Id", "Name"))

And this is what it looks like:

Orchard admin

Obviously, not as nice. Everything is put beneath each other. I can fix this (I know CSS), but that would mean creating styles for those specific controls. I was wondering if the current Admin theme has built-in styles already to put everything inline.

Solution

  • You have to add forcheckbox class to the labels of radios and checkboxs or any element want to appear inline.

    @Html.RadioButtonFor(m => m.UserImportLinkMode, UserImportLinkMode.New, new {id="newGroup", name="group"})
<label for="newGroup" class="forcheckbox">@T("New")</label>
@Html.TextBoxFor(m => m.NewGroupName, new {})<br/>

@Html.RadioButtonFor(m => m.UserImportLinkMode, UserImportLinkMode.Existing, new {id="existingGroup", name="group"})
<label for="existingGroup" class="forcheckbox">@T("Existing")</label> 
@Html.DropDownListFor(m => m.SelectedGroupId, new SelectList(Model.Groups, "Id", "Name"))