Prime Community Forum

Posted: **08 Nov 2020, 14:12**

Lovely components but a number of them do not keep within their parent divs

Unfortunately I can't copy and paste screenshots here but examples are:

1) https://www.primefaces.org/primevue/sho ... ultiselect
If you select all the options in the country drop down and resize the browser window, you will see the items spill out instead of wrap within the containing div

2) https://www.primefaces.org/primevue/sho ... table/crud

If you resize again, text content in columns spill into neighboring columns.

I would expect these to be automatically done in a responsive framework. Is there some step I'm missing?

Posted: **12 Nov 2020, 10:09**

Hi,

Could you please try the following css code for multiselect issue?

Code: Select all

.multiselect-custom .p-multiselect-label:not(.p-placeholder) {
    display: flex;
    flex-wrap: wrap;
}

<MultiSelect class="multiselect-custom" ...>

If you resize again, text content in columns spill into neighboring columns. I would expect these to be automatically done in a responsive framework.

- You need to write custom CSS styles using @media queries for responsive. Please see the CSS styles in our demo; https://www.primefaces.org/primevue/sho ... responsive
We don't find it right to give a specific breakpoint for responsiveness. Users' templates may have different breakpoints. Therefore, users can easily set it using custom css according to their own designs.

Best Regards,

Prime Community Forum

Keeping within Divs

Keeping within Divs

Re: Keeping within Divs