Dokuwiki Bootstrap3 Page Width - css

Sorry, Doku/CSS newbie here. I am just wondering how I can change the width of the Wiki of the main page? See - https://littlesimworld.com/. The default bootstrap3 will always fill the screen.
Is there a way of giving a maximum allowed width? This is important because simply setting a fixed width is bad for mobile and mode. It needs to be set to fill the screen until a certain width is reached. When that width is reached it should stop expanding. This issue happens when viewing on ultrawide mode. In addition, the above navigation bar also needs to match the width of the page. Does anyone know how to do this? Thank you!

Fixed. Go into configuration in admin and turn on fluidcontainers.

Related

Make table control align to display width?

I can't figure out how to make my transactions fill the full width of my monitor, the width appears to be fixed, and I've got a horizontal scroll bar.
The screenshot below is from transaction ME21N, in S/4HANA, running on SAP GUI client 770, to illustrate the issue.
There's over 50% of my screen unused, which would be super-useful for this t-code and many others.
Does anyone know what I need to do to "fix" this?
I have tried all the available themes, and can't seem to find any setting to modify this.
Thank-you in advance! :)

Mobile device header going beyond width of viewport

There is this site that if you view it on a mobile device (iPhone 6), you're able to drag the page to the left and there's this huge, open, gap. I'm not able to figure out what's causing this. Based on Browserstack's findings (maybe it's a bug?), this tends to cause (on the home page with iPhone 6/6+) device to lose the mobile menu (which should be on the top right).
Is someone able to see what's causing the width to expand beyond the viewport's size? or is this a bug?
I have found that it was caused by an animation script. When an element was set up to animate to come from the right, the margin scripted was causing the right margin to extend.

100% Heights vs Browser Zoom

I've looked and there doesn't appear to be another post the is exactly what I am looking for, and I am on a deadline to make this work so lets see if I can explain it better.
We have one page in development on a Drupal site that uses Panels and Views Slideshow. There are a lot of absolute and fixed position elements because of where they need to be on the page. The parent div needs to have a width and height of 100% to fill the page. Keeping in mind that the point of this page is to not have scrollbars and present everything to the user no matter what screen size they are on. So I have media queries cleaning up elements where need be on certain screen sizes.
Though when a user uses their browser to zoom into the page, the elements start shifting and stacking on top of each other. I believe this is because the 100% height/width is adhering specifically to the window size and doesn't expand beyond the window when a user zooms in.
I was able to fix it by removing the 100%'s and replacing them with pixels, but this becomes an issue because if the screen isn't the correct height or width, then you have scrollbars and the user doesn't immediately see everything on the page.
Is there any JavaScript or anything that can utilize the 100% height/width and allow them to expand beyond the page, and turn on scrollbars, during Browser Zoom?
Keep in mind that if a user is zooming in, its OK for the page to spill off and scrollbars to show, but the default screen this is not allowed.
I hope this is OK to show but an example of a page that uses Javascript to scale the entire page is pretty much what I can see myself needing but don't know how.
http://www.ammunitiongroup.com/
Any help appreciated and the quicker the better of course :)
This should help. Lets you detect the browser zoom level in mordern browsers.
https://github.com/yonran/detect-zoom
Example page:
http://htmldoodads.appspot.com/dimensions.html

CSS - restricting the container to the height of the browser window (viewable area)

All,
I am writing the CSS for our web application. The whole application needs to fit in the browser window without any scrollbars appearing. I also want to set a min-height & min-width properties so that if the browser window gets smaller than our min., only then will the scroll bars appear.
Is there a way of achieving this in CSS please?
Your problem depends to the screen size of the viewers, which may varies greatly. My propose is that you should create a fix width/height div which is the wrapper of all the content (usually 1024x768).

Height adjustments in Flex NavigatorContent

How is it possible to (automatically) adjust the height of a Flex (4) application at runtime so that only the HTML-page scroll bar is shown, not any Flex scroll bar?
I'm using a ViewStack control which will change always its content. So every time some new content (NavigatorContent controls) is shown (which apparently will have different heights) i want the application height to adjust its height in a way it is reflected in changing only the height of the HTML-page.
I have the slight feeling that this means changing the height of the SWF at runtime! Is this true? If yes how to tell the page ? Is this possible?
I hope i explained my problem as close as possible.
Thanks in advance.
If you haven't already come across a solution to this here's a blog post described a solution for this : http://blog.wezside.co.za/blog/fullscreen-flash-with-browser-scrollbar/
It's a little more then you may be looking for so here's the general gist of it:
Set the embedded swf in the html height to 100%
Then on page change in flash, use an ExternalInterface call to set the height of the container div to your flash content.
Enjoy browser scrolling for your flash/flex app :P
This is the solution which worked (for me)!

Resources