Hey there!
I've created a button list that's being driven from a data series. Occasionally, the data can cause the button list to take up more space than the page has, which creates a scrollbar at the bottom.
To get around this, I wanted to style the parent ButtonList control to use the CSS grid to effectively "wrap" my buttons around the page.
So, in the onInitializeComplete client-side event, I used JavaScript to adjust the styling of the control (because for some reason no styling properties are available in Alpha for button lists). Initially I hardcoded the ID, like this:
This worked. However, when I published to the server, the component name changed. So I tried to use the {dialog.ComponentName} placeholder to grab the component name, like so:
Here's the weird thing... now I'm getting an error:
VM1111:411 Uncaught ReferenceError: TBI_UX_DASH_16651DGEJ is not defined
When I inspect my controls, this is indeed the appropriate component name. What's weirder is that if I hard-code the component name that's showing on the server, it can select & style the element just fine. Is onInitializeComplete firing before the component is fully initialized perhaps? Would there be a better event to place this code in, or a better way of styling the ButtonList without using JavaScript that I'm missing entirely?
Thank you!
I've created a button list that's being driven from a data series. Occasionally, the data can cause the button list to take up more space than the page has, which creates a scrollbar at the bottom.
To get around this, I wanted to style the parent ButtonList control to use the CSS grid to effectively "wrap" my buttons around the page.
So, in the onInitializeComplete client-side event, I used JavaScript to adjust the styling of the control (because for some reason no styling properties are available in Alpha for button lists). Initially I hardcoded the ID, like this:
Code:
document.getElementById("DLG1.V.R1.SELECT_PROJECT.CONTROL").style = "display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1px;"
Code:
document.getElementById({dialog.ComponentName} + ".V.R1.SELECT_PROJECT.CONTROL").style = "display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1px;"
VM1111:411 Uncaught ReferenceError: TBI_UX_DASH_16651DGEJ is not defined
When I inspect my controls, this is indeed the appropriate component name. What's weirder is that if I hard-code the component name that's showing on the server, it can select & style the element just fine. Is onInitializeComplete firing before the component is fully initialized perhaps? Would there be a better event to place this code in, or a better way of styling the ButtonList without using JavaScript that I'm missing entirely?
Thank you!
Comment