I am using a small script (full code at the bottom of the question) to create a BorderLayout - top, left, right and center. I fill those parts with sap.ui.commons.layout.BorderLayoutAreas (as shown in this examples.)
My main problem is that I want this Layout to fit the whole Browser screen, being resized if the broswer windows is resized. For that the BorderLayout has the properties width and height for which I set a size. But it doesn't work as expected. For example If I replace the width with 100% or auto the application width is always adjusted correctly and fills the browser (in width). For some reason this does not work for the height. As soon as I enter something different from a pixel value (e. g. 900px) all controles dissapear and the window is empty.
Am I using it wrong or is there another way to fith the whole application to the screen?
<!DOCTYPE html>
<html>
<meta http_equiv='X-UA-Compatible' content='IE=edge'/>
<title>OpenUI5 Demo</title>
<script id='sap-ui-bootstrap'
src='/js/openui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.ui.commons'></script>
<script>
var oBorderLayout1 = new sap.ui.commons.layout.BorderLayout("BorderLayout1", {
width : "100%",
height : "100%", // THE APPLICATION ONLY WORKS WHEN THIS LINE IS SET TO A PIXEL (e. g. "300px") VALUE
top : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Top Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
bottom : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Bottom Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
begin : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Begin Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
center : new sap.ui.commons.layout.BorderLayoutArea({
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Center Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
end : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'End Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
})
});
oBorderLayout1.placeAt("body");
</script>
<body>
<div id='body'></div>
</body>
</html>
this is a very basic CSS topic and not at all related to UI5:
In CSS percentage heights only work if the height of the parent element is defined. Either as an absolute value, or as a relative value, but the parent of it is absolute-height etc.
Elements with no height basically say "I am as tall as my content" and when the content then has 100% height, it says "I am as tall as my parent", so that's a shortcut/deadlock and the height collapses to zero.
Also note that the <html> and <body> root elements also have no fixed height by default, so they also behave the same way.
So the easy solution to make 100% height work is to set the height of the parent to a fixed value or to set ALL the parents up to the very root of the page to 100% height - in your example:
<style>
html, body, #body { height: 100%; }
<style>
See jsbin for a running version:
http://jsbin.com/bonacohefu/1/edit
It seems like this is a bug, if you look into the API it says that the default for width and height is 100% but it doesnt seem to work for the height property.
I added it to a test page, and it had the same behavior as your example.
Related
i just started to make a new app by electron and find out after adding a new feature in my app, a very hard to notice white(or maybe transparent) gap added in very right side of the window.
More explanation: I made an application that fetch something from server and after some manipulation, will display them in main window. The application just has 1 window (its quite simple app) and this is configuration for window that i added into main js "Before" gap shows up:
mainWindow = new BrowserWindow({
show : false,
width : 820,
height : 520,
frame : false,
resizable : false,
title : "blah blah blah"
})
After that i decided to expand the app and cache last location of the window before user try to close window so in next time that user will open the app, the window will at the same prev place. So i added some extra function to catch window "x" and "y" and save them into a "json" file in "appData". I changed window config to this one:
mainWindow = new BrowserWindow({
show : false,
width : 820,
height : 520,
frame : false,
resizable : false,
title : "blah blah blah",
x : {get x from storage},//this is pseudo
y : {get y from storage}//this is pseudo
})
Now a small gap appears in right side as shown in pictures below. More explanation in pictures caption.
HTML:
<body>
<div class="hello-rob">
<div class="nav"></div>
</div>
</body>
CSS:
body,
html {
position: relative;
width: 820px;
font-weight: normal;
-webkit-font-smoothing: antialiased;
height: 100%;
overflow: hidden;
-webkit-user-select: none;
}
caption: Css width set to "820px" same as window "width" in main. js, as you can see there is almost "2-3px" white gap (i marked with a circle)
caption: If i comment the css width, then the window will expand to its real width that is "822.4px"
caption: When i comment "x" and "y" in main.js and css "width" presence, every thing seems fine.
P.S: i don't think this issue its just about "x" and "y" that set in main.js and regardless of that the main problem is:
Why and how the window is bigger than what we set for it in main.js and in css?
electron v1.7.11
Windows 10 64bit
Please note:
This is not a "permanent solution", this is just a temporary hotfix before electron team diagnose what is the main cause of this behavior by electron.js.
Thanks to #mplungjan and #Mike to reminding me to read documentation once again
I tried to watch/trace "window size" in every moment so that i can find out inside the electron core "window size" is inaccurate or no, something in renderer.js is involve?!
Based on this results (from main.js), its obvious changes happen in main.js part.
This is main.js console (when extra gap is evident):
[ 823, 522 ]// console.log(mainWindow.getSize());
[ 822, 521 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 101, width: 823, height: 522 }// console.log(mainWindow.getBounds());
From the results you can see electron uses setSize, getSize to demonstrate window size and obviously its not accurate because the window's size should be "820px" * "520px".
How to fix this: (please consider big part of codes below are not new, new tricky-lines has a comment)
function createWindow(){
mainWindow = new BrowserWindow({
show : false,
width : 820,
height : 520,
frame : false,
resizable : false,
title : "blah blah blah",
x : {get x from storage},//this is pseudo
y : {get y from storage}//this is pseudo
minWidth: 820,// new
maxWidth: 820,// new
minHeight: 520,// new
maxHeight: 520// new
})
// in this function i called console.log()
mainWindow.once('ready-to-show', () => {
mainWindow.show();
mainWindow.setSize(820,520);// new (i didn't checked but maybe before `mainWindow.show();` is better to place this line of code)
})
}
app.on('ready', () => {
createWindow()
})
Another test to check the effect of changes:
[ 820, 520 ]// console.log(mainWindow.getSize());
[ 820, 520 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 100, width: 820, height: 520 }// console.log(mainWindow.getBounds());
And the gap no longer exists.
P.S: personally i don't like this kind of solutions, so if any one else was able to represent a better solution i'll accept it as an answer.
I'm trying to create a dojo Button and set it inside a spanned on 2 rows table cell toking the whole presented height inside it, anyway due some reason it does not works.
require( [ "dijit/form/Button" , "dojo/dom", "dojo/parser"],
function( Button, dom, parser )
{
var buttonExecuteQuery = new Button(
{
id : "btnExecuteQuery",
busyLabel : "Изпълнява",
label : "Изпълни",
style : "height:100%",
height : "100%"
});
})
How to setup Dojo's Button height ?
The correct way following your syntax is style: "height:100%"
var buttonExecuteQuery = new Button(
{
id : "btnExecuteQuery",
busyLabel : "Изпълнява",
label : "Изпълни",
style : "height:100%"
}
);
height: "100%" does nothing. Now, the most important part, you need to understand that height: "100%" only works if the height of the parent is known, for example, if you want the button to occupy the full height of a div, then you must set the height of that div
<div style="height: 50px">
<button style="height: 100%">My Button</button>
</div>
the are a lot of discussion of this topic here in SO, for example you can read
Make div 100% height of browser window
height:100%; not working
CSS height 100% percent not working
Hope it helps
I want to set the pop up according to window size , alignment like top-left ,top-right, center ,bottom-left ,bottom-right ,bottom-center .how can we set element according to browser window
but the these things fails if i want to select bottom left position .my pop up goes out of window .
example : top : 5% according to window size
left: 45% according to window size
$(id).css('top', '5%');
$(id).css('left', '45%');
i also want to know .what is the meaning of
winH/2-$(id).height()/2
You can do the following to change an elements css on resize:
winH is the window size
winH/2-$(id).height()/2 is window size divided by 2 subtract chosen div height divided by 2
$(window).resize(function()
{
var winH= $(window).height();
if (windowHeight > 400)
{
$(".testDiv").css({
"height" : "20%",
"width" : "20%",
"margin-left": "45%",
"margin-top" : "5%"
});
}
});
JSFIDDLE EXAMPLE
I've modified a template that had Fancybox already installed and functioning; I'm having problems with my gallery windows being too big on smaller screens. Currently I have a large image and then a decent block of text below. After modifying the code in the 'main.js' file, I can get the window to fit inside a browser window on a non-Retina Macbook Pro and larger screens, but on a Macbook Air 11" the window gets cut off on the bottom (I know it's about pixels and not screen size, I just don't have the numbers on hand). It's not an issue on a phone because I can scroll the window up with a finger.
One solution would be to enable scrolling inside the windows, but if that is possible then I haven't been able to make it work. Maybe they should be iframes and not gallery windows? If so I would need advice on how to implement that (the template did not come with any iframe examples beyond links to videos).
Here's the site: Weirdsmobile
Click on any of the tiles in the "Projects" section to see a Fancybox window.
Here is all the javascript code; I got advice to add the fitToView: false and maxWidth: "95%" because the window initially did not fit on a phone screen. I then added
maxHeight: "60%" to try and shrink it to fit, otherwise the full window is too large; but on smaller screens that % is still too high.
BRUSHED.fancyBox = function(){
if($('.fancybox').length > 0 || $('.fancybox-media').length > 0 || $('.fancybox-various').length > 0){
$(".fancybox").fancybox({
fitToView: false, // so we can get all the length of the title
maxWidth: "95%", // will make it responsive; adjust to your needs
maxHeight: "60%",
padding : 0,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h4>' + this.title + '</h4>' + '<p>' + $(this.element).parent().find('img').attr('alt') + '</p>';
},
helpers : {
title : { type: 'inside' },
}
});
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
}
}
I'm trying out a relatively new JavaScript/jQuery UI library, w2ui. I've got a layout working in my LAMP application, but I am wondering how to make the layout div take the full height of the screen. Here's a demo of a resizable layout from the official site.
Here is the HTML div which will become my layout container:
<div
id="layout"
style="width: 100%; height: 600px; margin-bottom: 10px;"
></div>
That works with '600px' as a height, but not '100%', which makes it invisible.
And the JavaScript (a few bits removed just for brevity):
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{
type: 'left', size: 800, resizable: true, style: pstyle, content: 'tab1'
},
{ type: 'main', style: pstyle, content: 'main' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
The layout docs don't mention setting a % height, though it's early days! Perhaps this question will act as a prompt.
One solution would be to read the Y dimension of the top of the layout, and then subtract this from the screen height, and then create the layout of that height. That would probably work, but if the screen resized I'd have to recalculate and reset the height, which is a bit hacky.
Here's the hacky solution, which I'll use for now; however, a better one would be worth working towards. To be fair, this works excellently in Firefox/OSX, and so is fine whilst I am in a development phase.
New HTML:
<!-- Here's the panel system -->
<div id="layout-container" style="height:700px;">
<div id="layout" style="width: 100%; height: 100%;"></div>
</div>
Additional JavaScript, executed prior to the code in the question (props to this answer for the resize stuff):
function setLayoutContainerHeight()
{
// Get top position of layout container, subtract from screen height, subtract a bit for padding
var y = $('#layout-container').position().top;
var layoutHeight = $(window).height() - y - 10;
$('#layout-container').css('height', layoutHeight + 'px');
}
// Whenever the window changes size, recalculate the layout container height
setLayoutContainerHeight();
$(window).resize(setLayoutContainerHeight);
Update: the author this library has very kindly offered several ways to achieve a full-height layout, all of which are better than my hack!