# \[bp:GridView Popup Filter Buttons\] How to Style?

**URL:** <https://forum.dotvvm.com/t/bp-gridview-popup-filter-buttons-how-to-style/206>\
**Category:** Discussion in English\
**Tags:** business-pack\
**Created:** [May 21, 2024, 11:34pm UTC](https://forum.dotvvm.com/t/bp-gridview-popup-filter-buttons-how-to-style/206 "2024-05-21T23:34:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![thatdbme](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/thatdbme/32/14_2.png) [@thatdbme](https://forum.dotvvm.com/u/thatdbme)\
**Post date:** [May 21, 2024, 11:34pm UTC](https://forum.dotvvm.com/t/bp-gridview-popup-filter-buttons-how-to-style/206/1 "2024-05-21T23:34:11Z")

</div>

I switched to using the Popup FilterPlacement option because it allows more flexibility in custom filtering control layout.

However, I need to change the way the filter buttons look.

_Current Appearance_

 ![image](https://forum.dotvvm.com/uploads/default/original/1X/ac46f3e548dca6ef70c9fc965fd60956ce0461f7.png)

As you can see, the wrapping takes place at non-uniform widths and it does not look good.

I would like to accomplish the following. How is this done?

1. Control when the wrapping happens
2. Change the image used to one of my choice
3. Change the size of the image used
4. Change the color/background/etc of the image

Regarding #1, I have found that I can add the following to my bp-override.css file and the wrapping behaves the same across all columns:

```auto
.dotvvm-bp-grid-view_column-header-row .dotvvm-bp-primitive_contents {
    flex-wrap: nowrap;
}

```

**How do I accomplish the above stated UI changes to make the popup filter buttons visually fit my application?**

Thanks

---

<div class="post-metadata">

**Author:** ![thatdbme](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/thatdbme/32/14_2.png) [@thatdbme](https://forum.dotvvm.com/u/thatdbme)\
**Post date:** [May 22, 2024, 10:02pm UTC](https://forum.dotvvm.com/t/bp-gridview-popup-filter-buttons-how-to-style/206/2 "2024-05-22T22:02:37Z")

</div>

I figured out how to accomplish everything on my list above except for changing the image being used.

For those wanting to do something similar, here is how I did it.

I added a class to the bp:GridView named `filter-override`.

In my CSS file, I added the following:

```auto
.filter-override .dotvvm-bp-grid-view_column-header-row .dotvvm-bp-primitive_contents {
    flex-wrap: nowrap;
}

.filter-override .dotvvm-bp-control.dotvvm-bp-drop-down-button .dotvvm-bp-button {
    --bp-color_default: #dbdbdb;
    color: #6c757d;
    border-color: #dbdbdb;
    padding: 1px 2px;
}

    .filter-override .dotvvm-bp-control.dotvvm-bp-drop-down-button .dotvvm-bp-button:hover {
        color: #25a0da;
        border-color: #25a0da;
        background-color: #dbdbdb;
    }

.hide-filters .dotvvm-bp-grid-view_column-header-row .dotvvm-bp-primitive_contents .dotvvm-bp-control.dotvvm-bp-drop-down-button {
    display: none;
}

```

This changes most of the colors of the filter icon and also reduces the padding around the image, thus making the whole thing appear smaller, taking up less space in the column header.

Hopefully this is helpful to anyone else trying to do something similar.

**I would still like to know if it’s possible to us an image or our own choosing (like a FontAwesome icon, for example).**

---

<div class="post-metadata">

**Author:** ![exyi](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/exyi/32/9_2.png) [@exyi](https://forum.dotvvm.com/u/exyi)\
**Post date:** [May 27, 2024, 5:49pm UTC](https://forum.dotvvm.com/t/bp-gridview-popup-filter-buttons-how-to-style/206/3 "2024-05-27T17:49:39Z")

</div>

Sorry for a late reply. You can use a font awesome icon by setting the `FilterIcon` on the bp:GridView to `<bp:FAIcon`:

```auto
<bp:GridView ...>
   <FilterIcon>
      <bp:FAIcon Icon="BaconSolid" />
   </FilterIcon>
   <Columns> ... </Columns>
</bp:GridView>

```

If you would want a completely custom, you’d have to implement custom `IconBase` control.  
The simplest implementation would be to simply render a glyph or an `<img` tag in the RenderContents method.

EDIT: I accidentally sent the response before I wrote it