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>
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">
<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>