# Tabs, groups and help with CSS structure

**URL:** https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178
**Category:** Dashboard
**Created:** [20 April 2020 08:39 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178 "2020-04-20T08:39:11Z")
**Posts on this page:** 20
**Page:** 4

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 April 2020 09:48 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/61 "2020-04-22T09:48:30Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c275e0785dd0b02b50b09cfdb332fde80d47e606.png)

See 3 style tags without ID?  
Open them (click on arrow). If they are long, just open first and show me. We need to know what they are doing here.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 09:50 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/62 "2020-04-22T09:50:54Z")

</div>

![Screenshot from 2020-04-22 19-49-51](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/309e2dbf0ccb7ec71133969fcc6c402d1d7f356e.png)

 ![Screenshot from 2020-04-22 19-49-58](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f17307ece9a6367dbf7357fa5586d1d2f256a61e.png)

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [22 April 2020 09:53 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/63 "2020-04-22T09:53:35Z")

</div>

Do you perhaps have other CSS styles somewhere in your flows interfering with the styles @hotNipi is asking you to try?

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 09:54 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/64 "2020-04-22T09:54:38Z")

</div>

Probably.

Which is why I am not _liking_ CSS at this stage.

Though it is global, when you have a problem, it is a real problem working out what is going on.

I may have to disable all the other tabs ITMT.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 09:57 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/65 "2020-04-22T09:57:22Z")

</div>

(All)

I have **disabled** all other tabs.

Same.

Shall restart node-red and see what happens.

Na. No change.

☹

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 April 2020 09:58 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/66 "2020-04-22T09:58:40Z")

</div>

These are all your CSS customizing templates you have somewhere to do some styling.  
So two ways - even to analyse all of them and search what affects or turn them temporary inactive and leave only what we are currently working on. Any way you'll need to find all 3 of those.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 10:00 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/67 "2020-04-22T10:00:16Z")

</div>

Yes, I $tuffed things up.

As said, I have **disabled** all other tabs.

I have also:  
Restarted Node-red.

No change.

Now opening in a **private** window to see if that changes anything.

Na. Window still corrupt.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [22 April 2020 10:00 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/68 "2020-04-22T10:00:54Z")

</div>

Andrew, this is why I said...

> [@Steve-Mcl](#):
>
> Just put all your styles in one head template

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 April 2020 10:01 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/69 "2020-04-22T10:01:12Z")

</div>

Easy. Step by step.  
Now as you have disabled, let see that head part again

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 10:04 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/70 "2020-04-22T10:04:01Z")

</div>

Yes, I agree. But I think you are not appreciating how messed up things are with me just now.

I am **way** over my head with this `CSS` stuff.

(Fish riding a push bike)

Given its _overwhelming coverage_ it does not allow people like me to try things.

If I do, and move to another task, I have to delete all the other stuff.

That it can't be localised to that _sheet_ (tab / what ever) is really off putting for me because of the afore mentioned problem.

Again though I shall state:

I have **disabled all other tabs**. Only this tab is active.

I have since restarted node-red.

SAME PROBLEM.

And trying to _drive_ this _devtools_ is again another bike this fish is learning to ride.  
I am not familiar with it. It is very much _stab in the dark_. Though I sort of get it, I am slow at finding the things for which I am asked.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 April 2020 10:06 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/71 "2020-04-22T10:06:36Z")

</div>

Please. Keep concentrated and do what I asked.  
We going to fix that "multiple css adjustments" problem later.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 10:07 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/72 "2020-04-22T10:07:45Z")

</div>

I am having trouble finding that part - again.

Hang on.  
(sorry this is a bit of a wasted post)

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [22 April 2020 10:09 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/73 "2020-04-22T10:09:45Z")

</div>

You realise you can put all your CSS in one head template & still test stuff right?

Just comment parts out

- highlight the old stuff, press `ctrl+/
- enter new test stuff

e.g.

```auto

<!-- disabled for now - doesnt work well (delete later)
<style id="cssV1">
 .some-class{
    width: 95%
  }
</style>
-->

<!-- new trial CSS -->
<style id="cssV2">
 .some-class{
    width: 100%  
  }
</style>

```

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 10:10 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/74 "2020-04-22T10:10:09Z")

</div>

This?

 ![Screenshot from 2020-04-22 20-09-16](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/1/c1cc4bc7056e378cbfcb3ae98bb798112e678cbb.png)

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [22 April 2020 10:10 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/75 "2020-04-22T10:10:47Z")

</div>

I'll leave you two guys to it.

Andrew, trust us, stick with this - you'll get it.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 April 2020 10:11 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/76 "2020-04-22T10:11:33Z")

</div>

Yes but open the `head` section

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 10:11 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/77 "2020-04-22T10:11:52Z")

</div>

Thanks Steve.

I do appreciate it.

I know there is no way on Earth I will understand it without help.

I just hope I can understand what is told/shown to me.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 10:13 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/78 "2020-04-22T10:13:28Z")

</div>

Sorry... See... I am hanging on only just.

This:

 ![Screenshot from 2020-04-22 20-12-12](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/a/ba431ef4dc46b8d88e627f165d1c6418e4405adb.png)

Just in case I missed the important part.

 ![Screenshot from 2020-04-22 20-12-56](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf9e0ceb4905685c37f4c6835529f939bc506565.png)

I'm guessing this is what you want to see:

 ![Screenshot from 2020-04-22 20-14-37](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2c3473502b5474acf39676b9cf4661fa5ff436d2.png)

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 April 2020 10:24 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/79 "2020-04-22T10:24:22Z")

</div>

Good. Now we know, that everything is under our control.  
Let's go deeper.

Right click on one of buttons and select -\> inspect element  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d82aa38e8e19849e9d56ae86f16ccf5d4a50e1bb.png)

Selected element should be \<button class (you know, our button)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e959cbc0b0da55f1d453ec6f43894227a8202af.png)

I need to see what is in styles when the button is selected that way

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b03da903a4aacd585b6fa4fb4a02f33153f01842.png)

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [22 April 2020 10:27 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/80 "2020-04-22T10:27:45Z")

</div>

I hope this is what you want:

This is the **red** button.

 ![Screenshot from 2020-04-22 20-27-06](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3fa0a5eb708bcbaeef6e96e2974d2b569883bf64.png)

[Previous page](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178.md?page=3)

[Next page](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178.md?page=5)