Results 1 to 4 of 4

Thread: form-horizontal text alignment broken on col-xs media size

  1. #1
    Junior Member
    Join Date
    Mar 2016
    Posts
    4

    Angry form-horizontal text alignment broken on col-xs media size

    I can't seem to figure out why bootstrap 3 doesn't seem to render form-horizontal correctly on smaller screen sizes.

    The labels should all be right aligned (not left) and their vertical alignment should be baseline so the text lines up with the inputs.

    This does not work when rendered in mobile mode in Chrome on the "Nexus 5" device nor on a true mobile device.

    Any ideas as to what I missed / got wrong?

    http://jsbin.com/fohureloho/edit?html,output

    At 768 px wide, it suddenly aligns correctly.Below that, it left aligns.. Is this intended?
    Last edited by skewty; 03-02-2016 at 06:01 AM.

  2. #2
    Junior Member
    Join Date
    Mar 2016
    Posts
    4
    I have tried other forums and nobody seems to have a solution. Has anyone else encountered this? I am thinking of submitting a bug report.

  3. #3
    Junior Member
    Join Date
    Mar 2016
    Posts
    4
    I found the issue.. Bootstrap has this built-in:

    @media (min-width: 768px) {
    .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
    }
    }

    I simply added this to the top of my page to undo the IMO odd default:

    @media (min-width: 1px) {
    .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
    }
    }

  4. #4
    Junior Member
    Join Date
    Mar 2016
    Posts
    4

    Smile Solved

    I found the issue.. Bootstrap has this built-in:

    @media (min-width: 768px) {
    .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
    }
    }

    I simply added this to the top of my page to undo the IMO odd default:

    @media (min-width: 1px) {
    .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
    }
    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •