Responsive Web Page

[Ira]

Hello All,

I have been working with numerous Delphi consultants on this (in other Web Frameworks as well), with pretty much no luck. We are trying to make a form in uniGUI similar to this...

Specifically, when you resize the browser, the text, edit box, and button all readjust smoothly with out being cut off by the browser (responsive)

We can't seem to replicate in uniGUI.

Any help would be appreciated.

Thank you

 

 

[Sherzod]

Hello, 

Please share a screenshot or sample layout instead of an external link.

[Ira]

Original browser size:

 

resized - smaller - size

 

[Jean-Marc Kiener]

https://www.unigui.com/doc/online_help/user-interface.htm

[Abaksoft]

Hello,

Unigui use Sencha Extended JS Framework. For responsive behavior, you should work with :

•  ClientSide design

•  (Vbox / Hbox) Layout

•. Containers

In your case, keywords are : 

Height : auto

Width : 100%

You have many examples on forum :

https://forums.unigui.com/index.php?/topic/15007-mobile-centering-text/

https://forums.unigui.com/index.php?/topic/22360-responsive-unifield-layout-inside-forms/#findComment-117795

https://forums.unigui.com/index.php?/topic/22360-responsive-unifield-layout-inside-forms/#findComment-117727

 

And more sophisticate responsive design with JS  (from Stemon63) :

https://forums.unigui.com/index.php?/topic/22846-test-client-responsive-no-server-side-with-unigui-and-purecss/#findComment-130722

 

[mikromundo]

I've been developing the RadCORE Project, which uses only Unigui's native components to generate responsive applications (without HTML, JS, Bootstrap, or ExtJS). If you'd like to analyze it, here's some information, and I'm available to provide more details:

https://radcore.pro.br/web/help/en/ResponsivenessTheBasics.html

https://radcore.pro.br/web/help/en/FirstExample.html

https://radcore.pro.br/web/help/en/DemonstratingRadCORE.html

[WSIINNDA]

55 minutes ago, mikromundo said:

I've been developing the RadCORE Project, which uses only Unigui's native components to generate responsive applications (without HTML, JS, Bootstrap, or ExtJS). If you'd like to analyze it, here's some information, and I'm available to provide more details:

https://radcore.pro.br/web/help/en/ResponsivenessTheBasics.html

https://radcore.pro.br/web/help/en/FirstExample.html

https://radcore.pro.br/web/help/en/DemonstratingRadCORE.html

I checked, it's not very fast! And the initial load size is too high.

[mikromundo]

39 minutes ago, WSIINNDA said:

I checked, it's not very fast! And the initial load size is too high.

As mentioned above, this is not a PRODUCTION application; it's a MEGA DEMO, where all external libraries (graphics, voice, and other secondary resources) are loaded.

It's on a VPS in the US, so we also have to consider the latency from where it's being accessed.

Each user is free to choose the best application model (the most basic is the STARTER).

On the other hand, even with your criticism (which is very welcome), RadCORE solves practically the entire challenge of using responsiveness "without relying on ExtJs, HTML, etc."

[Tamudopt]

You can get smoother resizing in uniGUI by mixing percentage widths with a few small client-side tweaks in the LayoutConfig, especially for buttons and edits. I’ve had to test breakpoints a lot to avoid jumpy transitions. While experimenting with that, I once used a service that focuses on bespoke web design for one of my projects, and studying how they structure their responsive layouts gave me a few ideas I could reuse.