Eui: [EuiFacetGroup] Negative margin is creating layout issues

Created on 14 Jul 2020 · 3Comments · Source: elastic/eui

In maps, I found the following issue. A horizontal scrollbar was appearing due to a negative margin from a horizontal EuiFacetGroup.

Screenshot 2020-07-13 at 22 45 53

There's a negative margin being applied on .euiFacetGroup--horizontal. This was introduced on #3639 to allow gutter adjustments. I'm wondering if there's a better way of implementing this because this negative margin might introduce more issues.

Screen Recording 2020-07-14 at 01 50 PM

bug good first issue

Source

miukimiu

All 3 comments

Hi @miukimiu, I have tried a few options but I am not sure if any of it would be a good option.

Option 1:
Change the margin-right to margin-left for both the <EuiFlexGroup> container and its children components(<EuiFacetButton>) and this will offset the <EuiFlexGroup> container to the left instead.

&.euiFacetGroup--horizontal {
      // There needs to be an additional distance between horizontal buttons to ensure
      // the number notification is closer in proximity to the text it belongs to rather than the button
      $gutterAdjustment: $euiSizeM + $gutterSize;

      // CHANGES
      margin-left: -#{$gutterAdjustment};

      .euiFacetButton {
        // CHANGES
        margin-left: $gutterAdjustment;
        // Adjust the max-width so it fits within the alloted margin
        max-width: calc(100% - #{$gutterAdjustment});
      }
}

Option 2:
Set the <EuiFlexGroup> to position: relative and left: -#{$gutterSize} and change the <EuiFacetButton> to use margin-left: $gutterSize

&.euiFacetGroup--horizontal {
      // There needs to be an additional distance between horizontal buttons to ensure
      // the number notification is closer in proximity to the text it belongs to rather than the button
      $gutterAdjustment: $euiSizeM + $gutterSize;

      // CHANGES
      position: relative;
      left: -#{$gutterAdjustment};

      .euiFacetButton {
        // CHANGES
        margin-left: $gutterAdjustment;
        // Adjust the max-width so it fits within the alloted margin
        max-width: calc(100% - #{$gutterAdjustment});
      }
}