I have a Web App which looks good but it is not fitting to the browser width and shows scroll bar at bottom to scroll. I tried this code to make it work, it only puts the app at centre of screen but it doesn't fit to browser's width:
var app = UiApp.createApplication().setTitle('Application 2015').setStyleAttribute('left', '26%').setStyleAttribute('position','relative');
I also tried adding .setWidth(100) at last of above code, still it doesn't make Web App fit to browser's width.
My Web App needs to show application form in the centre and same white blank space on left and right side of the app.
Any idea on this one?
Thanks
To make the app width same as the browser width, you should set the width to "100%" instead of "100".
Also, if you want to center your content in the browser, set the width to a fixed width, like "1000px" or "60%", and set the margin to "0 auto", which means let the browser decide the left and right margin of the content. The content should be centered then.
var app = UiApp.createApplication().setTitle('Application 2015');
app
.setStyleAttribute('width', '90%') // 90% of browser window width
.setStyleAttribute('margin','10px auto'); // 10px top and bottom margins, centered horizontally in browser window
Most standard CSS styles are supported by UI Service's .setStyleAttribute() method (on the UiInstance and its widgets). Setting width as % will resize your ui app with browser window resizing. But it will only go as narrow as your widest widget - after that you will see horizontal scrollbars appear.
However, styles-wise, UiApp will only get you so far. If you need a lot more control over the look of your app, build it using HTML Service.
Related
On our site, we are using the Bootstrap v3 grid system to control the layout of the page. When a user resizes their browser window, the bootstrap system kicks into gear and all works well.
We have a new use case, where a user needs to design a page for a given browser width, but we want them to do it without having to resize their own browser.
We have an outer that wraps the content and is set to a fixed with, and we want Bootstrap to check the width of that content and apply the responsive layout based on that 's width, no the browser window width.
Is this possible? And if so, can someone point me to an example or documentation of how to achieve this?
I recently had a similar case and used ResizeObserver to observe the width of an element to base CSS from rather than the viewport. Learn more:
https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
https://www.w3.org/TR/resize-observer/
Note: this is currently only supported in Chrome
Follow up: CSS container queries have been released as of April 2021, but there is no browser support for them yet – https://caniuse.com/css-container-queries
I finagled this tutorial to work great with my .NET, C#, MVC project except that now the far-right edge of content disappears when the browser window gets any smaller than a 1080p monitor.
Here's the tutorial: http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/
Note that I didn't follow it to the T, rather I added their CSS and JS files to my Visual Studio project and created a new layout that works with it and can be applied to my other views - a great achievement for Novice me...
I'm sure there's just a CSS variable or two somewhere that I need to update to keep the right-hand edge of content from occasionally disappearing.
Here's what it looks like:
This: vs this:
Thanks!
Since you're using bootstrap, it is part of the grid system functions.
Meaning, we have xm md lg right? I will not go through all of these because it is covered in the documentation already.
Now having a class that hides something when it is on a specific window or Browser width. Is very easy, even to explain.
The one that you want is called. Responsive utilities under Bootstrap.
<div class =".visible-sm">
I am visible only for small devices.
</div>
Now .visible class will only show from a specific devices Grid.
For example
Browser width or Device width is >= 768px .visible-sm is "VISIBLE"
Browser width or Device width is >= 992px .visible-md is "VISIBLE"
Browser width or Device width is >= 1200px .visible-lg is "VISIBLE"
Take note. They will only be visible if they are on the specific width and will not show on the other width. ex .visible-md will not show on 768px and 1200px. Only on 992px.
In most cases, this is not a very easy task to use, if you want to cover a smart response.
Now we have another class which is.
<div class=".hidden-sm">
I am visible to Medium and Large, but I will then Disappear when the browser is small
</div>
When viewing a web page on my mobile phone (Android default browser), there is an address bar at the top and a navigation bar at the bottom. These bars dissapear if I start to scroll down a but appear the moment I scroll back up to the top. Other browsers have similar operations and each bar has their own sizing and behavior.
I need to be able to get the height of the view-able part of my website (ie, the part between the 2 bars). When the bars retract or hide, I need to be able to detect the new height.
How can this be done?
if you are using jQuery you can get height of viewable part using
$(window).height()
and if you are using javascript you can get height by following code
window.innerHeight
I have tested this code with device Moto X.
I have a web app that needs to be within a container of a fixed size. I want that container to always be completely visible on the screen of mobile devices. (Particularly I care about iPads.) In my case, the container is 1000px wide by 650px tall. Essentially, I need something that would be the functional equivalent of <meta name="viewport" content="min-width=1000, min-height=650">. But min-width and min-height aren't valid in a viewport meta tag.
I already have the page laid out such that if the window or viewport has extra room the content is displayed centered on the page. I've tried using the orientationchange event to change the content attribute of my meta tag, but no luck. With some configurations that I've tried it loads correctly initially (sometimes, refreshing or reopening the page often yields different results) but upon changing orientation it becomes incorrect.
This is the closest I've come to getting it to work (in the window.onOrientationChange event):
var mvp = document.getElementById('myViewport');
if(window.innerWidth / window.innerHeight > 1000 / 650) {
mvp.setAttribute('content',"user-scalable=yes, height=650");
} else {
mvp.setAttribute('content',"user-scalable=yes, width=1000");
}
Where of course #myViewport is my viewport meta tag. This works correctly in portrait (although when switching back and forth I have to manually zoom back out,) but doesn't add the extra width needed to zoom out to see the full app height in landscape. Also, I'd prefer not to allow users to zoom in and out because of the nature of the app, and certainly don't want to require them to zoom out every time they change orientation.
If there is a way to force the zoom to always fit to screen, something akin to minimum-scale=auto, maximum-scale=auto, it seems like that would work (if I could get the width correct in landscape,) but I don't know of such a mechanism. I also tried using javascript to determine the scale, based on window.outerHeight or window.outerWidth depending on which one is the determining factor, but that wasn't successful either.
And please don't tell me that this is bad design, because the specs come from the client for their internal-use app and there's nothing I can do about them.
I have a web app that I want to exactly vertically fill the browser viewport, including pushing the address bar up past the top.
Is there some way of getting the browser viewport size without the address bar? Currently, I am using jQuery like:
$("#mainBox").height($(window).height)
but this will fill the viewport minus the address bar, causing the element to be too narrow when viewed in landscape.
For iPhone, I was getting around this by hard-coding the iPhone browser viewport sizes into the page, but there are obvious problems with that.
You need to reset the height in an oerintationchange event. So is you create an orientationchange event handler for the window you need to call the same line inside that handler and you will get the new window height and you should be good.