I hope the New Year finds you well. I am getting on well with UIBUILDER, so much so that I am now determined to get EXACTLY what I want, not just a close facsimile.
I need to put some text in a flex box along with a single row table (basically coloured dots representing device status), but I appear to get an unusable margin that I cannot seem to remove. In the documents, I read that Tables do come with a Top and Bottom margin of 1rem. It shows in the Browser Developer Tools a brown coloured area above and below the actual table.
Tables are bordered (using collapsed borders). The colour for the table border is --text3. Inner borders use --surface4. The table has a top & bottom margin of 1rem.*
Is there any way to get rid of this margin?
If not, why is it there?
As always with the default uib-brand.css file, it is there because I think it looks reasonable in most cases and nobody else has complained about it.
Since the CSS for table styles in the default CSS is largely generic, it should have a low specificity. That means that you should easily be able to add your own CSS that is more specific to override it.
A typical way to get more specific with CSS styles is to add a class. Or, if you want to get very specific, add an ID (both to the <table> HTML of course).
Your dev tools will show you all the CSS that is impacting any element on a page which is often of help.
Typically, use a class if you are likely to want to reuse the same style elsewhere or use an ID style if you know you only ever want to use it in one specific instance.
BTW, there is a "nuke-it-from-orbit" option for CSS styles as well, the much abused !important modifier. This will maximise the specificity of the entry and override everything. But this often will come back to haunt you later on, so best reserved for emergencies. It can, however, be useful when forced to use someone else's styles - e.g. in the Node-RED Editor Thankfully, UIBUILDER would never force you to use my CSS styles! So if you find yourself fighting them too often, just don't use them or make your own copy to change as you like!
But this is the reason that all of my templates use a CSS File that imports the uib-brand styles, it means that your specific CSS overrides anything I've put in - so redefining table in your own CSS like this:
table {
margin: 0;
}
Should in fact override that setting for all of your tables anyway. That's why the C in CSS is "cascading" after all.
I knew it would be easy. I have spent most of today trying to get rid of those margins with style in the span statement. Having read your post, I might have got close several times, just didn't get the cigar (or whatever the prize is there days!).
I had tried margin-top and margin-bottom with 0 em/rem but that didn't make a difference, of course by then I had probably messed something else up!
Thankfully, UIBUILDER would never force you to use my CSS styles! So if you find yourself fighting them too often, just don't use them or make your own copy to change as you like!