DecSoft Support - Design & Runtime screen output different

Danny Cheah

Hi David,

I have the following problem and I don't know how to resolve it even though I followed the sample FixedContainer.

Design Layout

The above design, where the logo is, I have a fixed container and and image object is in the container as I want it to be on the top all the time.

The second part, I have another container with a HTML object in it.

The third part, I have a push button.

When I execute, I have the following output and where the logo is, it did not stick to the top and the second container overflow to cover my Push button.

What have I done not correct. Please help.

Thank you.

Best regards,

Danny Cheah

DecSoft

Hello Danny,

I think to know what you wanted, so I will try to help you. The "FixedContainer" is intented to shown how we can place content beyond the app view height. That content is perfectly "scrollable" at runtime. But this sample can't do for you what you wanted. Please, let me to explain.

First of all, maybe you no need any container at all: containers are good to group other controls, in order to set a specific background for the container, so the container controls stay inside that background color, somethings like that.

But you can place the header Image control that you wanted without any Container control, and, also without a Container, below the Image you can place your HTML control. So what is the trick? The trick is the CSS "overflow-y" of the HTML Control.

Setting the "overflow-y" CSS to "auto", for example, the contents of the HTML control stay in the control, and, never go beyond the control (and never hide or mess with the Push button), because the appropriate scrollbar appear to allows to show the content of the HTML control.

So in principle you only need three controls: the Image, the HTML content and the Push button. The image can be may also put inside the HTML content control (using an IMG HTML tag), so you can have only the HTML content and the Push button controls.

Take a look at the below app (copy the XML and save it in a file like "MyApp.ab". Open this with AB and run the app.

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.44">
  <App>
    <ID>com.appbuilder</ID>
    <Name>MyApp</Name>
    <ShortName>MyApp</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2017-01-23T17:00:24.126</Created>
    <Modified>2019-08-10T08:58:04.717</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp>
      <BgColor>#FFFFFF</BgColor>
      <ThemeColor>#FFFFFF</ThemeColor>
    </ProWebApp>
    <WebExtension />
    <Cordova>
      <General>
        <OverScroll>0</OverScroll>
      </General>
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <Controls>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>8</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>416</Height>
          <Style>overflow-y: auto; </Style>
          <Html>
            <![CDATA[<p>Lorem ipsum dolor sit amet consectetur adipiscing elit vel, faucibus aptent sed urna placerat dui dictumst augue suspendisse, vivamus ad tincidunt habitant taciti blandit mi. Ultrices sem at commodo nam eu maecenas class, nascetur ad posuere aliquet quis nunc cras augue, montes cum semper etiam fermentum conubia. Nostra lobortis tellus aliquam primis urna facilisi elementum, morbi id imperdiet senectus inceptos rhoncus molestie suspendisse, ut ultrices non class mi eu. Vel aliquam velit ultrices metus netus primis vehicula scelerisque lacus, praesent montes curae suscipit felis id congue hendrerit, odio nulla augue inceptos purus neque duis vulputate.</p> <p>Purus egestas scelerisque massa donec ad magnis consequat himenaeos odio dui nam, justo ligula lectus vivamus sociosqu malesuada montes eget iaculis. Inceptos tortor dis nulla aliquet ultrices convallis natoque habitant, magnis pellentesque sodales taciti vestibulum congue. Fames massa morbi justo ante hendrerit malesuada a taciti ad, sociosqu tristique potenti ultricies nisl bibendum habitant.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit vel, faucibus aptent sed urna placerat dui dictumst augue suspendisse, vivamus ad tincidunt habitant taciti blandit mi. Ultrices sem at commodo nam eu maecenas class, nascetur ad posuere aliquet quis nunc cras augue, montes cum semper etiam fermentum conubia. Nostra lobortis tellus aliquam primis urna facilisi elementum, morbi id imperdiet senectus inceptos rhoncus molestie suspendisse, ut ultrices non class mi eu. Vel aliquam velit ultrices metus netus primis vehicula scelerisque lacus, praesent montes curae suscipit felis id congue hendrerit, odio nulla augue inceptos purus neque duis vulputate.</p> <p>Purus egestas scelerisque massa donec ad magnis consequat himenaeos odio dui nam, justo ligula lectus vivamus sociosqu malesuada montes eget iaculis. Inceptos tortor dis nulla aliquet ultrices convallis natoque habitant, magnis pellentesque sodales taciti vestibulum congue. Fames massa morbi justo ante hendrerit malesuada a taciti ad, sociosqu tristique potenti ultricies nisl bibendum habitant.</p>
]]>
          </Html>
        </Control>
        <Control Role="2001">
          <Name>Button1</Name>
          <Top>432</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <Text>
            <![CDATA[Button1]]>
          </Text>
          <Kind>primary</Kind>
          <TabIndex>0</TabIndex>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.44 (6/24/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Purchase one or more licenses of our products if they are useful to you!

Danny Cheah

Thanks David. I managed to get it done as per your suggestions.

Thank you.

Best regards,

Danny Cheah

DecSoft

You're welcome, Danny! :-)

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.