NO BUG: Background color of button filters is not displayed as expected in the grid

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Hello,

As per the screenshot and structure below, I have added two radio filter elements in a grid and set background color for them. However, the background color of the filter buttons is not behaving as expected (like button elements).

{"content":[{"id":"ktgolb","name":"section","parent":0,"children":["zeetrg"],"settings":{}},{"id":"zeetrg","name":"container","parent":"ktgolb","children":["awsglw","sjpikq"],"settings":{"_direction":"row","_columnGap":"20"}},{"id":"nfaiqf","name":"block","parent":"awsglw","children":["alhqkk","ddumtt"],"settings":{"_display":"grid","_gridTemplateColumns":"1fr 1fr","_gridGap":"10"},"label":"Wrapper"},{"id":"sjpikq","name":"block","parent":"zeetrg","children":["mhzwns"],"settings":{"_width":"70%","_display":"grid","_gridTemplateColumns":"1fr 1fr 1fr","_gridGap":"20"}},{"id":"mhzwns","name":"div","parent":"sjpikq","children":["ggmcfz","davmky","jwmuju"],"settings":{"_direction":"column","hasLoop":true,"query":{"post_type":["product"]},"_rowGap":"10","_border":{"width":{"top":"1","bottom":"1","right":"1","left":"1"},"style":"solid","color":{"light":"#e0e0e0","raw":"var(--bricks-color-grey-300)","id":"3ec7f1"}},"_padding":{"top":"15","right":"15","bottom":"15","left":"15"}}},{"id":"ggmcfz","name":"image","parent":"mhzwns","children":[],"settings":{"image":{"useDynamicData":"{featured_image}","size":"large"}}},{"id":"davmky","name":"heading","parent":"mhzwns","children":[],"settings":{"text":"{post_title}","_typography":{"font-size":"18"}}},{"id":"jwmuju","name":"product-price","parent":"mhzwns","children":[],"settings":[]},{"id":"alhqkk","name":"filter-radio","parent":"nfaiqf","children":[],"settings":{"filterQueryId":"mhzwns","filterSource":"wcField","wcField":"wcInStock","wcHideOutOfStock":true,"displayMode":"button","buttonBackgroundColor":{"raw":"#f7f0f0"},"filterHideAllOption":true},"themeStyles":[]},{"id":"ddumtt","name":"filter-radio","parent":"nfaiqf","children":[],"settings":{"filterQueryId":"mhzwns","filterSource":"wcField","wcField":"wcOnSale","wcHideOutOfStock":true,"displayMode":"button","buttonBackgroundColor":{"raw":"#f7f0f0"},"filterHideAllOption":true,"wcHideNotOnSale":true},"themeStyles":[]},{"id":"awsglw","name":"block","parent":"zeetrg","children":["nfaiqf","fnyove"],"settings":{"_width":"30%","_rowGap":"20"}},{"id":"fnyove","name":"block","parent":"awsglw","children":["soieip","xbnlpk"],"settings":{"_display":"grid","_gridTemplateColumns":"1fr 1fr","_gridGap":"10"},"label":"Wrapper"},{"id":"soieip","name":"button","parent":"fnyove","children":[],"settings":{"text":"I am a button","style":"primary"}},{"id":"xbnlpk","name":"button","parent":"fnyove","children":[],"settings":{"text":"I am a button","style":"primary"}}],"source":"bricksCopiedElements","sourceUrl":"https://try.bricksbuilder.io/t8f1f855","version":"2.3.1"}

Grid filters
Grid filters409×270 6.48 KB

2

Hi @jolia,

I hope I understand you correctly; if not, please let me know. What you want to achieve is that the filters are the same width as the buttons, right?
This will not be the case here, because the filter elements are using different structure then just buttons. So I prepared a CSS fix for you, that will do just that and should solve your issue.

%root% li,
%root% .bricks-button{
  width: 100%;
}

Please let me know if you need anything else or if that’s not the fix you wanted.

Thank you,
Matej