The Joomla!® User Experience Portal

Welcome, Guest
Username Password: Remember me

Readability - labels should be the same width, buttons lined up etc.
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Readability - labels should be the same width, buttons lined up etc.

Readability - labels should be the same width, buttons lined up etc. 9 months, 1 week ago #992

  • bgies
  • OFFLINE
  • Posts: 1
  • Karma: 0
I found the layout in the admin a little hard to read (especially in
Articles) because the buttons were not lined up, but otherwise the admin
template looks good.

Adding the following in the /administrator/templates/isis/index.php
makes it much easier to read, but the actual label should also be set to
the same width and text-align to right. Also, it would be great to have the
buttons the same width.

Note that the script below only fixes the width's for ".editinglayout" groups, and I noticed some of the forms use fieldset's with different classes, so this is probably not the fix for everything, but it should at least show the difference.

The script below just goes through all .control-group and re-sizes the
.control-label to be consistent.

<script type="text/javascript">
jQuery.noConflict();

// find the max width for all the labels on the form and set
them all to that size for some uniformity.
var maxw = 0;
$("#editinglayout").each(
function () {
maxw = 0;
$(".control-group .control-label", this).each(
function () {
if ($(this).width() > maxw) {
maxw = $(this).width();
}
});
$(".control-group .control-label", this).width(maxw);
}

</script>
  • Page:
  • 1
Time to create page: 0.40 seconds