Page 1 of 1

Togglers look redacted

PostPosted: Fri Sep 13, 2019 10:24 am
by ktbCA57
So somehow, something weird has happened to some of my togglers... and i can't figure out what happened. They open and close ok. The content underneath is fine, they just look weird and are almost completely illegible (because of the orange plus signs). They are togglers within dropdown bodies, but i have other togglers in the same situation, that look fine in the published help.

Can anyone tell me what might be causing this in my published project? It doesn't appear to be a browser-specific issue as it appears the same in any browser:

toggler issues.PNG


Thanks!

Re: Togglers look redacted

PostPosted: Sun Sep 15, 2019 11:54 pm
by Dave Lee
Press F12 in your browser, then use the inspect tool to select a toggler and view the CSS. I'd guess it's a background image.

Re: Togglers look redacted

PostPosted: Mon Sep 16, 2019 5:47 am
by ktbCA57
Hi David... I had a very short "aha" moment on this as i did find an image noted in code using the inspection tool... HOWEVER... i then realized this same image is attached to every toggler (and there are tons of them) - including those that look fine.

Here's what I'm seeing:

inspection view.png


One thing i noticed is that this problem occurred once I applied a class to the toggler. Here is the class and it's properties:

MadCap|toggler.TABLEtoggler
{
color: #006586;


Here's the code from the toggler code in the project:
<p class="SubTabsLink">
<MadCap:toggler targets="TAB-search1;TAB-search2" class="TABLEtoggler"> Search Set </MadCap:toggler>
</p>



(The next problem is that the first time I used the F12 option, i was able to see the whole page of code for this page... however, once i closed and opened it again, i'm only getting a short chunk of code no matter where i select on the page - rather than the full page of code i saw a moment ago.)


:?

Re: Togglers look redacted

PostPosted: Mon Sep 16, 2019 5:55 am
by ChoccieMuffin
ktbCA57 wrote:Hi David... I had a very short "aha" moment on this as i did find an image noted in code using the inspection tool... HOWEVER... i then realized this same image is attached to every toggler (and there are tons of them) - including those that look fine.


The first thing I'd do there is look at one toggler that's ok beside one that isn't to see what the differences are between them.

Re: Togglers look redacted

PostPosted: Mon Sep 16, 2019 9:58 am
by ktbCA57
ChoccieMuffin wrote:
ktbCA57 wrote:Hi David... I had a very short "aha" moment on this as i did find an image noted in code using the inspection tool... HOWEVER... i then realized this same image is attached to every toggler (and there are tons of them) - including those that look fine.


The first thing I'd do there is look at one toggler that's ok beside one that isn't to see what the differences are between them.


so i did this... and i did noticed some differences - like repeated style/selector names, but not sure how they got in there and how to fix them as i don't see the issue in the text editor within my project. I have highlighted the difference in yellow. The top piece of code is the one that is showing up with that weird orange redaction-looking issue. The bottom example is a toggler that is working.

inspection view.png


Thoughts?

Re: Togglers look redacted

PostPosted: Mon Sep 16, 2019 10:51 am
by ktbCA57
ok... it HAS to be something in the toggler class... that's when the problem started... and i just inserted some more togglers with that class and they have that orange redaction look... i am going to look at the toggler class and see if i can find out what went wrong.

Thanks!

Re: Togglers look redacted

PostPosted: Mon Sep 16, 2019 11:57 pm
by Dave Lee
Don't worry about the HTML - you want to look at the CSS.

And inspect the CSS for the toggler link <a> tag, and its parent <p> tag (or whatever its parent is). The background could be on either tag.

Re: Togglers look redacted

PostPosted: Tue Sep 17, 2019 5:36 am
by ktbCA57
So, for now, I deleted the brand new toggler class that I created and used that was causing this orange mess... and recreated it... and it was fine.

HOWEVER, some really OLD togglers are now having this issue with a long standing toggler class... I'm going to look at that this morning and see if i can suss that issue... so i might be back! :?

Thanks for your help and patience!

Re: Togglers look redacted

PostPosted: Tue Sep 17, 2019 5:54 am
by ktbCA57
So... I just used the inspection tool to find differences between a toggler that is fine and a toggler that has the orange junk all over it... and there does seem to be a couple of anomalies in the one that's screwed up (see attached - anomalies outlined in red)... but i have NO idea how this happened... i even unbound the togglers and re-inserted them... and they were still coming out screwed up... here's how the "code" looks upon inspection... btw... the topic these came from has been done for months... so not sure why this is suddenly happening and only to a few and not all... i'm worried that this is happening throughout the project... and i just haven't found them all yet.

Also... because i don't see this issue in the stylesheet for the same class that is used for both, I have no idea how to correct it.

Thanks for any input you can offer...

Re: Togglers look redacted

PostPosted: Wed Sep 18, 2019 6:33 am
by ChoccieMuffin
What does the code in your Flare topic look like? Give us an example of one that works and one that doesn't.

What does your CSS look like for togglers? Show us that and we might be able to point you in the right direction.

I share your frustrations - sometimes things go squiffy when you don't expect it and it's something totally different that you've done that's having an impact.

Re: Togglers look redacted

PostPosted: Wed Sep 18, 2019 7:14 am
by ktbCA57
ChoccieMuffin wrote:Give us an example of one that works and one that doesn't.


Hi... thanks for your ongoing input! i am attaching an image of the various bits of code as you requested... first the toggler settings from withing the stylesheet... then the html from the toggler that has all the orange junk on it, then a normal one... the only difference i see between the html for the two different togglers is the order of the settings... maybe i'm missing something... or maybe the order makes a difference? i wouldn't think so... but what the heck do i know at this point?! lol

Thanks!

Re: Togglers look redacted

PostPosted: Wed Sep 18, 2019 7:21 am
by awinnefeld
The first toggler has a class called "toggler", the second (normal looking) one does not have this class. Maybe the weird stuff is in the css for this class? Does it look ok if you delete the class attribute? How does MadCap|toggler.toggler or simply .toggler look in the style sheet?

Re: Togglers look redacted

PostPosted: Wed Sep 18, 2019 7:42 am
by ChoccieMuffin
awinnefeld wrote:The first toggler has a class called "toggler", the second (normal looking) one does not have this class. Maybe the weird stuff is in the css for this class? Does it look ok if you delete the class attribute? How does MadCap|toggler.toggler or simply .toggler look in the style sheet?

That looks like it could be the problem, what's the CSS for the .toggler class?

In case awinnefeld's suggestion doesn't sort things, you've also got the "targets="findDialog"" bit in the one that doesn't work, but "targets="documentProps" in the one that does. I'm not familiar with togglers so I don't know how that works, but could the different targets be messing things up too?

Re: Togglers look redacted

PostPosted: Wed Sep 18, 2019 8:06 am
by ktbCA57
DING DING DING! WE HAVE A WINNER... how did i miss that... that said... do you see anything in the settings for this class that i posted earlier that would cause this problem??

THANKS SO MUCH!

Re: Togglers look redacted

PostPosted: Thu Sep 19, 2019 12:13 am
by awinnefeld
Glad that you could pinpoint the problem now. I'm missing stuff like that all the time, too ;)

As for the css that caused the effect: I might be overlooking something, but I think you didn't post the css for this specific class - somewhere in your style sheet, there should be an element called "MadCap|toggler.toggler" (or maybe just ".toggler").

Re: Togglers look redacted

PostPosted: Thu Sep 19, 2019 6:01 am
by ktbCA57
Hi.. Thanks... i did post the class... at least it's the only one i can find in the css... but there's a log of junk posted in this thread so i can see how you weren't able to locate it! lol Re-posting it here.

Thanks as always for your help and patience.

Re: Togglers look redacted

PostPosted: Thu Sep 19, 2019 6:26 am
by ChoccieMuffin
ktbCA57 wrote:Hi.. Thanks... i did post the class... at least it's the only one i can find in the css... but there's a log of junk posted in this thread so i can see how you weren't able to locate it! lol Re-posting it here.

Thanks as always for your help and patience.


That's just the CSS for MadCap|toggler without the extra "toggler" class. Search in your CSS for ".toggler" (the dot is important) and see what you find.

Re: Togglers look redacted

PostPosted: Thu Sep 19, 2019 6:37 am
by ktbCA57
that's what i thought, but i did do a search for that... and it's not there... yet it shows in the class list when creating a toggler... please see attached showing just "toggler" as well as Madcap:toggler...

I can find all other toggler classes... there are 3... but not the .toggler