DecSoft Support - Report Object Overlapping in a Container Object

Report Object Overlapping in a Container Object

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Take a look at some frequently asked questions about us and our products!

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Danny Cheah

Hi David,

I have 3 report objects placed inside a container object as shown below. When I run the application, the content of the report seems to overlapping as shown on the second picture.

How do I resolve it? I have set the report style overflowx to visable so that the content is shown in full without the scroll bar. Is there a way to make the contents of each of the report object not to overlap?

Thank you.

Best regards,

Danny Cheah

DecSoft

Hello Danny,

I am not sure, but, you mention the "overflow-x" CSS rule... it's not "overflow-y" what you are looking for or must use?

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

Danny Cheah

Hello David,

My report object ReportNewDevotion and ReportNewStory place in the view was not overlapping each other. They have a space between each other during design time. But during runtime, the content of ReportNewDevotion and ReportNewStory merge together without having a space between them. What must I do to show the space between the two reports object during runtime?

Thank you.

Best regards,

Danny Cheah

DecSoft

Hello Danny,

I am not sure if can understand, since, placing the Reports with the space that you wanted, and then, using the "overflow-y" CSS rule, in principle, the content of the reports must not be overlapped. So probably I am missing something...

Please, copy the below code and save it in a "Reports.ab" file: the sample app is a modification of the Report sample app, which include three reports in the same app view. As you can see, the spaces between the reports are not overlapped, and, what we do is only to leave the space that we wanted in designtime, and use the "overflow-y" CSS rule set to "auto".

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.50">
  <App>
    <ID>com.appbuilder.report</ID>
    <Name>Report</Name>
    <ShortName>Report</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>info@decsoftutils.com</AuthorUrl>
    <AuthorEmail>https://www.decsoftutils.com</AuthorEmail>
    <Created>2015-08-02T12:00:00.000</Created>
    <Modified>2019-11-28T10:36:31.720</Modified>
    <Metadata />
    <Webapp />
    <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>NewView1</Name>
      <Animation>fadeIn</Animation>
      <ShowEvent>
        <![CDATA[
StartJS

  window.App.RootScope.Report1.Data = [
   {
      "ID":1,
      "Name":"Jhon",
      "Sports":[
         "Futbol",
         "Running"
      ]
   },
   {
      "ID":2,
      "Name":"Abel",
      "Sports":[
         "Rugby",
         "Tenis"
      ]
   },
   {
      "ID":3,
      "Name":"Peter",
      "Sports":[
         "Futbol",
         "Billiard"
      ]
   },
   {
      "ID":4,
      "Name":"Charles",
      "Sports":[
         "Tenis",
         "Surfing"
      ]
   },
   {
      "ID":5,
      "Name":"Albert",
      "Sports":[
         "Futbol",
         "Running"
      ]
   },
   {
      "ID":6,
      "Name":"Clint",
      "Sports":[
         "Basket",
         "Running"
      ]
   }
];

window.App.RootScope.Report2.Data = window.App.RootScope.Report1.Data;
window.App.RootScope.Report3.Data = window.App.RootScope.Report1.Data;

EndJS
]]>
      </ShowEvent>
      <Controls>
        <Control Role="7001">
          <Name>Report1</Name>
          <Top>8</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>144</Height>
          <Style>background-color: #fff; border-radius: 0.4em; border: solid silver 1px; overflow: auto; </Style>
          <Loading>Loading...</Loading>
          <Html>
            <![CDATA[
<td>
 [Record.ID]
</td>

<td>
 [Record.Name]
</td>

<td ng-repeat="Sport in Record.Sports">
 [Sport]
</td>]]>
          </Html>
        </Control>
        <Control Role="7001">
          <Name>Report2</Name>
          <Top>168</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>144</Height>
          <Style>background-color: #fff; border-radius: 0.4em; border: solid silver 1px; overflow: auto; </Style>
          <Loading>Loading...</Loading>
          <Html>
            <![CDATA[
<td>
 [Record.ID]
</td>

<td>
 [Record.Name]
</td>

<td ng-repeat="Sport in Record.Sports">
 [Sport]
</td>]]>
          </Html>
        </Control>
        <Control Role="7001">
          <Name>Report3</Name>
          <Top>328</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>144</Height>
          <Style>background-color: #fff; border-radius: 0.4em; border: solid silver 1px; overflow: auto; </Style>
          <Loading>Loading...</Loading>
          <Html>
            <![CDATA[
<td>
 [Record.ID]
</td>

<td>
 [Record.Name]
</td>

<td ng-repeat="Sport in Record.Sports">
 [Sport]
</td>]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts>
      <Path Query="">https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js</Path>
    </Scripts>
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.50 (11/9/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2020 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Take a look at the above sample, and, please, post here any further questions.

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

Danny Cheah

Hi David,

Thanks for the help.

Thank you.

Best regards,

Danny Cheah

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.