Rules disappearing when hiding classes

[babmos]

Hello, I’m currently testing the demo of PG, watching tutorials and stuff. Coming from Bootstrap Studio I like how PG allows direct interaction with code and parses JS in the site.

One thing is puzzling me though, when I select element A and click the hide button on a class, it becomes grey and I can activate it again. But when I select another element B on the page and then go back to element A, the class is listed as “classes without rules”. Is this the expected behaviour? To me, it seems like these rules disappear for no good reason.

Also, when selecting an element in the DOM tree at the bottom, the little sidebar on the right is too far below, so only the trashcan can be selected. I’ve seen screenshots when DOM elements had the eye icon right beside their names, that was a better solution IMO.

[schpengle]

I just went to try this out and check it out for you, but I hit a problem.
it didnt work at all for me.
I couldn’t get the check line to appear through the eye icon and hide the class.
I then tried on individual rules in the class. still nothing.
then Tried to delete it. Nope.

…then went to view the bootstrap classes , in the bootstrap css that applied to a different element.
now THAT one would hide.

then went by to my custom classes.
Bingo! First one worked as expected. hid, unhid a css property in the class, then
hid the whole class itself.

and yes, I then get the same behaviour as yourself.
and I couldn’t get the classes without styles
To appear without either clicking a pseudo class or the active tab.

here is a vid.
with bad background music, lag and no voice explanation.
Excellent video production skills this evening

[schpengle]

And as you can see, I’m also puzzling why the Pseudo classes don’t show up in the list either, unless you click the show hover/active/whatever buttons.

