Hello
I am having an question about responsiveness within traditional web.
So I want to know how I can have a solution for the following issue.
I have a menu on top of my application which has 7 items. 6 are always visible and 1 has role based visibility. 3 are visible on itself and 3 are visible in a "other" tab to fit the screen. On my laptop screen it fits perfectly but when I watch the site on a larger screen there is quite a huge gap after other.
There is need to not have this gap there. Is there a way to get rid of the gap?
So basically what is needed is to have some CSS rule that lets you configure how many are in the "other" tab and how many are visible?
If more info is needed let me know!
Any help/tips are appreciated :)
Kind regards
Simon
Hi Simon,
A picture is worth a thousand words. Any UI related issues must serve better explanation if you throw a sample URL (if you're not willing to provide your app URL).
At least a picture of it would be okay to start some discussion on understanding the issue and figuring out a probable solution. A URL can be perfect since we can inspect it from the developer console on the browser and guide you what exact CSS / element to change for fixing the issue.
I'll be more than happy to help if you can provide a URL that I can test and fix.
@Naveen N
@Ravi Punjwani
So I had to quickly recreate something similar in my personal.
URL is here --> https://personal-m16q2gqy.outsystemscloud.com/test/Entry1.aspx?_ts=638046363810840598
OML is attached.
I would like to either have them resized somehow or a way to configure them so they are pushed into the other tab. I assume I can fetch screensize and hardcode on that but that does not seem like a good option.
@Simon Vandersmissen If you attach a oml , I can provide you an example.
(max-width:1280px;)
@Simon Vandersmissen As you needed , mostly in all the web based application they will follow to keep the contents at the center with a max-width: 1280 or 1200 or 1140px; Even if you check the outsystems you can understand how they are keeping the menu's even if your screen resolution is 4000 *700
If you don't want to make like this , you can make the width of the menu's as auto with inline-flex so it will stick near by.
Dear @Simon Vandersmissen There is no issue in the oml you attached, everything is working fine.Even in larger resolution , there is no gap. You can aslo check it from your end.
Ill say it differently they want to have items inside of the menu-bar instead of inside other if there is enough room for it. So if there is enough room there would be no other. Is this possible? Sorry for the confusion.
@Simon Vandersmissen I think you are looking for this , correct me if i am wrong
@Simon Vandersmissen I have attached your oml with these changes , I have used only css. you can modify it as per your requirement.
@Simon Vandersmissen If you want to apply these things for the larger resolution only means you can use media query to apply this css to specific resolution.@Simon Vandersmissen Attached a link for your reference -- (media query) https://www.w3schools.com/css/tryit.asp?filename=trycss3_media_queries1
Hi,
Only with css i think that's impossible.
I've attached an oml with a little implementation of js code.
This is the full width
If i resize the screen this is the final effect:
The main point of the solution:
The oml is only a PoC, its handle only when the menu is rendered. For a real scenario you must also handle the resize event of the window.
Br,
AL