Replies: 1 comment
-
Hi @mattie47, thanks for sharing your experience! NiceGUI's element IDs are a bit of a pain point. In Python they are integers, but because HTML doesn't like them to be pure numbers, we add a "c" prefix for "component". There have been proposals to add a customizable ID attribute (e.g. #1583), but so far we didn't see a good use case for it and we haven't been convinced that the user should be able to modify these internals. Even worse, there is no guarantee that there will be an element in the DOM with the corresponding ID. Take For debugging purposes, like in your case, you can simply add something like |
Beta Was this translation helpful? Give feedback.
-
Question
Hi,
I spent some time today trying to debug an issue around not knowing where a certain DIV was coming from.
Whilst the situation was quite unique (I'll elaborate below), it left me wanting to be more explicit with declaration of elements and having identifiers for the element.
To my main question - What would best practise be for adding IDs to elements we add with NiceGui?
For example, you can do something like:
which renders:
This of course overwrites the dynamically generated div/element id created by default for niceGui, but it does mean if you're stuck trying to figure out where an id is being created, you don't have to add a bunch of print statements for each element with element.id to see what gets generated.
If we do decide to add an identifier to objects of some respect, what's the best practise around this?
From the above, we can:
I don't have a web dev background, so rather than simply pick one and go with it, I thought I'd ask here what's recommended? :)
Thanks!
For today's problem:
I had an empty div appearing on the page as the first item in every page. This was causing unexpected extra padding at the start of each page's content div:
Without sharing my code, I could see what was generating ids c1, c2, c3, and c5 onwards, but not c4.
For c1, c2, and c3, I could see they were generated by
nicegui/client.py
which presented:
I tried adding debug to my code such as the following to try figure out where c4 was coming from:
However this didn't get me much further and I started simply commenting out large swaths of code.
It turns out someone else working on our project had added:
To one of the sub-pages, that was getting activated as part of an import statement at the start of our main file.
So I was glad to figure this out, and thought the process of troubleshooting I went through might be useful for someone else here :)
Beta Was this translation helpful? Give feedback.
All reactions