1

Dynamic height of table view

Dear Community
does anyone of you have a css or other idea how to make a table view always being 100% height?

In my case I am using some pages with tabs. In each tab I have some buttons / labels and below a table.
When I know make the table the height of the empty screen on my large TFT all is fine as long as I am using this app. When another person with a smaller screen (or a tablet) uses this page the table is much too long in height. So in this case the person will have two(!) scroll bars. one for the page and one inside scrollbar in the table view. Which is more than confusing. 
When I design my table too small I waste many space and will get a scrollbar inside the table view also when I have enough space outside the table view element...

many thanks for your advise...
Christian

8 replies

null
    • szormpas
    • 3 wk ago
    • Reported - view

    Hi, if you want to have such control of your table, my suggestion is to create an HTML one from scratch.

      • Christian_Sennewald
      • 3 wk ago
      • Reported - view

      Hy  
      is there any suggestion howto on how to build such an html table from scratch?

      Because you have to bind the data and eventhandler to such a table :D

      many thanks

      Chris

    • Fred
    • 3 wk ago
    • Reported - view

    Christian -

    Are you talking about the Ninox field size? If so then I don't there is a way to make that dynamic. I could be wrong but I haven't seen a way. I hope to be proven wrong.

      • Christian_Sennewald
      • 3 wk ago
      • Reported - view

      hy  

      I am talking about the height of the table view or in German "Ansicht"

      You can drag the width and height of such a view as you like. but you have no chance to bind it to the bottom...
      thats what I am looking for.

      I've seen some additional mods by 

      maybe he have an idea on how to do that...

    • Christian_Sennewald
    • 3 wk ago
    • Reported - view

    I may found a solution with javascript.
    You have to insert a fx field BELOW the table with the attached code.

    In the code you have to provide three parameters. The counter of the field where my table view is located (0-based) the offset from the top and the inner table offset (which always should 41px)

    let htmlCode := "<script>
    var debug = true;
    var elementCount = 3;
    var heightOffset = 150;
    var tableBodyHeightOffset = 41;

    function adjustTableHeight() {
        var locator = document.getElementById('heightLocator');
        log('HeightLocator: ', locator);
        var locatorComponent = locator.closest('.component');
        log('Locator Component', locatorComponent);
        var parentForm = locator.closest('.form');
        log('Closest Form', parentForm);
        var container = locator.closest('.object.--ul-document-object');
        log('Closest Container', container);

        if (container && parentForm) {
            var height = container.offsetHeight;
            log('Found container with height: ' + height + 'px');

            var listComponent = parentForm.getElementsByClassName('component')[elementCount];
            log('listComponent found', listComponent);

            var list = listComponent.getElementsByClassName('list')[0];

            if (list) {
                //Set List height
                log('Found List Element. Setting height...', list);
                var heightValue = """" + height-heightOffset + 'px' + """";
                list.style.height="""" + heightValue + """";
                log('New list height: ' + list.style.height, list);

                //Set Table Body height
                var tableBody  = list.getElementsByClassName('nx-table__body')[0];
                if (tableBody)
                    tableBody.style.height = """" + height-heightOffset-tableBodyHeightOffset + 'px' + """";

                //Hide Locator Component itself
                locatorComponent.style.display=""none"";
            }
        }
    }

    function log(message, obj) {
        if (debug === true) {
            console.log(message, obj);
        }
    }

    //Trigger adjustment after 500ms
    setTimeout(""adjustTableHeight()"", 500);


</script>
<div id='heightLocator'></div>
";
html(htmlCode)
    • Ninox developper
    • Jacques_TUR
    • 3 wk ago
    • Reported - view

    You can try this solution, which adapts directly to the other fields already in the window so that only what's available is filled in. The height is updated each time the formula is refreshed by Ninox.

    var viewName := "Eléments de déroulés";
html("<script>
    debugger;
var el = Array.from(document.querySelectorAll('label')).find(label => label.textContent.includes('" +
viewName +
"'))?.parentElement  if (el) {
    let dy = el.parentElement.parentElement.clientHeight - el.parentElement.clientHeight;      // Créer un élément de style
    const styleElement = document.createElement('style');      // Ajouter des règles CSS
    styleElement.innerHTML = `
        .fullUpdateView {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height : ${el.clientHeight+dy+'px'};
        }          .fullUpdateView .list {
        height: 100% !important;
        }          .fullUpdateView .nx-table__body {
        height: auto !important;
        }
`;      // Ajouter l'élément de style au parent
    el.parentElement.appendChild(styleElement);      el.classList.add('fullUpdateView')
}
</script>")

     

    • Ninox developper
    • Jacques_TUR
    • 3 wk ago
    • Reported - view

    You can also call JavaScript using the execJs method proposed in this post https://forum.ninox.com/t/g9y6zx5/download-file-and-javascript-calling.

    function execJS(code : text,autoClose : boolean) do
    dialog("Download", html("<div id ='execJS'>exec JS</div><script>" + code +
    "
    if (" +
    if autoClose then "true" else "false" end +
    ") {
        debugger;
            var interval = setInterval(() => {
              let myDiv = document.querySelector('#execJS')
              if (document.querySelector('.nx-alert') && myDiv) {
                var bt = myDiv.closest('.nx-alert').querySelector('.nx-button-text')
                if (bt) {
                  bt.click();
                  clearInterval(interval);
                }
              }
            });
          }

    </script>"), ["ok"])
end;

function updateViewSize(fieldName : text) do
    execJS("
var el = Array.from(document.querySelectorAll('label')).find(label => label.textContent.includes('" +
        fieldName +
        "'))?.parentElement;
if (el) {
    let dy = el.parentElement.parentElement.clientHeight - el.parentElement.clientHeight;      // Créer un élément de style
    const styleElement = document.createElement('style');      // Ajouter des règles CSS
    styleElement.innerHTML = `
        .fullUpdateView {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height : ${el.clientHeight+dy+'px'};
        }          .fullUpdateView .list {
        height: 100% !important;
        }          .fullUpdateView .nx-table__body {
        height: auto !important;
        }
`;      // Ajouter l'élément de style au parent
    el.parentElement.appendChild(styleElement);      el.classList.add('fullUpdateView')
}
", true);
   true;
end

    By inserting execJS and updateViewSize into the global functions, you can then run updateViewSize from the "Display field only, if" trigger. There is then no need to add a formula to the window.

      • Ninox developper
      • Jacques_TUR
      • 3 wk ago
      • Reported - view

      I've noticed that the system doesn't work as smoothly as expected, with occasional display issues. It seems this is related to the fact that not all rows are displayed at once in the list. Instead, only a portion of the previous and subsequent rows are generated, creating the illusion that you're scrolling through the entire list, when in reality, only part of the records are being loaded. This is an excellent method for optimizing row loading times and display performance. However, when the display settings are modified from the user interface, the scrolling function can sometimes struggle, leading to some confusion in the rendering.

Login to reply

Content aside

  • 1 Likes
  • 3 wk agoLast active
  • 8Replies
  • 79Views
  • 5 Following