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
-
Hi, if you want to have such control of your table, my suggestion is to create an HTML one from scratch.
-
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.
-
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)
-
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>")
-
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.
Content aside
-
1
Likes
- 4 mths agoLast active
- 8Replies
- 193Views
-
5
Following