Jump to content

restrict width of page?

Recommended Posts

I am using a Tlayout to layout my UI. However, if the browser is on a very wide screen it stretches out to the width of the screen.


I see two easy options. Restrict the width of the whole page (preferred) But I couldn't get that to work, I tried

the following in the template

.content {
  max-width: 100px;
  margin: auto;
  <body><?pas=Compiler.LinkedScriptTag?><div class="content">
  <!-- Page content -->

The other easy option would be to set a maxwidth for the layout - but I couldn't get that to work either. I tried setting a width, and padding. Width seemed to be ignored and padding made some of the components (client type) format in weird ways.

So, how can I restrict the max width of the app? Or, how I can set a max width on the tlayout?


Link to post
Share on other sites
  • Administrators

Set something like this in InitializeForm:

  Handle.style['max-width'] := '500px'; //Whatever you want your limit to be
  Handle.style['left'] := '50%';
  Handle.style['transform'] := 'translateX(-50%)';

Then it's only a matter of setting the style and color of TW3DisplayView to something nice.

Link to post
Share on other sites

Thanks that worked ok - except it would offset the form when the form was reactivated.


So instead I used the following in resize and that seems to work in my project which has 3 forms.


procedure CentreForm(f : TW3Form);
const scrwdth = 600;
  if f.ClientWidth> scrwdth then
    var p := (f.ClientWidth - scrwdth) div 2;
    p := round((p / scrwdth) * 100);

    f.Handle.style['max-width'] := inttostr(scrwdth)+'px';
    f.Handle.style['left'] := '50%';
    f.Handle.style['transform'] := 'translateX('+inttostr(p)+'%)';


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...