Portlet dropdown issue

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Portlet dropdown issue

Narasimha A

Screenshot 2020-01-21 at 23.13.11.png

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 [hidden email].
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.
Reply | Threaded
Open this post in threaded view
|

Re: Portlet dropdown issue

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


On Tue, Jan 21, 2020 at 3:23 PM Narasimha A <[hidden email]> wrote:

Screenshot 2020-01-21 at 23.13.11.png

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 [hidden email].
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.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/a/apereo.org/d/msgid/uportal-user/CA%2B_Nns8uXSCFi2zxjpR5RdbuJyHNboEMJHsju%2BNNgvD%2BvYeBhQ%40mail.gmail.com.
Reply | Threaded
Open this post in threaded view
|

RE: Portlet dropdown issue

Michael Vose
In reply to this post by Narasimha A

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.

 

 

From: [hidden email] <[hidden email]> On Behalf Of Narasimha A
Sent: 21 January 2020 22:23
To: uPortal Community <[hidden email]>
Subject: [uportal-user] Portlet dropdown issue

 

Screenshot 2020-01-21 at 23.13.11.png

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 [hidden email].
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.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/a/apereo.org/d/msgid/uportal-user/8101274935D1404CB043C91026BC5353012B0201AF%40MBXP03.ds.man.ac.uk.
Reply | Threaded
Open this post in threaded view
|

Re: Portlet dropdown issue

Narasimha A
In reply to this post by Christian Murphy
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

Screenshot 2020-01-22 at 14.10.28.png


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


Screenshot 2020-01-22 at 14.10.39.png


Screenshot 2020-01-22 at 14.30.43.png





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

Screenshot 2020-01-22 at 15.11.01.png






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

Screenshot 2020-01-22 at 15.12.04.png




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/
  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 (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 <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="uN9JDbNgEAAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">narasim...@...> wrote:

Screenshot 2020-01-21 at 23.13.11.png

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 <a href="javascript:" target="_blank" gdf-obfuscated-mailto="uN9JDbNgEAAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">uporta...@apereo.org.
To view this discussion on the web visit <a href="https://groups.google.com/a/apereo.org/d/msgid/uportal-user/97226f95-26b7-4954-9008-c8f5097d898d%40apereo.org?utm_medium=email&amp;utm_source=footer" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://groups.google.com/a/apereo.org/d/msgid/uportal-user/97226f95-26b7-4954-9008-c8f5097d898d%40apereo.org?utm_medium\x3demail\x26utm_source\x3dfooter&#39;;return true;" onclick="this.href=&#39;https://groups.google.com/a/apereo.org/d/msgid/uportal-user/97226f95-26b7-4954-9008-c8f5097d898d%40apereo.org?utm_medium\x3demail\x26utm_source\x3dfooter&#39;;return true;">https://groups.google.com/a/apereo.org/d/msgid/uportal-user/97226f95-26b7-4954-9008-c8f5097d898d%40apereo.org.

--
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 [hidden email].
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.
Reply | Threaded
Open this post in threaded view
|

Re: Portlet dropdown issue

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

On Wed, Jan 22, 2020 at 7:16 AM Narasimha A <[hidden email]> wrote:
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

Screenshot 2020-01-22 at 14.10.28.png


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


Screenshot 2020-01-22 at 14.10.39.png


Screenshot 2020-01-22 at 14.30.43.png





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

Screenshot 2020-01-22 at 15.11.01.png






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

Screenshot 2020-01-22 at 15.12.04.png




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/
  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 (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 <[hidden email]> wrote:

Screenshot 2020-01-21 at 23.13.11.png

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 [hidden email].
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.

--
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 [hidden email].
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.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/a/apereo.org/d/msgid/uportal-user/CA%2B_Nns_j4MVTwZwa77EbusuQXZeZUrA-N5OLGZ-NC0DUpTBnkA%40mail.gmail.com.