Keeping within Divs

UI Components for Vue
Post Reply
c-myers1
Posts: 18
Joined: 23 May 2016, 23:13

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?

mert.sincan
Posts: 4484
Joined: 29 Jun 2013, 12:38

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,

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest