THtmlFrame , resize and text size

[jptec]

HI,

 

I m new to the uniGui. I would like use htmlframe as my index page ( which is responsive ).  However I hit the follow case.

 

Please advise:

 

I first do a html page and test it in normal web server. It is working correctly. Then I copy all the html code and css etc.. UniGUI project which put into the THtmlFrame.

 

1. The Text font size in web server version is bigger than the uniproject version.

 

2. as the picture slide feature is windows wide no matter how resize. 

-> In web server, it is working correctly, no matter how resize it is as expected.

-> In UniGUI project, first load the page the picture slide not fit to the windows width. After resize it with mouse can fit windows width but the page layout ratio is not correct.

 

I attached the picture for reference. the address 127.0.0.1 is web server one and 10.18.18.34:8077 is UniProject.

 

Web Server Version

 

UniGUi Project

 

Compare to 

 

 

Please advise above the case how to solve

 

 

Joe

[tappatappa]

1) Consider putting the css in ServerModule->CustomCSS.

2) Have you set HTMLFrame::Align = alClient?

[Ron]

In your code you probably need some JS to catch the browser

resize, and what I would use is something like this pseudocode:

 

window.addEventListener('resize', resizeFrame, true);
  function resizeFrame() {
    sliderbox.width = MainForm.htmlFrame.getWidth();
    sliderbox.height = MainForm.htmlFrame.getHeight();
    drawSlider();
  }

 

If you can post your project, someone can take a closer look at it.

[jptec]

Dear All,

 

I've set to alclient , and tested the alignmentcontrol either to server or client. it is not as my expectation.

 

Also a bit confused if put css in ServerModule - customcss property and individual file in ServerModule - customfiles or put within the htmlframe. Any difference?

 

if really the conflict on the css , any better approach?

 

You can download my sample project: http://175.45.23.206:8888/download/temp/autoslide.zip

 

You can download my referenced html: http://175.45.23.206:8888/download/temp/samplehtml.zip

 

 

 

As I new to css and html handling, any advice is appreciated.

 

Joe

[mhmda]

First use chrom->Inspect (CTRL+SHFT+I) it's very useful, and examine the width, height, top, left...

 

When resizing the window it depends in how the user resize it:

 

- Does he use the [min][max] buttons

- Does he use the mouse to scale (drag) the size. 

 

Second consider using a more advanced solution for triggering resize such: https://github.com/louisremi/jquery-smartresize

 

We already build a Jquery components using these methods you can download from here http://forums.unigui.com/index.php?/topic/5995-circle-progress-jquery-widget-fully-customized/ and see how we trigger the resize events.