Customize BP:DropDownList Content Width

🌎 Discussion in English
1

I have a BP DropDownList on my page that is used to control how many items are in each GridView page. I am trying to figure out how to customize the width of the control on the page. The default min-width is way too wide.

image

This page helped but does not fully answer the question: Customize Business Pack theme

I have overriden the
--bp-form-item-width: 14em;
value with
--bp-form-item-width: fit-content;
for just the control in question by adding a CSS class to that element.

However, I cannot figure out how to make the list items use a more reasonable width.

image

How do I make the list width be at or near the same width as the parent control?

Thanks

2

I found a way to do do it but I don’t know if it’s the best/proper way.

Here is my current CSS code:

<style type="text/css">
    .SelectPageSizeDDL {
        --bp-form-item-width: fit-content;
    }
    .SelectPageSizeDDL .dotvvm-bp-state_opened{
        min-width: fit-content !important;
    }
</style>

And this is the result:
image

Is there a better way to do this?

3

I’ve discussed this with the Business Pack team, and this method seems to be the easiest.
We are thinking of making this behavior the default in future versions of the Business Pack - it looks more reasonable.

1 Like
4

Really appreciate the follow-up and feedback.