Height of the Page not Dynamic

[Ivo._. Pires]

Hi Everyone,

Sorry if this topic has been discussed before but I haven't found anything related.

I am working on a project where i need to design tabs of different heights for a menu (dinner, lunch, drinks, etc). Each target area is a different size and I am left at times with almost 1000px of empty space.

I'm using the tooltip widget as it's the only one that allows me to have different target area sizes.

What I need is a widget that behaves like a composition widget (trigger - target) but also like an accordion (pushes of retracts the content bellow).

Does someone have a creative solution to tacle this issue or a third party widget or even a code I can put in the header that will make the page contract when there is no object in the body.

Thanks guys

Ivo.

[Preran]

Not really the answer to your question, but you can have a look at some of the widgets on this site to see if any of them meets your purpose.

https://musewidgets.com/search?q=accordion

[fotoroeder]

Depends on your content of your target. If it is text, there´s a free widget for scrollable textboxes.

Adobe Muse Scrolling Text Boxes Widget | MuseThemes.com​

Does this help?

Uwe

[Ivo._. Pires]

Hi Footroeder, thank you for taking the time to respond

I have thought of this option too and I found a few widget that allow me to do it but I'd rather not use this one as I don't like to have hidden content and it can be really confusing for people to have two different scrolling parts so I'd like to avoid this option if possible.

Basically here is the concept link on invision: Loading...

When you toggle between lunch and dinner (only two that work on the concept) there is almost 1000px difference which results in 1000px of empty space for the smaller one and it is way to much specially when you have a call to action bellow.

If anyone has any idea I would appreciate greatly.

ps: excuse my spelling I am french and wasn't very good at english in scoll

[fotoroeder]

The biggest disadvantage / mistake, they do not use text but pixelated pictures from text. At smaller size not readable.

It only shows, there´s no easy solution.

If you want get help, show us a screenshot of what you want to achieve – of you have more time, show us a please very reduced one page .muse.

Your invasion has no solution.

[Ivo._. Pires]

Hi Preran thank you for taking the time and respond. But I am not really looking for an accordion. It's more a tabed menu but I would love for it to behave like an accordion so when a smaller target is selected the bottom of the page (left with empty space) retracts and when a longer target is active it's pushing the content down.

Any Ideas?

Thank you

[Ivo._. Pires]

Hi Footroeder, thank you for taking the time to respond

Please find below an example of what I was talking about:

Menu

if you click on the different submenus (lunch-diner-set menu-etc) you will see that the target size changes for each ones.

The shorter ones (lunch-burgers-etc) create a massive empty space to the bottom of the page.

How can I shrink the page when those are selected ?

Thank you.

[fotoroeder]

I can follow you. I see the issue you are talking about.

Yes, the only way by now would be to use an accordion – this pushes down content.

As of this reading I was not able to find something else with scaling content boxes.

[Ussnorway]

I would use a lightbox but if you relly want a news-comp then demo page = dinner

[Ivo._. Pires]

Hi Ussnorway,

I think the lightbox won't solve the issue in all fairness as it will stretch the page anyway to fit the content.

I'm not sure what you use in your video but I don't see the height of the page being dynamic. Could you explain a bit more in detail?

[Ussnorway]

My mock up has a box to push the page down to 2000 px

So everyone is on the same page ... Html the basics;

Dynamic height = expand to fit all the content

Lightbox = defaults to scroll so a user can see extra content

News-com = cut the display at the max size but the extra content is still there (just not displayed)... The idea is a user that wants all of it can send to printer.

Accordion = expanded list but this is older code that causes issues with devices like phones.

Lightbox and news are both a type of composition widget and the target counts as its own page i.e, the target is dynamic height | independent of the actual page under it.

Your design options are therefore; use a expanded list and assume no devices but desktop, use a lightbox and have a scroll, use a news and have the display cut off | or the page under has something to full the blank space... Images, a blog and just black color are all the same result.

Use a cms (like publiz) to feed the content into your div... This adds complexity but is dynamic height

Imo its worth exploring the option of widget within widget so instead of a dinner with 4 sets totalling 2000 px you could split that into just 'main' with desert, soups etc as sub-menus as has already been touched on but the rules allow it

[Ivo._. Pires]

Hi Ussnorway,

Thank you for taking the time to respond.

Your answer is really helpful but doesn't solve the problem.

On the targets that are shorter due to the shorter content we are left with a lot of empty space. The page itself doesn't resize to fit the content.

I think I will have to break down the content on more tabs like you suggested and try to have targets that are the same size so I'm not left with a lot of empty space.

It's a shame it sounds like a simple issue to solve and the accordion widget does it well. I would have thought that the composition widget would have this capability too but it's not the case.

I'd be interested to know if a widget is released in the future that combines the composition widget with the dinamic capabilities of the accordion widget.