Commit 423232b2 authored by Ivica Puljic's avatar Ivica Puljic Committed by Ivica Puljic
Browse files

Issue #3225809 by pivica: Floating labels views exposed filter labels wrong horizontal position

parent 0e746fbf

themes/bs_bootstrap/sass/components/partials/_floating-labels.scss

+0 −13
Original line number Diff line number Diff line
@@ -258,19 +258,6 @@ 
    color: $input-placeholder-color;

    font-size: $floating-label-description-font-size;

  }



  // Form inline groups have inline flex grid system with negative margins and

  // we need to take this into consideration for label left position.

  // @see components/partials/_forms.scss .form-inline-group rules.

  &.form-inline-group {

    .form-group--floating-label {

      label {

        @include media-breakpoint-up(sm) {

          left: calc(#{$input-border-width} + #{$input-padding-x - $floating-label-active-padding-x + $form-inline-group-gutter/2});

        }

      }

    }

  }

}



// Bootstrap resetting for inputs groups is not working because of custom

themes/bs_bootstrap/sass/components/partials/_forms.scss

+15 −9
Original line number Diff line number Diff line
@@ -480,7 +480,7 @@ details { 
    width: 100%;

  }



  @include media-breakpoint-up(sm) {

  @include media-breakpoint-up('sm') {

    display: flex;

    flex-wrap: wrap;

    // Make sure that all items are bottom aligned.
@@ -510,25 +510,31 @@ details { 
      }

    }



    // @TODO - not sure why are we even supporting case where details can be

    // inlined - do we have this kind of a case in views exposed filters or

    // somewhere else? Consider to remove this in future.

    > details.form-group {

      flex: 1 0 100%;

      // We need to dynamically lower width for one $spacer unit because details

      // have border on it.

      max-width: calc(100% - #{$form-inline-group-gutter/2});

      margin-right: $form-inline-group-gutter/4;

      margin-left: $form-inline-group-gutter/4;

      max-width: calc(100% - #{$form-inline-group-gutter});

      margin-right: $form-inline-group-gutter/2;

      margin-left: $form-inline-group-gutter/2;



      summary {

        margin-right: -$spacer/2;

        margin-left: -$spacer/2;

        margin-right: -$form-inline-group-gutter/2;

        margin-left: -$form-inline-group-gutter/2;

      }

    }



    .details-wrapper {

      display: flex;

      flex-wrap: wrap;

      margin-right: -$form-inline-group-gutter/4;

      margin-left: -$form-inline-group-gutter/4;

      // Full negative gutter because we have also left/right padding of inner

      // form-groups.

      margin-right: -$form-inline-group-gutter;

      margin-left: -$form-inline-group-gutter;

      // Reset bottom margin that is coming from inner form-groups.

      margin-bottom: -$form-group-margin-bottom;



      .form-group {

        @include media-responsive-breakpoint-up() {