So if there is. broken or not working pseudo class, or one created but not finalised, it doenst show up … so you wouldn’t know it exists (oh well, ok If you looked in your styles.css you would see it ,but, not in the active classes (ok so it’s not active unless your doing the thing but EVEN THEN it doenst show up.
ie, if you hover over it… you see the hover effect, but cant view the class.
odd.

[babmos]

Thanks for taking your time to reply. Meanwhile I discovered that the rules are not deleted, but commented out in the css. So I can restore them by uncommenting them in the code editor, then they properly show up in the properties window. But it’s very cumbersome for something that simple, and doesn’t seem like it’s intended.

[schpengle]

Yes, that’s why I included the style.css sheet bottom left of my video so you could see them commented out.

I’m pretty sure this isn’t how it used to work.
but, I could be wrong.
I quite often am

[schpengle]

Ok, so I obviously have no social skills, have become an insomniac and am having fun with Pinegrow while rearranging my room… at 2am so!

here is a way to unhide (the other way, apart from uncommenting out the .css file code.

Again, not quite sure if its behaving as expected.

so, taking my exploration a step further, here we go
how to unhide classes using the interface.

extended mix

[Printninja]

I guess this behavior makes sense. I used to wonder why the style would disappear from the active view if you disabled (“grayed out”) the rules, but I can see now it’s by design, since it’s no longer technically an “active” style. Mystery solved. Good work @schpengle !

[schpengle]

but…it is STILL displayed… and greyed out in the Active tab, for you to view in all its glory…
…until you go sniffing around other elements then BOOM… no longer in the Active…greyed out, which
is where I would EXPECT (and hope) TO find it again…

SO I can kind of guess thats the logic, but… it seems counter intuitive to me.
…but I have just had my head bent sideways by erratic pseudo code behaviour.

I really never get far at web building, I just revert to type and end up debugging! gah
oh and its 7.20am here, not been to bed yet, its rather cold, has snowed but Ive nearly finished sorting my two downstairs rooms out.

The Geekorium shall be a wonder to feast the eyes upon… and the butt! comfy sofa now

what do you reckon @Printninja?
Do you think it should remain in active tab, greyed out
OR… when you click the ACTIVE tab itself, it then says

Classes without rules title

er well thats not actually true, it DOES have rules… they are just commented out.
I now know why I kept ending up with multiple versions of the same style some time ago. This I kept re creating it.

maybe as well as Classes without Rules
It could say CLasses you have Hidden - then you click on it and reveal it again .

but WHY should you have to click the Active tab in the first place… for a class you cant see to appear… as a class…with no rules , which isn’t correct… which you then have to click the stylesheet icon… open the style sheet…find the style and FINALLY reveal it! Sheesh.
what a palaver.

Right , really must try bed again now, catch you all in a bit cheerio from snow land (once Ive put bread out for the birds…if they aren’t frozen to the branches, poor things.)

[Printninja]

How about a third tab - Classes with hidden rules?

[babmos]

I don‘t think there is a need for a third tab, it should just behave the same way it does at first hide and stay in the panel, grayed out. The element still has the class, the panel shows active but hidden classes/rules. Otherwise the class should disappear from the panel the very moment you hide it, since by your logic, it’s not active anymore.

Hiding is a great feature, and it’s all fine and dandy with a few elements and a dozen of classes, but this hunting around becomes really old, really fast with a somewhat serious site. This tool is supposed to make web dev easier, right?

[schpengle]

mmmm. not sure we need anymore tabs really, even though we have just got a pile more real estate to play with.

I would suppose that either

1. it STAYED in the Active tab, but greyed out (most logical) -not there when you first hide and view it, then …dissapears, once you click some other element, for you to go hunting around somewhere else to find.

And what is weirder is that you HAVE TO CLICK THE ACTIVE TAB - (which. apparently it isn’t - so isn’t listed there anymore - in order to INCORRECTLY see it listed as - Styles with no rules
eh? -but it DOES have rules. and whats More I cant see them
BUT… I cant open the style manager and CREATE new rules for it! (since the old ones don’t show up there either !)

or 2, where it says Styles with no rules

IT should probably also say HIDDEN STYLES - and list them with an eyeball and delete symbol, so that I could simply and instantly view them again… or think oh yeah< I hid that and it made no difference so I can delete that safely

and to be honest…

I think the Pseudo states SHOULD be visible in the Active tab too.

Too me, the logical thing to do with regards the pseudo states is , for example , this
shows my confusion when using it.

ok , video editing getting all messed up by Youtube not processing things in order.
SO! Lets see which one this is then eh?

and at 0:58 I mention creating new class twice, I mean create new rules for that class.

just made a video (again, for a change) and am working on a possible UI suggestion
will upload it shortly and then update this post

Still working on this video due to me discovering yet more features

UPDATE

And then I broke it… again.

and at 1:28 in this, after toggling a style class in element properties class, I then click on a different element and return to the previous element and - you will see that the class isn’t in its toggled off state, but rather it has dissapered.

I would expect it to still be there.

[Marf]

Sorry, but Pinegrow did everything right!!!
You made a few mistakes and wrong assumptions.

---

In the second video “I’ve broken Pinegrow’s Style Editor - and inconsistencies”, in the beginning you have 2 “page previews”, MD (768px) and XS (480 px). The CSS rule “.title” has a media query “min-width:992px”. Both “page previews” are SMALLER than 992px, so the “CSS rule” is not in affect and ignored in the “page previews” and also in the active “style panel”.

After restarting Pinegrow in your video, your “page previews” are different, now they are LG (1024px) and XS (480px). Now you have suddenly LG with 1024px which is bigger than 992px, so NOW the “CSS rule” is in affect and active!

---

The difference between the “Element panel” and the “Style panel”. Important to know is that the “element panel” is showing your HTML file (index.html) and the “Style panel” is showing your CSS file (style.css).

Disable the “classname reference” in the “Element panel”, is NOT the same as disable the matching “CSS rule” in the “Style panel”. That’s why they behave different and are not in sync (different actions).

When you disable the classname in the “element panel”, you disable the “classname reference” in the HTML file. And not the actual “CSS rule” in the CSS file, that’s why the “CSS rule” is not disabled in the “CSS file” at the “Style panel”.

When you disable the “CSS rule” in the “Style panel”, the “classname reference” is still in the HTML file, so that’s the reason why Pinegrow shows the message “class has no rules”. Because you disabled the “CSS rule”.

---

Hopefully it is now clear for you and made a bit sense to you!

[schpengle]

Thank you @Marf

.did you actually read what I wrote and then paste it back?

It Get all that now. But it wasn’t easy.
It was all added to one of the youtube vids, but
youtube went all weird and proccessing cant be completed, try later and messed up some of my vids.

Anyway I wrote more or less what you did but
it isn’t at all intuitive or people getting to grips with the PG interface.
like…me.
5 years. FIVE and it still confuses me! hows that for a reference?

so im working some suggestions out now
oh yeah and thanks for the heads up on the screen size.
Yep! your right! cheers for that! great, but the point is. I DIDNT actually change the view size myself.

And I also didnt notice! since that was nothing I would have checked as it wasn’t something I had touched.
oh well! it WILL be something I check next time!

Pinegrow was doing weird randomness . or at least I appeared to be to me.

I shall recheck

I willl now go back and torture myself with my own vids, …noticing the screen size on the left.
Gah! how the heck did that change?

here we go

Some Suggestions to overcome some of the issues Ive had with Pinegrow for a long time.

1. Toggling the Class on and off - this ADDS and removes the Class from the element in the page code BUT If it is hidden in

2. … then I see no difference! And there is NO POP UP to say hey !your adding a hidden class, would you like to unhide view the style rules or such like and, tis NOT like Pinegrow doesn’t really revel in Pop ups Galore really is it? so…what is one more USEFUL, logical one? pretty please.

Also, I NOW realise that the PROPERTIES panel will only APPLY/REMOVE the style in the HTML CODE for that ONE ELEMENT I am viewing.

….however, the HIDE class in the Style editor does it SITE WIDE, for anything that uses that class.

This has taken me a while to figure out.

OOp.s

But it does lead to a situation where I am toggling the class on and off in 1, but nothing happening , as the class is hidden in 2.

Maybe I should be doing this differently, or yes, another pop up!

So that 1 and 2, are either in sync or have a big flashing light and Klaxon horns blaring to alert me.

3. Now when you view the PSEUDO class tabs, there is NO INDICATOR that there are ANY pseudo classes applied to the element I have selected. Unless I click the actual selected pseudo class tab.

All of them. FOUR of them, just to have a look! Not very efficient.

SO! How about you colour highlight them the same way you do in the Visual Inspector pane hamster, ie, BLUE if there is something actually applied in that section - even if its hidden….yes,

ESPECIALLY if its hidden…say buried in a media query? As there is NO WAY to view this!

Unless you open everything up and drill down.

Or….I’m a dufus, please show me how.

NOTE< I stand to be happily corrected on all of this if Ive missed the most basic of instruction.

5…. ok… five, now just what is five about and how come Ive never seen it before?

6. Colour coordinated VIEW SIZE to ASSOCIATED MEDIA style rules and rules not applied at certain sizes.

Just some idea. Do any of these seem useful?

They would make my life a little easier

….maybe.

this didnt upload earlier but Yeah! it’s a lot like @marf just said and so does one of my videos, in the description… the one which appears to be missing. gah.

[schpengle]

and what about the pseudo class weirdness @marf? What do you reckon on that?
ie , if you have multiple views, … and a pseudo class or two only apply to one size (or multiple)
then… how are you supposed to view it, once its hidden?

ah! yes! I have just seen now that the screen size is set to MD!!!
GAH thanks, it wasn’t originally. it was large.
when the heck did that change I was following along with the video, so that didnt happen.
Or…it did . I shall now to check.

Everyday’s a school day! great!
Cheaper than University (but considerably less chicks and beer in my house )

if there are already simple ways to view hidden pseudo class styles in media queries etc, then I’m all ears.

aaaah… its good to be back…

I’ve got @randyrie to thank for all this. The more I tried to explain stuff for him, the more I realised how rusty I had become and how much I had forget/never understood in the first place.
SO cheers all

[Marf]

I have no problems with the “Pseudo States”, you can select and use those “Pseudo State Buttons/toggles” when you need them, to show what you want/need for that moment to show in the “Active CSS Panel”.

When “CSS rules” are hidden, they are NOT active and in use anymore.
So they not have to be visible (in my opinion) in the “Active CSS panel” in any way.

You can discuss if there must be a better or different way to show “hidden” CSS rules.
I personally never have problems with “hidden” CSS rules, or finding them back.

[schpengle]

ok
But you can’t.

*Update, I’ve just .er, updated this to clarify some stuff, for those that have suffered through it once
It might explain even better now.
Or if you thinking I really don’t have any point to make, let me know. I will obviously disagree, but then if you can send me off to the right place in the manual, I shall be more than happy to oblige and run off and check it out.

if you have a bunch of media queries
and you have some pseudo classes in different viewports
if you have hidden a class, and its parent class/media query is collapsed,
there is NO WAY that I can see in any of the visual helpers to ever see it again.

…apart from opening the CORRECTLY named stylesheet (if you have a few)
and looking for commented out pseudo classes in the CORRECTLY named media query.

There appears to be a gap in the market for a hidden pseudo class VISUAL HELPER tool.

and I still agree with the OP’s original question here. The way the class appears, greyed out when you first click it to HIDE it (comment it out as I now know) in the styling properties hamster, seems correct as it is STILL THERE in front of me, but then if I leave to go to another element and try something on that, it doesn’t warn me DO you wish to keep this class commented out/hidden (which would be annoying) but rather removes the option to return to this VIEW state with no warning about what will happen (I say view state, as its commented out, but I can STILL view it,)

So yes, your right, and I already arrived at the same conclusions in yesterdays vid that while it is NOT active, so I UNDERSTAND why it isn’t viewed as active … but to loose state of what actions IM actually carrying out (hiding) in the app with regards having clicked the eye icon and just pretend this class now has no style rules, they don’t exist, isn’t just commented out…by the program… which now pretends it doenst have any style rules THEN OFFERS ME TO RECREATE THE CLASS RULES WITH THE STYLE BUILDER>>>>>… what?

This is actually wrong. It DOES have classes. but they are HIDDEN/Commented out.
the program should keep track of this and the state of any show/hide idiocy I am attempting to do.
and MAINTAIN its greyed.commented out state with the offer to restore it.

THIS IS THE MESSAGE it should deliver, when I carry out that action - along with an instant option to SHOW the style rules

and so WHY do you have to click the actual word Actve in the tab…before it even tells you … that there EVEN IS a class without rules? -it doesn’t even tell you the false message when You click the element.

… in the ACTIVE tab.
But if you THEN click a STLEYSHEET tab…THEN click back to the ACTIVE tab,
it does

wah?..

is somewhat, nay, totally , a little bit… retarded.

Its as though it would be really useful if Pinegrow kept record of state of each element when you were using that hide/view tool so that it could return you to the same view state the next time you select that class/element/congo sprocket.

No?

<3

[schpengle]

…in hind sight, maybe yes!

we have an active tab…so why not an INACTIVE tab!
one that shows pseudo classes, hidden classes and other weird , odd fish, which are involved in what we are doing but not currently…active.

[babmos]

Hm, I really don‘t know how anyone could be against simply keeping the hidden classes in the panel, like I said, with more than a few classes and elements it becomes extremely annoying.

Bootstrap Studio shows all the classes of the element by the way, including pseudo classes like :hover and :before.

[schpengle]

Yes, well put - and in far less words than I use
Cheers @babmos
Your query set the cat amongst the pigeon in my head. I have often got confused with a few things and it turns out, this was one of the main things. _after hiding styles etc.
So, I have hammered it out. I realise I misunderstood how some things work, so I have now sorted that.
yay! but that now makes some of the other things seem odd/redundant (like your point of query for example)

Cheers for the wake up call

and any thoughts on sort of other way of showing the listed stuff I was on about,
like my suggstions for

Too messy/ much not enough, better order of information structure?
or parts just unnecessary?

and the word this with the colour coordinated box around it , could be the Viewport size
ie, **Hiiddn rules in XS view , LG view etc, so there is no ambiguity and each can be compared without clicking between media queries.

mm actually , if you DO use the Viewport Size name… well ,then you can ditch the colours completely I guess.

[babmos]

I can only say what would make the most sense to me, and seems the most efficient way.

The classes panel lists all the classes of the element. That includes pseudo classes, hidden/inactive classes and also media queries associated with the classes.

I don‘t want to have to click the :hover button to see if and which hover rules apply, I want to see it right away. I don‘t want to hunt for hidden classes in the code or css tree, I want to see them right away and unhide them.
The class is still assigned to the element, so it is active. Hidden elements don‘t disappear from the dom tree.

Do the developers monitor this forum anyway?