Aligning the icon with text in Togglers
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Aligning the icon with text in Togglers
Hello,
The button icon in a toggler does not seem to align properly with the toggler text, as shown in the image below. Is anyone aware of a way to force the icon and text to align? I've played with stylesheet properties for the MadCap | toggler style in my stylesheet but can't seem to figure it out.
Thanks in advance. And please excuse me if this topic has been covered elsewhere. A search on "Toggler" did not return anything that related to this issue.
/Todd
The button icon in a toggler does not seem to align properly with the toggler text, as shown in the image below. Is anyone aware of a way to force the icon and text to align? I've played with stylesheet properties for the MadCap | toggler style in my stylesheet but can't seem to figure it out.
Thanks in advance. And please excuse me if this topic has been covered elsewhere. A search on "Toggler" did not return anything that related to this issue.
/Todd
Last edited by todd.richardson on Mon Aug 18, 2008 12:45 pm, edited 1 time in total.
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
-
- Propellus Maximus
- Posts: 1985
- Joined: Tue Jan 23, 2007 8:18 am
- Location: Darn, I knew I was around here somewhere...
Re: Aligning the icon with text in Togglers
Haven't seen that before - mine are in line with the text and I didn't do anything specific to get that. Could you post the code in your CSS for the togglers so we can see if there is anything unusual?
Until next time....
Kevin Amery
Certified MAD for Flare
Kevin Amery
Certified MAD for Flare
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Aligning the icon with text in Togglers
I'd also like to see the HTML/XML code that is generating that behavior to ensure that there isn't stray code in there someplace. For example, if you have a nested <p> tag, the top margin of the <p> element in the CSS will be added to the nested <p> element, which is one possible explanation of why you are seeing this behavior.
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Re: Aligning the icon with text in Togglers
From the stylesheet opened in Notepad:
MadCap|toggler
{
color: #00608a;
font-family: 'Avenir LT 55 Roman';
font-size: 8pt;
text-transform: uppercase;
mc-image-spacing: 5px;
}
Let me know if there is any other relevant code that would be helpful.
Thanks,
/Todd
MadCap|toggler
{
color: #00608a;
font-family: 'Avenir LT 55 Roman';
font-size: 8pt;
text-transform: uppercase;
mc-image-spacing: 5px;
}
Let me know if there is any other relevant code that would be helpful.
Thanks,
/Todd
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Aligning the icon with text in Togglers
I still want to see how the code is constructed here to see if you have any nested elements that might affect the style.doc_guy wrote:I'd also like to see the HTML/XML code that is generating that behavior to ensure that there isn't stray code in there someplace. For example, if you have a nested <p> tag, the top margin of the <p> element in the CSS will be added to the nested <p> element, which is one possible explanation of why you are seeing this behavior.
Re: Aligning the icon with text in Togglers
Actually, the last line in your style is the problem. The mc-image-spacing is moving the image up 5px in relation to the text. Get rid of that property and you should be closer.
Personally, I did my own toggler images because even if you take out that line of code, you're going to see a shift in the toggler icon because the open image is a different size (width x height) than the closed image. So I made my own that are the same dimensions so that they don't shift.
Personally, I did my own toggler images because even if you take out that line of code, you're going to see a shift in the toggler icon because the open image is a different size (width x height) than the closed image. So I made my own that are the same dimensions so that they don't shift.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Re: Aligning the icon with text in Togglers
The mc-image-spacing: 5px; property determines the distance, or space, between the icon and text, not the height.
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Re: Aligning the icon with text in Togglers
I tried attaching the code in a .txt file, but it was not allowed. What is the best way to share the code with you?doc_guy wrote:I still want to see how the code is constructed here to see if you have any nested elements that might affect the style.
Thanks for your help.
/Todd
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Re: Aligning the icon with text in Togglers
Oh, sorry. There are spacing options for the img tag for vertical and horizontal positioning and I thought the mc style was doing that. Wonder why they created their own property? Guess it was to combine two different types of tags into one.todd.richardson wrote:The mc-image-spacing: 5px; property determines the distance, or space, between the icon and text, not the height.
As for the code, I think they're asking you to just open the topic in the Internal Text Editor or Notepad and copy-and-paste the HTML code for the toggler, and if it's contained inside another tag (like a <div> or <p> tag) then to include that tag, too. And if it is contained within another tag (at least a <p> tag), then include the style for that tag in the post, too, so they can judge how they're being combined in the topic.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Sr. Propeller Head
- Posts: 184
- Joined: Thu Aug 07, 2008 6:43 am
- Location: Massachusetts
Re: Aligning the icon with text in Togglers
Here is the topic code (actual paragraph content replaced by the word "Text"):
Thanks.
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="3" MadCap:lastHeight="458" MadCap:lastWidth="590">
<head>
</head>
<body>
<h1>Funds Transfer Pricing (FTP)<MadCap:keyword term="Funds Transfer Pricing;Net Interest Income;Asset Liability;Reporting;Planning;Risk:Funding" /><MadCap:concept term="Asset/Liability;Funds Transfer Pricing" /></h1>
<p>Text</p>
<p>Text</p>
<p>
<MadCap:toggler targets="Funds Transfer Pricing (FTP) Expanded">More Information</MadCap:toggler>
</p>
<div MadCap:targetName="Funds Transfer Pricing (FTP) Expanded">
<p>Text</p>
</div>
<p>
<MadCap:conceptLink term="Asset and Liability;Asset/Liability" externalHelpSystems="" />
</p>
</body>
</html>
Todd Richardson
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Engineering Team Lead – Customer Experience | IntervalZero
Windows 10, Flare 2020
Re: Aligning the icon with text in Togglers
Weird. I copied your topic code and your style code into my project and the toggler hotspot text appears on the same line as the toggler icon. The only difference is that I don't have that font on my system, so I think it just ignored it. Try specifying a different font and see if that helps.
BTW, you shouldn't use a non-common font like that unless you're installing it on the user's computer along with your application. You should use a font-family of "Verdana, Arial, Helvetica, sans-serif", or something similar.
BTW, you shouldn't use a non-common font like that unless you're installing it on the user's computer along with your application. You should use a font-family of "Verdana, Arial, Helvetica, sans-serif", or something similar.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Aligning the icon with text in Togglers
What styles do you have in your stylesheet for the <p> element? What do you have in your stylesheet for the <div> element?
I think that may be where the problem lies, but I'm not sure.
I think that may be where the problem lies, but I'm not sure.
-
- Propellus Maximus
- Posts: 1985
- Joined: Tue Jan 23, 2007 8:18 am
- Location: Darn, I knew I was around here somewhere...
Re: Aligning the icon with text in Togglers
Just to expand on Lisa's point for those who aren't familiar with it, the issue is that online help formats don't embed fonts into the help system - instead, they just use the fonts that already exist on the user's computer. This poses a problem if you want to use fonts that don't come with Windows, Mac OS, or whatever platform it is your application runs on, because you can't guarantee the user will have the font you specify. If they don't have it, the help system reverts to whatever the default font is for the system.LTinker68 wrote:BTW, you shouldn't use a non-common font like that unless you're installing it on the user's computer along with your application. You should use a font-family of "Verdana, Arial, Helvetica, sans-serif", or something similar.
For this reason, it's best to use fonts that are included by default with the OS - on the Windows side, this would include fonts like Verdana, Arial, and Times New Roman, and on the Mac side it would include Helvetica, Geneva, and Times (I think - it's been many moons since I've used a Mac so I may have a few mistakes in there). Of course, if your application installs a font on the user's system, then you can safely use that font as well.
Until next time....
Kevin Amery
Certified MAD for Flare
Kevin Amery
Certified MAD for Flare