[Resolved] Font size reduces when using a Toolset Access shortcode pair

[Author]

Posts

[trishaT]

I am trying to: add readable information above the header on my site, but when I include the [toolset_access....] shortcode, it reduces the size of the font to be unreadable - it seem to have to fit the entire string into too short a horizontal area.

Link to a page where the issue can be seen: You must be logged in to see it: hidden link

I expected to see: the entire string should be 8px - and all on one line.

Instead, I got: tiny tiny type and still on two lines. (It needs more horizontal space - it's being squeezed into too small a space.)

Two images attached. For the one using the toolset shortcode, this is the entire html:

<span style="font-size: 11pt;"><span style="color: #303c6c;">[toolset_access role="Administrator,Subscriber,Customer"]WELCOME [wpv-current-user info="firstname"]!</span>
hidden link">Dashboard  |  hidden link">Logout  | [/toolset_access] hidden link">Home</span>

Without the toolset_access code:

<span style="font-size: 11pt;"><span style="color: #303c6c;">WELCOME [wpv-current-user info="firstname"]!  </span>hidden link">Dashboard  |  hidden link">Logout  |  hidden link">Home</span>

Please help me fix this so all that information is readable above the page heading.

(By the way - I submitted this on Saturday through chat - Jamal was on chat - but he never responded and I got an email telling me it would be taken care of on Monday. But I didn't hear anything on Monday and now my original submission has disappeared.) This is a resend - same issue.

[Christian Cox]

Hello, first of all I apologize for the inconvenience you experienced when trying to chat with a supporter. I will mention this to my team leader so we can keep an eye out for similar issues and if there is a recurring problem we can ask our systems team to look into it. I suspect that Jamal signed off for the day without turning off his chat profile, and the chat got lost overnight. It is unfortunate that you had to submit this ticket twice, and had a delay in response. I'll try to address this problem quickly for you.

I am trying to see the same problem you've described but I must be missing something. Were you able to resolve this since you submitted the ticket? The problem does not seem to be reproducible with the User account you provided me. I logged in using the credentials you provided here, and I'm attaching a screenshot showing what I see in the header at various resolutions and manipulating the text to show various names. You can see that the text is displayed as expected in one line with appropriate line breaks and spacing, no overlapping. Also, the text is displayed in a dark color. In the screenshot you shared, the overlapping text is shown in orange, and I'm not sure how that would be happening. It looks like the obscured text says "WELCOME BANJO" - can I get the login credentials for the Banjo User so I can test? Private reply fields are enabled here.

If I understand the setup correctly, the text shown in your screenshots is produced by the "Header" widget here:
hidden link

I can see that the Toolset Access shortcode is currently in place, so I expected to be able to see the problem after logging in, but that is not the case. I tested by adjusting the HTML text on-the-fly using the browser developer tools. I inserted longer names, names with spaces and without spaces, and shorter names, all to see if I could produce the problem. I was never able to reproduce overlapping text, or any orange text. Screenshots attached here. I must be missing something. Is the problem specific to one browser or device, or only occuring when you resize the browser window a specific way? Are there other steps necessary to reproduce the issue? When you log in using the credentials you provided here, is the problem reproducible, or only when logged in as Banjo?

[trishaT]

Thanks Christian for your investigation.

The problem still exists. No, the header is not controlled by the widgets - so that's probably why you think I fixed it. (I tried to get it to work using a widget, but that produced the same problem as the original.) In fact, I've now removed the widget so it won't be confusing.

The reason you aren't seeing the problem is because the Toolset Access code is not in place. What you're seeing is what is there without the Toolset Access code.

The "Above Header" is produced through the Customizer > Header Builder > HTML1 It's Astra - and you'll see how the pieces get positioned for the entire header. (You can ignore the notice about "set from the transparent header" because for this it doesn't make a difference.)

If you click on the HTML1 - you'll see the code for that piece of the header, without the access code. If you add the access code back in, it will compress the words.

Hopefully that will provide you with an a-ha! moment on how to fix it? 😉

(Thanks so much for all your help on this!)

[Christian Cox]

Aha - yes, that makes sense now, thank you! I was able to make some modifications to the header code and see some better results.

1. The toolset_access shortcode accepts an attribute raw, which can be set to "true" to suppress additional markup and formatting output in the contents of the shortcode. I added raw="true" to the shortcode to turn off this extra markup and formatting.

2. The second span tag (dark blue text color) in your code example was opened outside the toolset_access shortcode, but closed inside the toolset_access shortcode. That type of broken nesting was producing some unexpected rendering issues in the browser, so I moved the opening of the second span tag inside the toolset_access shortcode where it is matched up with its closing tag appropriately.

3. I cleaned up the space between the "Welcome...!" text and the first dashboard link. It looks like an extra line break character existed between those two elements when that text was pasted into the editor area. It was not obvious in the editor, but it impacted the front-end display nonetheless. So I deleted those space/break characters and added standard spaces between the text and links. Now the full code is:

<span style="font-size: 11pt;">[toolset_access role="Administrator,Subscriber,Customer" raw="true"]<span style="color: #303c6c;">WELCOME [wpv-current-user info="firstname"]!</span> <a href="<em><u>hidden link</u></em>">Dashboard </a> | <a href="<em><u>hidden link</u></em>">Logout</a> | [/toolset_access] <a href="<em><u>hidden link</u></em>">Home</a></span>

Please check to see if the issue is resolved, or if I've missed something.

[trishaT]

My issue is resolved now. Thank you!