You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Yuri Ivanov <yi...@bossdev.com.ua> on 2006/12/18 15:12:41 UTC

layout question

Hello, 

I have simple layout task. I need to make a login dialog box in the center
of the browser screen.  The problem that initial size of the page I need to
set in px, and it's not good.

I have tried to set page width and height to 100%, but it doesn't work. 

  <tc:page width="100%" height="100%">

  <!-- width="1000px" height="700px" -->

    <f:facet name="layout">

      <tc:gridLayout rows="30%;fixed;30%" columns="30%;*;30%"  />

    </f:facet>

      <tc:cell spanX="1" spanY="2"/>

:

 

What is the best solution of this simple layout task?

 

 

Thanks,

Yuri Ivanov.

Re: layout question

Posted by Jeff Bischoff <jb...@klkurz.com>.
Tobago questions should have a [Tobago] in the subject line. :)

RE: layout question

Posted by Yuri Ivanov <yi...@bossdev.com.ua>.
Thanks David!
I really appreciate your advice. But I forgot to add that it's about Tobago
library. I am not sure Will it be ok to use it with that lib. Tobago uses
they own layout manager.

Regards,
Yuri

-----Original Message-----
From: David Delbecq [mailto:delbd@oma.be] 
Sent: Monday, December 18, 2006 4:24 PM
To: MyFaces Discussion
Subject: Re: layout question

Vertical centering in html is not that simple. Search the web for 'css
vertical centering' to see how to do this.

For horizontal centering part, this should do the trick:

<html>
<body style="width:100%">
    <div style="margin-left:auto;margin-right:auto;border:1px solid
black;width:50%;padding:5pt;">
        test centered<br/>on several <br/>lines
        <div style="width:100%;background:blue;color:red">This is on
blue background</div>
    </div>
</body>
</html>

important part are the auto margin and the fixed width (in percentage).
If you don't do this, div will use maximum size.
Yuri Ivanov a écrit :
>
> Hello,
>
> I have simple layout task. I need to make a login dialog box in the
> center of the browser screen.  The problem that initial size of the
> page I need to set in px, and it’s not good.
>
> I have tried to set page width and height to 100%, but it doesn’t work.
>
>   <tc:page width="100%" height="100%">
>
>   <!-- width="1000px" height="700px" -->
>
>     <f:facet name="layout">
>
>       <tc:gridLayout rows="30%;fixed;30%" columns="30%;*;30%"  />
>
>     </f:facet>
>
>       <tc:cell spanX="1" spanY="2"/>
>
> …
>
>  
>
> What is the best solution of this simple layout task?
>
>  
>
>  
>
> Thanks,
>
> Yuri Ivanov.
>
>  
>

Re: layout question

Posted by David Delbecq <de...@oma.be>.
Vertical centering in html is not that simple. Search the web for 'css
vertical centering' to see how to do this.

For horizontal centering part, this should do the trick:

<html>
<body style="width:100%">
    <div style="margin-left:auto;margin-right:auto;border:1px solid
black;width:50%;padding:5pt;">
        test centered<br/>on several <br/>lines
        <div style="width:100%;background:blue;color:red">This is on
blue background</div>
    </div>
</body>
</html>

important part are the auto margin and the fixed width (in percentage).
If you don't do this, div will use maximum size.
Yuri Ivanov a écrit :
>
> Hello,
>
> I have simple layout task. I need to make a login dialog box in the
> center of the browser screen.  The problem that initial size of the
> page I need to set in px, and it’s not good.
>
> I have tried to set page width and height to 100%, but it doesn’t work.
>
>   <tc:page width="100%" height="100%">
>
>   <!-- width="1000px" height="700px" -->
>
>     <f:facet name="layout">
>
>       <tc:gridLayout rows="30%;fixed;30%" columns="30%;*;30%"  />
>
>     </f:facet>
>
>       <tc:cell spanX="1" spanY="2"/>
>
> …
>
>  
>
> What is the best solution of this simple layout task?
>
>  
>
>  
>
> Thanks,
>
> Yuri Ivanov.
>
>  
>

RE: layout question

Posted by Yuri Ivanov <yi...@bossdev.com.ua>.
Thanks a lot Volker, 
Yes! That must help me out of that problem.

Regards,
Yuri Ivanov


-----Original Message-----
From: Volker Weber [mailto:weber.volker@googlemail.com] 
Sent: Monday, December 18, 2006 5:48 PM
To: MyFaces Discussion
Subject: Re: layout question

Hi Yuri,

the problem is: the full layout is calculated on the server, so the
server needs to know the clients size.

in the example/addessbook you can see how to solve this. The start.jsp
is just to get the size into the PageState.

Regards,
  Volker

2006/12/18, Yuri Ivanov <yi...@bossdev.com.ua>:
>
>
>
>
> Hello,
>
> I have simple layout task. I need to make a login dialog box in the center
> of the browser screen.  The problem that initial size of the page I need
to
> set in px, and it's not good.
>
> I have tried to set page width and height to 100%, but it doesn't work.
>
>   <tc:page width="100%" height="100%">
>
>   <!-- width="1000px" height="700px" -->
>
>     <f:facet name="layout">
>
>       <tc:gridLayout rows="30%;fixed;30%" columns="30%;*;30%"  />
>
>     </f:facet>
>
>       <tc:cell spanX="1" spanY="2"/>
>
> .
>
>
>
> What is the best solution of this simple layout task?
>
>
>
>
>
> Thanks,
>
> Yuri Ivanov.
>
>

Re: layout question

Posted by Volker Weber <we...@googlemail.com>.
Hi Yuri,

the problem is: the full layout is calculated on the server, so the
server needs to know the clients size.

in the example/addessbook you can see how to solve this. The start.jsp
is just to get the size into the PageState.

Regards,
  Volker

2006/12/18, Yuri Ivanov <yi...@bossdev.com.ua>:
>
>
>
>
> Hello,
>
> I have simple layout task. I need to make a login dialog box in the center
> of the browser screen.  The problem that initial size of the page I need to
> set in px, and it's not good.
>
> I have tried to set page width and height to 100%, but it doesn't work.
>
>   <tc:page width="100%" height="100%">
>
>   <!-- width="1000px" height="700px" -->
>
>     <f:facet name="layout">
>
>       <tc:gridLayout rows="30%;fixed;30%" columns="30%;*;30%"  />
>
>     </f:facet>
>
>       <tc:cell spanX="1" spanY="2"/>
>
> …
>
>
>
> What is the best solution of this simple layout task?
>
>
>
>
>
> Thanks,
>
> Yuri Ivanov.
>
>