Int3g3r Posted October 23, 2020 Share Posted October 23, 2020 Hello, I'm trying to create a UniGuiMobile application. I'm having big difficulties with layouting my application. I've looked into the UniGuiMobile touch examples. I've found no examples that shows what i'm looking for. The examples are quite simple. I need to layout a lot of edit fields with a working scroll box. I found follow article on the Developer's Guide. http://www.unigui.com/doc/online_help/user-interface.htm It is quite helpful but its written for UniGuiWeb (not Mobile). As example there is no "Columns" property for the TUnimFieldContainer. A gridstyle container would be really cool for the future. Can somone create an example application with the layout showed in the attachment ? Requirements: - Scrolling needs to work - Using only UniGuiMobile Components - Label needs to be close to the UnimDBEdit - The DBEdits needs to be equally paced between eachother. (picture is only a scetch) - If the users enters a edit field the virtual keyboard get's showed. The virtual keyboard must not cover the field. Best Regards, Int3g3r Link to comment Share on other sites More sharing options...
x11 Posted October 23, 2020 Share Posted October 23, 2020 21 minutes ago, Int3g3r said: working scroll box. add JS-code to TUnimScrollBox.ClientEvents.ExtEvents function painted(sender, eOpts) { sender.bodyElement.dom.setAttribute('style', 'overflow-y:auto !important'); sender.bodyElement.select('.x-dock .x-dock-vertical').setStyle('overflow-y', 'auto'); } Link to comment Share on other sites More sharing options...
x11 Posted October 23, 2020 Share Posted October 23, 2020 TUnimFieldContainer Layout = hbox LayoutAttribs Align = stretch Pack = justify unimSpinner1.Flex = 1 unimSpinner2.Flex = 1 unimSpinner3Flex = 1 1 Link to comment Share on other sites More sharing options...
x11 Posted October 23, 2020 Share Posted October 23, 2020 43 minutes ago, Int3g3r said: - Label needs to be close to the UnimDBEdit fieldLabel, fieldLabelAlign, fieldLabelWidth (in percents %) Link to comment Share on other sites More sharing options...
x11 Posted October 23, 2020 Share Posted October 23, 2020 46 minutes ago, Int3g3r said: - The DBEdits needs to be equally paced between eachother. use Margin 0 1 = 0px 1px 0px 1px Link to comment Share on other sites More sharing options...
Int3g3r Posted October 23, 2020 Author Share Posted October 23, 2020 Hello, Thank you for the instructions. I have still some problems: - How do i layout not equal width input fields ? (screenshot) - Is it not possible to set the width (%) and margins and the space gets equally adjusted ? - Is it possible to adjust the space between the label and Edit ? In my scetch the label is right above it. In the unigui application is space between label and edit, i would like to shrink that space. Link to comment Share on other sites More sharing options...
x11 Posted October 24, 2020 Share Posted October 24, 2020 22 hours ago, Int3g3r said: - How do i layout not equal width input fields ? (screenshot) unimSpinner1.Flex = 3 unimSpinner2.Flex = 1 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox Link to comment Share on other sites More sharing options...
x11 Posted October 24, 2020 Share Posted October 24, 2020 22 hours ago, Int3g3r said: - Is it not possible to set the width (%) and margins and the space gets equally adjusted ? i do not know try Link to comment Share on other sites More sharing options...
x11 Posted October 24, 2020 Share Posted October 24, 2020 22 hours ago, Int3g3r said: - Is it possible to adjust the space between the label and Edit ? In my scetch the label is right above it. On 10/23/2020 at 1:49 PM, x11 said: use Margin 0 1 = 0px 1px 0px 1px margin := '0 5'; Link to comment Share on other sites More sharing options...
Recommended Posts