Solved

AttributeFilter width in GD.UI

  • 24 April 2022
  • 5 replies
  • 63 views

  • Participating Frequently
  • 5 replies

We would like all AttributeFilters in our GD.UI app to be the same width, and not have each filter’s width vary by its label width.

I’ve tried wrapping the AttributeFilter in div tags and adding a style param, but no dice.

Thinking I may have to dig deeper into the css inside the AttributeFilter such as .gd-button-primary .gd-button-text or another class, I was able to edit those in chrome’s developer tools, and that did change filter widths. However, i tried editing the main.css file, but that also did not change the width.

I would really prefer not to change main.css, actually, and set the filter widths wihin the .js file for this page itself. I searched on google how to override css styles and classes inline in js, but I couldn’t find any help.

icon

Best answer by Jan Rehanek 25 April 2022, 19:16

View original

5 replies

Hello Shambo,

Have you tried defining this sort of wrapping element for the filter buttons?

<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, 150px)", height: 200, width: 500 }}>
<AttributeFilterButton ... />
<AttributeFilterButton ... />
...
</div>

gridTemplateColumns: "repeat(auto-fit, 150px)" will set each of its child buttons to 150px and fit as many of them as it can in a single row depending on the defined width.

In this case, the width is defined to 500, so it could fit 3 buttons, placing the next one on a new row.

This works with AttributeFilterButton, but not AttributeFilter it seems.

I added a border in the div style so we can better see.

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, 150px)", height: 130, width: 150, border: "5px", borderStyle: "double" }}>

When using AttributeFilterButton, each filter is keeping its width to 150px as spec’d in the style.

 

But when using AttributeFilter, the longer text of the 2nd filter is extending the filter width. Also, the 1st filter is not being stretched to fit 150px:

 

When the filter boxes are jagged/not the same width, internal leadership is not able to look past that “messiness” and focus on the enhanced functionality GD.UI brings vs Pixel Perfect dashboards.  

Hi Shambo,

There might be something going wrong here with the <button> width definition that I would like to follow up with our engineering. In the meanwhile, I have a bit of hacky way to help with your immediate problem.

What we need to do is to make sure that all buttons that are descendants of the grid div are constrained to 100% of their available space. A way to do this would be to define a separate CSS file for the JavaScript file that you use, like below:

In there, we define the following class that marks all descendant buttons as width: 100%. You can also use the !important keyword to give it precedence, but this should not be necessary:

.button_container button {
width: 100% !important;
}

This you can then import into the JavaScript file and add this class to the grid div with className={style.button_container}

import style from "./Home.module.css"

<div className={style.button_container} style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, 100px)", height: 200, width: 500}}>
<AttributeFilter ... />
<AttributeFilterButton ... />
<AttributeFilterButton ... />
...
</div>

The result should be this:

The alignment can then be adjusted using Grid justify-content, justify-items, align-content, and align-items CSS properties (depending on what you want).

Thank you so much for this workaround! It works perfectly!

That is good to hear 🙂

I have marked this behaviour as a bug internally. Once it is patched and the workaround is no longer needed, I will update this thread as well.

Reply