sub menu drop down content...

User 10077 Photo


Senior Advisor
1,038 posts

Jamie wrote:
Basically, on a drop down sub menu if you set the width to 100% with padding, content overflows the background as you can see in this example http://notjusttalking.co.uk.cp-15.webhostbox.net/ - if you hover over 'publications' you will see that they have got really long nav points. (I appreciate that these nav points are pretty horrible but its dynamic and the client is in 'control' but even if they were shorter, the same would be happening.)

I've run into this. Set the submenu size to more than 100%.
http://uscni.biz/coffeecup/mb_submenu_menusize.jpg
I usually just keep making the submenu size larger until it fits the submenu button.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 187934 Photo


Senior Advisor
18,728 posts

#menuBuilder #nav ul li ul li.submenus_items {
background-color: #7f643b;
border-color: #767777;
border-style: none;
border-width: 0;
margin-left: 0;
margin-right: 0;
padding-left: 1%;
padding-right: 1%;
padding-top: 0;
width: 100%; //Adjust this to 110% and the wide view looks good.
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 78051 Photo


Registered User
199 posts

Thanks to you both Brian and Eric, I had tried that myself before but the problem with that is that the drop shadow (if used) gets cut off from the right hand side as per the atatched screenshot.

Any suggestions to compensate this please?
Attachments:
User 78051 Photo


Registered User
199 posts

Eric Rohloff wrote:
I didn't say it would fix it as is. I was focused on the dynamic part which is ultimately the biggest problem. If the content is going to change you need a script to make changes to the css for you. How do you want the data to look? The long narrow boxes are fine as long as all of the text is confined?


Re this Eric, thank you and yes I appreciate your comment (as well as your input). I suppose my point was what to have the css do under certain conditions. I have tried, without success, to get the long line to wrap within a specific fixed width drop down but the content just rides off into the sunset on the right hand side! :S

How would you go about wrapping the text within, for example, a drop down that is 300px wide?
User 187934 Photo


Senior Advisor
18,728 posts

Lets clarify the dynamic part.
What is setting the text for the menu?
Is it a csv, or txt file or a mysql database?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 78051 Photo


Registered User
199 posts

Eric Rohloff wrote:
Lets clarify the dynamic part.
What is setting the text for the menu?
Is it a csv, or txt file or a mysql database?


mysql db
User 187934 Photo


Senior Advisor
18,728 posts

Give this a try.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {

var max_length1 = -1
$('#menu_2_sub_1 .text_menu_link').each(function() {
max_length1 = Math.max(max_length1, $(this).text().length);
if(max_length1 > 90){
max_length1 = max_length1 + 170}
});
alert(max_length1);
$('#menuBuilder #nav ul #submenu_menu_2').width(max_length1 + "%");
;

var max_length2 = -1;
$('#menu_5_sub_1 .text_menu_link').each(function() {
max_length2 = Math.max(max_length2, $(this).text().length);
if(max_length2 > 90){
max_length2 = max_length2 + 120}
});
$('#menuBuilder #nav ul #submenu_menu_5').width(max_length2 + "%");


});
</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 78051 Photo


Registered User
199 posts

thanks Eric but it doesnt appear to make any appreciable difference. have added it to this page fyi http://bit.ly/1yPu2Lj
User 187934 Photo


Senior Advisor
18,728 posts

I don't see it on there.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 78051 Photo


Registered User
199 posts

Its definitely there... starts at line 303/304

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.