[Resolved] Edit the width of dropdown field in Toolset View

[Author]

Posts

[dianeM]

Hello,

I would like to make the width of the fields of my dropdown menu way shorter.

So far, they look like this: hidden link

They are full width and I cannot find the setting option in Toolset View.

Kindly advise.

Thank you,
Diane

[Christopher Amirian]

Hi Diane,

Welcome to Toolset Support. The search form items take up their container width and by having a correct parent container they should work ok.

But I noticed that you have a custom CSS code in:

hidden link

The CSS code below causes the whole container not to respect the padding:

.page-full .alignfull, .page-full .alignwide {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
}

If you remove that code you will see that the container is respected when it comes to the search form items.

Thanks.

[dianeM]

Hello Christopher,

Thank you for your prompt response.

I've removed the CSS code but the fields containers are still full width on the page. I've also tried deleting them and adding them again but it did not work.

Could you please further assist?

Thanks,
Diane

[Christopher Amirian]

Hi Diane,

Now that you have a clean slate you can use custom CSS code to adjust the width such as:

.js-wpv-filter-form-4283 select {
	width: 50%;
}

You also can make the container be centered using a CSS code like this:

.js-wpv-filter-form-4283 {
	display: flex;
	justify-content: center;
}

.js-wpv-filter-form-4283 select {
	width: 100%;
}

Thanks.