Responsive content width for EasySocial Dropdown Menu
By Supporter on Thursday, 26 January 2017
Posted in General Issues
Replies 17
Likes 0
Views 713
Votes 0
Hello,

I have an issue with the module EasySocial Dropdown Menu.
With a multilingual website the length of the menu items change but the dropdown menu container is fixed.
The dropdown container width is based on the username length.
When a username is short then the dropdown container is too narrow for some menu names inside it.

Can you please explain how make the dropdown container width related/responsive to the wider menu items length that varies from one language to an other.
Not really sure what you mean here. Can you please provide us with some screen shots please?
Mark
·
Thursday, 26 January 2017 00:34
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mark,

The width is related to the length of the specific language Greetings + Username length

In the following examples you can notice the dropdown container is too small in both languages (but not for the same menu items)
Supporter
·
Thursday, 26 January 2017 00:45
·
0 Likes
·
0 Votes
·
0 Comments
·
I have created a ticket for this issue internally and we'll address this in the next release.
Mark
·
Thursday, 26 January 2017 23:27
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi,

Sorry for the late reply as I have missed your ticket previously. Can you please provide me your site details and also the URL to this page as I could not replicate this issue in my end. Thanks.
Eugene Chew
·
Monday, 13 February 2017 11:08
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi again,

I managed to replicate your issue and apply the necessary fix (screenshot below) in our next 2.0.11 release.

https://screencast.com/t/v5pv4kZGL
Eugene Chew
·
Tuesday, 14 February 2017 16:38
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Eugene,

1.
Your fix is creating a second line but the menu links are then not very clear/readable
It would be better that the box expands to keep one line per item...

2.
There is a similar issue in easysocial dropdown menus on the right handside of some functionality pages.
I cannot list them all, the attachment is an example in the video page
Can you please also fix these ones with a standard collision horizontal flip to the left?
Supporter
·
Tuesday, 14 February 2017 20:14
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi,

Your fix is creating a second line but the menu links are then not very clear/readable
It would be better that the box expands to keep one line per item...

If you plan to keep one line per item in your profile dropdown sccording to your screenshot, you need to apply this codes below in your custom.css



#es.mod-es-dropdown-menu .dropdown-menu-full {

    left: auto;

    right: 0;

}

#es.mod-es-dropdown-menu.is-mobile .dropdown-menu-full {

    left: 0;

    right: 0;

}


There is a similar issue in easysocial dropdown menus on the right handside of some functionality pages.
I cannot list them all, the attachment is an example in the video page


We will apply the necessary fix on the next 2.0.11 release

Can you please also fix these ones with a standard collision horizontal flip to the left?

Sorry, i do not get what you mean. Can you provide a screenshot or elaborate it further?
Eugene Chew
·
Wednesday, 15 February 2017 13:04
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Eugene,

I tested your code, it has no effect at all.
In fact, the width of the dropdown box is related to the username length.
A short username will create a small dropdown width

About the collision flip for all other ES menus:
I guess these menus will need the same fix as the dropdown menu module
Supporter
·
Wednesday, 15 February 2017 16:53
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi,

I could not replicate your issue. Look at the screenshots below using a short and long username.

As you can see, we have a minimum width for the dropdown and it should not go narrower than the width, I suspect there may be a conflict in the css files of other plugins you installed?

https://screencast.com/t/2CNxbpXY
https://screencast.com/t/GiM66cMP

Can you provide us with your Joomla backend and FTP access at http://stackideas.com/dashboard/site so we help you check your issue now?
Eugene Chew
·
Wednesday, 15 February 2017 17:35
·
0 Likes
·
0 Votes
·
0 Comments
·
Please connect to the FRONT-END to see the issue
Site details have been updated
Supporter
·
Wednesday, 15 February 2017 18:00
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi,

I already checked on your website and when i load your website noticed that your site is loading the compiled css, that may be the reason when you insert the custom css i provided it would not work. You need to compile the css again from your current template after you apply the custom css I provided below



#es.mod-es-dropdown-menu .dropdown-menu-full {

    left: 0;

    right: auto;

}


If you apply the custom fix, it will look as the screenshots below

https://screencast.com/t/MZ59uJcBGt
https://screencast.com/t/6AOgoojlQ
https://screencast.com/t/oWuftxpiOa
Eugene Chew
·
Wednesday, 15 February 2017 18:55
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you Eugene it is working with this custom code.
Wouldn't it be better to add this in the core as I am surely not the only one using multilingual ?
Supporter
·
Wednesday, 15 February 2017 20:57
·
0 Likes
·
0 Votes
·
0 Comments
·
This should have already been added in 2.0.12. Are you still having this issue after updating to 2.0.12 ?
Mark
·
Wednesday, 15 February 2017 22:00
·
0 Likes
·
0 Votes
·
0 Comments
·
This should have already been added in 2.0.12. Are you still having this issue after updating to 2.0.12 ?

This issue is still going on since ... 2017
I tried to remove the custom code but still have to keep it in the custom CSS
Supporter
·
Friday, 24 September 2021 14:26
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey there,

This issue is still going on since ... 2017
I tried to remove the custom code but still have to keep it in the custom CSS

Perhaps you can start a new thread on our forum and describe the following details again since this issue was already 4 years ago.

1. How to replicate this issue on your site? It will be helpful if you can include some of the screenshots.

2. Which custom CSS you added to your site?

Thanks for understanding.
Arlex Wong
·
Friday, 24 September 2021 15:35
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post