Search code examples
htmlpage-layout

HTML- how do I specify the layout of input & span tags?

On my website, I 'Save' button, which opens up a dialog box when clicked. The dialog box displays some information about the page being saved, and I have also just added a checkbox to allow the user to specify that they want this page to be the 'Home' page for the site. i.e. after checking the box, and clicking the 'Save' button on the dialog, the page that they're currently viewing will be set as the 'Home' page, so that whenever they click the 'Home' button on the site, they will be taken to this page rather than the default page.

This feature currently works, and I am now just trying to tidy up the presentation/ layout so that it is consistent with the rest of the dialog box.

The HTML is:

<div data-ng-show="layout.style == 'grid'">
    <div class="divider"></div>
    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <label data-i18n="Direction:"></label>
        </div>
        <div class="col-sm-8 col-xs-8">{{layout.direction}}</div>
    </div>
</div>
<div class="divider"></div>
<div class="row">
    <div class="col-sm-4 col-xs-4">
        <label data-i18n="Homepage:"></label>
    </div>
    <div class="col-sm-10 checkbox">
        <label class="checkbox">
            <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
            <span data-i18n="Set this page as the home page"></span>
        </label>
    </div>
</div>

However, for some reason, the layout of the checkbox and description that I've added for it are not the same as everything else that is displayed on the dialog box:

Screenshot of dialog box

I was expecting the checkbox & description to be displayed inline with the 'Homepage' label, like all of the other items are... I'm guessing that the reason that this has been displayed on a new line is possibly because the width of the text is too long for the dialog box?

How can I specify that I want the checkbox & description text to be displayed in line with the 'Homepage' label, & with the other non-label elements displayed, even if it takes up two lines to do this?

Edit

I tried the suggestions given in the answers- and while this resolved the 'column' issue with the layout, it hasn't resolved the 'row' issue- i.e. the text is now confined to the correct column, but for some reason, it still appears to be displayed on a separate row to the label:

enter image description here

Solution

  • Seems you have 12 column layout but are using 14 column instructions in last row.

    <div class="col-sm-4 col-xs-4">
        <label data-i18n="Homepage:"></label>
    </div>
    <div class="col-sm-10 checkbox"> <!-- should be col-sm-8 -->
        <label class="checkbox">
            <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
            <span data-i18n="Set this page as the home page"></span>
        </label>
    </div>

    So overall try this:

    <div data-ng-show="layout.style == 'grid'">
    <div class="divider"></div>
    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <label data-i18n="Direction:"></label>
        </div>
        <div class="col-sm-8 col-xs-8">{{layout.direction}}</div>
    </div>
</div>
<div class="divider"></div>
<div class="row">
    <div class="col-sm-4 col-xs-4">
        <label data-i18n="Homepage:"></label>
    </div>
    <div class="col-sm-8 checkbox">
        <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
        <span data-i18n="Set this page as the home page"></span>
    </div>
</div>