how to vertical centering in gwt by using vertical panel.. or pls sugest me is there any way for doing vertical cetering
If you want to directly use the VerticalPanel from code, you need to use the setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE)
You can also use the UiBinder approach
<g:VerticalPanel verticalAlignment='ALIGN_MIDDLE' horizontalAlignment='ALIGN_CENTER' width="100%" height="500px">
<g:cell></g:cell>
</g:VerticalPanel>
Take a look to DevGuideUiPanels for examples and documentation
I can give you an example on how we did it with css (to implement a popup like behaviour).
If you google for it there are dozens of solutions on how to achieve vertical centering. This example worked for us, so no guarantee if it's of any help for you.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0 auto;
}
.popup {
border-color:#ff4f00;
border-style:solid;
border-width:5px;
background-color: #ffffff;
text-align: left;
}
#wrapper, #container {
height: 150px;
width: 550px;
}
#wrapper {
bottom: 50%;
right: 50%;
position:
absolute;
}
#container {
left: 50%;
position: relative;
top: 50%;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>vertical centering</title>
</head>
<body>
<div style="width: 965px; height: 515px;"></div>
<div id="wrapper">
<div class="popup" id="container">
some content
</div>
</div>
</body>
</html>
EDIT: check also this question out.
Related
There are quite a lot of questions regarding iframe and it's height. Some are similar but not giving me the right answer. So let me explain my case:
JSFiddle: http://jsfiddle.net/AmVhK/3/show/
Editor: http://jsfiddle.net/AmVhK/3/
There is a table with 2 rows. First one contains a div #toolbar with fixed height. Second row contains a div which holds an iframe. I need the iframe to take the available space below the toolbar div.
Problem I am facing is in IE standards mode (supporting IE8+). Let's say, the height of the window is 1000px and height of toolbar is 200px, then the height of the iframe is also 1000px and so has scrollbars. I need the iframe to have height of (page height-toolbar height).
It would be good if there is a CSS solution. Using JavaScript to get the height available and setting it to the iframe or it's containing div is the last resort solution for me :)
Setting the toolbar or iframe to absolute position also won't work for my use case. Markup change is ok if necessary (if you want to remove tables)
I have already set the following CSS:
html, body {height: 100%}
Any good solution to implement it.
OK here's my attempt at this, there's an issue with the iframe wanting to have a horizontal scroll in IE7 but the layout is good, I had to give up because fighting with IE7 makes me want to chew out my own eyes, hopefully someone could expand from here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>iframelayout</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div, iframe {
margin: 0;
padding: 0;
border: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: #222;
}
.toolbar {
height: 200px;
background: #aaa;
}
.iframe-container {
position: absolute;
top: 200px;
bottom: 0;
width: 100%;
background: #555;
overflow-y: hidden;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
</div>
<div class="iframe-container">
<iframe src="https://c9.io/" frameborder="0">Your browser is kaput!</iframe>
</div>
</div>
</body>
</html>
Here is a solution tested in IE8 and FF17
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type="text/css">
*
{
border: 0;
line-height: 0;
margin: 0;
padding: 0;
}
html,
body
{
height: 100%;
}
#layout
{
position: relative;
width: 100%;
min-height: 100%;
overflow-y: hidden;
background-color: green;
}
#toolbar
{
width: 100%;
height: 200px;
background-color: blue;
}
#content-wrapper
{
position: absolute;
top: 200px;
bottom: 0px;
width: 100%;
background-color: red;
}
#content
{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://c9.io/" border="0"></iframe>
</div>
</div>
</body>
</html>
This is as clean as it can get minding your original question mentions the toolbar has a fixed height. Minimal code, no wrapper elements and no tables necessary, IE8+/Chrome/Fox compatible.
However, in the comments of Dale's solution, you mention the toolbar height being flexible instead and a requirement for the iframe to adjust - that is a major gamechanger and I would suggest you strip that of your requirements as it's practically impossible to achieve in CSS2 without extra JS and/or horrendous CSS hacks. If you didn't want IE<=9 compatibility, this would be very possible using CSS3 flexbox.
Since the reason for the toolbar flexible height would be animation for different states as you mentioned, I would suggest you use the code below and animate the toolbar height and iframe padding-top at the same time to achieve the desired flexibility instead of just the toolbar height. It does not require any extra JavaScript outside of the animation itself, so the only "disadvantage" is to animate 2 properties instead of 1. The rest of the layout will finely adjust.
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#toolbar {
position: absolute;
width: 100%;
height: 200px; /* animate this */
}
#cblt_content {
display: block;
width: 100%;
height: 100%;
padding-top: 200px; /* and this */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 0;
}
</style>
<div id="toolbar">Toolbar</div>
<iframe id="cblt_content" src="https://c9.io/"></iframe>
Getting rid of the vertical scroll
Using this code should leave with only the inner (iframe) scrolls:
html, body
{
height: 100%;
width: 100%;
position: fixed;
}
Notes:
The width is needed (like with absolute).
You are right about absolute not helping you.
This actually makes sense for what you are trying to achieve (if I got it right).
Browser Support:
Might be a little buggy, but should be supported as of IE7 (quirksmode).
Hope I got the question right.
The solution is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - Webduos Demo</title>
<style type="text/css">
*{ border: 0; line-height: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
#layout { position: relative; width: 100%; min-height: 100%; overflow-y: hidden; background-color: green; }
#toolbar { width: 100%; height: 160px; background-color: blue; }
#content-wrapper { position:absolute; top:180px; bottom: 0px; width: 100%; background-color: #0000dd; }
#content {width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://google.com/" border="0"></iframe>
</div>
</div>
</body>
</html>
I think you can simply hide the parent scroll bar and get what you want. Like by simply adding overflow-y hidden:
html, body {
height: 100%;
overflow-y:hidden;
}
This should do it! Here's the quick preview link: http://jsfiddle.net/AmVhK/15/show/
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#contentiframewrapper, #cblt_content {
/* max-height: 100%;
min-height: 99.9%;*/
height: 99.9%;
margin: 0;
padding: 0;
line-height: 0;
}
#toolbar {
height: 100px !important;
background-color: #CCC;
text-align: center;
font-size: 50px;
vertical-align: middle;
}
</style>
<table width="100%" height="99.6%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" id="toolbar">Toolbar
</td>
</tr>
<tr>
<td width="100%" valign="top" height="80.5%">
<div align="center" id="contentiframewrapper">
<iframe width="100%" frameborder="0" name="cblt_content" id="cblt_content" src="https://c9.io/" border="0"></iframe>
</div>
</td>
</tr>
</tbody>
</table>
I've tested it in both Chrome and IE8 and it works on my side. It might bug in JSFiddle in IE8 but it shouldn't if you view it as a separate page (in normal conditions that is).
Edit:
Made some slight changes to the original code. However, you will have to change the <td> that holds the iFrame height value to the new height if you change the height of the toolbar. With IE there is no magic % value (unless you use JS, which you don't want of course) for it, it's just trial and error.
I have the following code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body {margin: 0; padding: 0}
.left {
background-color: yellow;
width: 200px;
height: 100%;
position: fixed;
}
.right {
background: green;
height: 3000px;
left: 200px;
right: 0px;
position: absolute;
}
</style>
</head>
<body>
<div class="left">d</div>
<div class="right">dafsdsfsdafkdasfjdslkfja;jdfsklsfdjaklfjdkafsjklsdjkfajklfdaksjlfjlsdsfjasdfkjldsa;fksdalfjdsafjdksa;lfjsdlfjaslfdjsafhdasjfhdsakjfhdsakjfjkadsflasfdfadfasfdasfdsfasfdasfdsaadfkljdsalfsafdsafdsaf</div>
</body>
Which renders the following result. How should I resize the right div to fill the entire screen minus the width of the left div, which is 200px? Currently it overflows the screen width, and I do not know why!
Thanks in advance.
your text in div.right is too long. So you can use
word-wrap: break-word;
also
right: 200px;
see in jsfiddle
the problem is that you enter a nonspaced string so navigator dosn´t know how to display it in multi line you can add the css word-wrap: break-word; to solve this.
this is your example modified:
http://jsfiddle.net/q4kwy/3/
I found an elegant solution, and it can be found here
Example - http://appdist.me
What I'd like to do is have the keyboard SVG fixed to the bottom of the screen and take up half the screen height, with the Facebook logo always overlaying the 'Q' key, no matter how the window is resized.
I've been trying to do this for days. What am I doing wrong? Thanks.
Here's my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>CSS Layout Problem</title>
</head>
<body>
<div id="svg">
<embed src="keyboard-gray.svg" id="keyboard"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="fb.svg" id="facebook"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="frame.svg" id="frame"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
</div>
</body>
Here is my CSS:
body{
background-color: #333;
}
#svg{
}
#facebook{
position: fixed;
width: 6%;
height: 6%;
}
#frame{
position: fixed;
width: 100%;
height: 47%;
top: 2%;
left: 0;
}
#keyboard{
position: fixed;
width: 100%;
height: 50%;
bottom: 2%;
left: 0;
}
If you want to merge the images and make the SVG interactive, then you can use <a> tags in your xml (instead of <g>). Check out this IBM link for some ideas on how to achieve different types of interactivity.
Good luck - it looks like you have a fun project to play with.
Position the #facebook absolutely too and set the z-index so that it shows above the keyboard.
#facebook{
position: absolute;
height: 12%;
bottom: Y%;
right: X%;
z-index: 99;
}
Change X and Y so that it's above the Q key.
Demo Page: http://apps.pc-tips.in/play/
In the above, the div containing "Ask any question & get" is centered, but the div containg the line "answers on" is not. why? Both have been styled similarly. given width, absolute position, margin auto.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
margin:0 ;
padding:0 ;
}
#sidebar {
height: 600px;
width: 200px;
}
#topside {
height: 108px;
background-image: url(Untitled-3.jpg);
background-repeat: repeat-x;
text-align: center;
position: relative;
}
.down {
bottom: 3px;
position: absolute;
margin: auto;
width: 200px;
}
#bottomside {
background-image: url(Untitled-4.jpg);
height: 492px;
position: relative;
}
#wrapper #sidebar #topside {
color: #FFF;
font-size: 0.9em;
font-weight: bold;
}
.delhi {
font-size: 1.8em;
}
.top {
top: 3px;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<div id="topside"><br /> <span class="delhi">Delhi </span> Questions and answers.
<div class="down">
Ask any question & get
</div>
</div>
<div id="bottomside">
<div class="top"> answers on </div>
</div>
</div>
</div>
</body>
</html>
would anyone like to point out what I am missing here?
As kuroir's answer says, you can't center elements this way if you're also using absolute positioning.
Your "ask any question" div isn't being centered, you've given it the same width as its container.
The only reason the two look different is that there's a text-align: center on the #topside container, and not on the #bottomside container.
You can't center an element via margin:0 auto when it has position:absolute added to it. Remove the position:absolute from .top and it should work.
Not sure what you're trying to achieve, but this pretty much solves the problem you have. Remember you can use padding to "center" contents. That will save you from having to set the width explicitly.
You need to change your CSS, updating the '#bottomside' and '.top' styles like so:
#bottomside {
background-image: url(Untitled-4.jpg);
height: 492px;
position: relative;
text-align: center;
}
.top {
top: 3px;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
}
The changes are self explanatory, if there is a confusion, let me know.
What can be a practical solution to center vertically and horizontally content in HTML that works in Firefox, IE6 and IE7?
Some details:
I am looking for solution for the entire page.
You need to specify only width of the element to be centered. Height of the element is not known in design time.
When minimizing window, scrolling should appear only when all white space is gone.
In other words, width of screen should be represented as:
"leftSpace width=(screenWidth-widthOfCenteredElement)/2"+
"centeredElement width=widthOfCenteredElement"+
"rightSpace width=(screenWidth-widthOfCenteredElement)/2"
And the same for the height:
"topSpace height=(screenHeight-heightOfCenteredElement)/2"+
"centeredElement height=heightOfCenteredElement"+
"bottomSpace height=(screenWidth-heightOfCenteredElement)/2"
By practical I mean that use of tables is OK. I intend to use this layout mostly for special pages like login. So CSS purity is not so important here, while following standards is desirable for future compatibility.
From http://www.webmonkey.com/codelibrary/Center_a_DIV
#horizon
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block
}
#content
{
width: 250px;
height: 70px;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
visibility: visible
}
<div id="horizon">
<div id="content">
<p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
</div><!-- closes content-->
</div><!-- closes horizon-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering</title>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body>
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered" style="border: 1px solid green;">
Centered content
</div>
</td></tr>
</table>
</body>
</html>
Solution from community.contractwebdevelopment.com also is a good one. And if you know height of your content that needs to be centered seems to be better.
For horizontal:
<style>
body
{
text-align:left;
}
.MainBlockElement
{
text-align:center;
margin: 0 auto;
}
</style>
You need the text-align:left in the body to fix a bug with IE's rendering.
For this issue you can use this style
#yourElement {
margin:0 auto;
min-width:500px;
}
Is this what you are trying to accomplish? If not, please explain what is different than the image below?