DecSoft Soporte - Problem using HTML control and Other Control on Same Page

Hello Michael,

If I understand well, what can happen is that the contents of the HTML control exceeds the control height, so, it's placed out of the control, causing that other controls below the HTML control don't appear as expected. If this is what happen, the solution is to use an "overflow-y" CSS rule (set it to "auto") for the HTML control, so their contents are shown using a scroll if needed, but, never exceeds the control height.

Take a look at the below sample app, copy the code and save it into a "MyApp.ab" file, for example:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.49">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</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>2019-10-11T09:19:47.829</Created>
    <Modified>2019-10-11T09:21:00.484</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <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>32</Top>
          <Left>16</Left>
          <Width>288</Width>
          <Height>192</Height>
          <Style>overflow-y: auto; </Style>
          <Html>
            <![CDATA[
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at convallis dui. Aenean arcu ante, porttitor eu porttitor at, egestas pulvinar arcu. Praesent pulvinar sem eget faucibus finibus. Donec elementum libero non blandit commodo. Aliquam sagittis eleifend velit non luctus. Aliquam at purus a turpis fringilla luctus at quis erat. Integer vitae sapien maximus, hendrerit quam et, congue erat. Nam euismod neque erat, et sollicitudin nisl fringilla quis. Vivamus eu turpis cursus, pretium nisi sed, ullamcorper risus. Quisque sed leo ut ligula lobortis imperdiet vel ac velit. Donec consectetur tortor sit amet pretium aliquam. Mauris auctor, nibh aliquam luctus vehicula, enim quam ultrices sapien, a malesuada nulla leo ut odio. In hac habitasse platea dictumst. Aliquam vestibulum lobortis nibh lobortis feugiat. Etiam dignissim metus dolor, ut laoreet erat aliquet ac. Maecenas sit amet molestie augue.
</p>
<p>
 Vivamus sollicitudin consectetur risus, vitae vestibulum turpis iaculis vel. Maecenas vitae interdum nunc, fringilla hendrerit enim. Vivamus sodales a urna nec lacinia. Nam sit amet aliquet nisi, ut gravida arcu. Duis ut scelerisque nisl. Suspendisse eget dignissim augue. Donec sodales leo fringilla, tempus risus non, condimentum dolor. Morbi eget sem arcu. Aliquam varius quam non erat convallis interdum. Suspendisse quis augue in ipsum rutrum tempor.
</p>
<p>
 Nunc bibendum est mi, vel pretium ante facilisis non. Nam vel pellentesque felis. Proin tincidunt turpis at arcu iaculis rutrum. Sed sagittis pretium lacus at luctus. Aenean dapibus pulvinar justo, vel mattis arcu venenatis non. Integer nec sollicitudin sapien. Sed dictum tristique urna, sit amet aliquet nulla aliquam et. Curabitur ut ligula tortor. In lobortis ornare velit. Mauris vitae eleifend turpis. Donec nec eleifend elit, vel egestas sem.
</p>
<p>
 Donec ut nisi dictum enim efficitur imperdiet sed at eros. Nunc id massa quis est egestas sollicitudin. Donec in augue quam. Donec hendrerit convallis vestibulum. Proin eget est ut ligula rhoncus mollis. Suspendisse sed tellus eu metus sagittis interdum nec nec ex. Proin orci ante, tincidunt id dapibus quis, tristique eu diam. Curabitur sollicitudin venenatis orci, at pellentesque mauris varius sit amet. Nulla tortor nulla, bibendum id eleifend ac, aliquet non risus. Ut iaculis dignissim nibh, sed scelerisque lacus porta imperdiet.
</p>
<p>
 Duis lacinia leo ac ipsum dapibus, eu pellentesque lacus eleifend. Suspendisse lacus purus, dapibus a lectus at, molestie iaculis velit. Donec ultricies auctor aliquet. Duis ut fermentum nulla, et blandit nisi. Morbi porta ligula risus, vel facilisis velit aliquet non. Sed ultricies venenatis auctor. Nam eget fermentum purus, vel aliquam urna. Donec bibendum auctor malesuada. Duis laoreet erat at hendrerit pretium. Suspendisse pellentesque, sem in eleifend sodales, nisl sapien porttitor massa, non rhoncus metus nunc vel dui. Nulla tempus magna leo, posuere mollis tortor cursus ac. Praesent viverra dignissim sapien vel aliquam. Etiam malesuada imperdiet aliquam. In malesuada efficitur odio ac maximus. Aliquam finibus, felis ac rhoncus vehicula, risus ipsum commodo lorem, eget tristique justo ligula nec ligula.
</p>]]>
          </Html>
        </Control>
        <Control Role="2001">
          <Name>Button1</Name>
          <Top>232</Top>
          <Left>16</Left>
          <Width>288</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.49 (10/10/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2020 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

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