Portlet dropdown issue

[Narasimha A]

Hi, I am new to the uPortal framework. Currently, I am using the latest version of uPortal. 

I have developed a portlet that contains a dropdown country list. 

Based on screen size, Dropdown options are going underneath of original portlet size. How to solve this problem?

and also I don't want to give extra width size for the right-aligned dropdown box (like above screenshot) in the portlet. 

Could you please help on this?

[Christian Murphy]

Welcome to the uPortal Community!

Without seeing the code, the resulting page, or seeing a mock up for what you want it to look like, it's hard to tell.

Some information that could help with giving guidance:

1. What you mean by "Dropdown options are going underneath of original portlet size"
2. What the expected behavior would be
3. The HTML/DOM used to create the drop down
4. Any custom styles (css/sass) being applied to the portlet
   
5. Around what pixel length of the screen positioning changes
6. What version of uPortal you are working with

Best Regards,

Christian Murphy

--
You received this message because you are subscribed to the Google Groups "uPortal Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to uportal-user...@apereo.org.
To view this discussion on the web visit https://groups.google.com/a/apereo.org/d/msgid/uportal-user/97226f95-26b7-4954-9008-c8f5097d898d%40apereo.org.

[Michael Vose]

Hello,

 

The drop downlist looks like it is coming from a user interface library, or it has been styled a lot via css. If you are using a user interface library then the api should have the answers you are looking for.

 

A simple solution which should work would be utilising a max-height on the parent dom element the country list is within at a certain screen size. It should not effect mobile devices (such as an apple).

 

In terms of the extra width – I would suggest using the max-width property.

 

Kind Regards.

--

[Narasimha A]

Hi Christian,

please find the below mock-up screens, you will get a better idea.

1) A portlet has been created with dropdown country list

2. After clicking the dropdown box, you could see the list of countries like below screenshot

3. You might have noticed the full dropdown country list was not shown initially, After the scrolling down list, Still, the top list is hiding under portlet.

How to solve this dropdown problem? My expectation here full dropdown list should show.

And also I noticed another problem with the dropdown list.

I have two portlets in the Tab. 

First portlet dropdown list channel contains width 18% and the second portlet channel contains a width 78%  like below screenshot

After clicking drop-down, you could see the half of the drop-down list inside the portlet  

How to make dropdown list should appear on top when working with two portlets?

 

1. What you mean by "Dropdown options are going underneath of original portlet size" (~Like above screenshots)
2. What the expected behavior would be (~it must show all drown down list after clicking the drop-down button, and it should be responsive)
3. The HTML/DOM used to create the drop down (~used Bootstrap vue css  https://bootstrap-vue.js.org/docs/components/dropdown/) 

1. Any custom styles (css/sass) being applied to the portlet
   
2. Around what pixel length of the screen positioning changes 

1. What version of uPortal you are working with (github  (~ 5.0.0-SNAPSHOT)

Regards,

Narasimha

On Tuesday, January 21, 2020 at 11:44:54 PM UTC+1, Christian Murphy wrote:

Welcome to the uPortal Community!

Without seeing the code, the resulting page, or seeing a mock up for what you want it to look like, it's hard to tell.

Some information that could help with giving guidance:

1. What you mean by "Dropdown options are going underneath of original portlet size"
2. What the expected behavior would be
3. The HTML/DOM used to create the drop down
4. Any custom styles (css/sass) being applied to the portlet
   
5. Around what pixel length of the screen positioning changes
6. What version of uPortal you are working with

Best Regards,

Christian Murphy

On Tue, Jan 21, 2020 at 3:23 PM Narasimha A <narasim...@gmail.com> wrote:

Hi, I am new to the uPortal framework. Currently, I am using the latest version of uPortal. 

I have developed a portlet that contains a dropdown country list. 

Based on screen size, Dropdown options are going underneath of original portlet size. How to solve this problem?

and also I don't want to give extra width size for the right-aligned dropdown box (like above screenshot) in the portlet. 

Could you please help on this?

--
You received this message because you are subscribed to the Google Groups "uPortal Community" group.

To unsubscribe from this group and stop receiving emails from it, send an email to uporta...@apereo.org.

[Christian Murphy]

Thanks Narasimha,

As Michael mentioned this appears to be custom styling rather than an issue being cause by uPortal itself.

Some pointers that may help:

• In the second and third screenshot, the issue appears to be content overflow, with overflow set to hidden.
  For this manually setting the height or setting overflow to visible should resolve the issue
• In the fifth screenshot width and overflow hidden are causing the issue.
  Consider setting overflow to visible on the wrapping element or changing the layout to give the component more space.
• You mention you are using bootstrap-vue, it's a nice library, something to be aware of.
  Bootstrap vue expects to be used with Bootstrap 4, uPortal bundles Bootstrap 3, the two major versions have some styles that can conflict.
  If you want to use both on the page, consider making the content into a vue web component, the process is described in this guide https://github.com/uPortal-contrib/uPortal-web-components/blob/master/docs/en/developer/create-web-component/VUE.md
  Web components can isolate styles in a Shadow DOM, which allows styles to work in isolation without conflicting with other framework versions/styles on the page.
  
• You also mention uPortal 5.0.0, uPortal has had several releases since then that include style and accessibility enhancements.
  It may be worth updating to the latest version (at the time of writing 5.8.1).

Best Regards,

Christian Murphy

To unsubscribe from this group and stop receiving emails from it, send an email to uportal-user...@apereo.org.
To view this discussion on the web visit https://groups.google.com/a/apereo.org/d/msgid/uportal-user/77f813ba-c54a-4078-9d50-d3f83af1d595%40apereo.org.