Toggle tables not respecting width settings.

Wayne Chen · Unread post by **Wayne Chen** » Wed Feb 04, 2015 4:32 am

When using a toggle with the "Toggle a Table" option, if the table properties are set to "Size table to fit on page", then the table does not cover the whole page width, it will only expand to cover what text is in the table when the topic is published in CHM or HTML.

Upon further testing I found that If I remove style parameters (style="text-indent:-18px; margin-left:18px;"), then the table will expand to fit the page. Here's the code for a test topic showing one table that fits the page and one that doesn't.

Code: Select all

<topic template="Default" lasteditedby="wchen">
  <title translate="true">New topic</title>
  <body>
    <header>
      <para styleclass="Heading1"><text styleclass="Heading1" translate="true">New topic</text></para>
    </header>
    <para styleclass="Normal"><image src="hmtoggle_plus0.gif" scale="100.00%" styleclass="Normal"></image><tab /><toggle type="dropdown" print-expanded="true" help-expanded="false" defaultstyle="false" translate="true" src-collapsed="hmtoggle_plus0.gif" src-expanded="hmtoggle_plus1.gif" styleclass="Normal"><caption translate="true"><![CDATA[Test1]]></caption></toggle></para>
    <para styleclass="Normal"><table styleclass="Default" rowcount="1" colcount="1" style="width:100%; border-width:1px; border-spacing:0px; cell-border-width:0px; border-color:#000000; border-style:solid;">
      <tr style="vertical-align:top">
        <td>
          <para styleclass="Normal"><text styleclass="Normal" translate="true">with <para styleclass="Normal"></text></para>
        </td>
      </tr>
    </table></para>
    <para styleclass="Normal"></para>
    <para styleclass="Normal"></para>
    <para styleclass="Normal" style="text-indent:-18px; margin-left:18px;"><image src="hmtoggle_plus0.gif" scale="100.00%" styleclass="Normal"></image><tab /><toggle type="dropdown" print-expanded="true" help-expanded="false" defaultstyle="false" translate="true" src-collapsed="hmtoggle_plus0.gif" src-expanded="hmtoggle_plus1.gif" styleclass="Normal"><caption translate="true"><![CDATA[Test2]]></caption></toggle></para>
    <para styleclass="Normal" style="text-indent:-18px; margin-left:18px;"><table styleclass="Default" rowcount="1" colcount="1" style="width:100%; border-width:1px; border-spacing:0px; cell-border-width:0px; border-color:#000000; border-style:solid;">
      <tr style="vertical-align:top">
        <td>
          <para styleclass="Normal"><text styleclass="Normal" translate="true">with <para styleclass="Normal" style="text-indent:-18px; margin-left:18px;"></text></para>
        </td>
      </tr>
    </table></para>
  </body>
</topic>

And the resulting output.

toggletable1.jpg

Unread post by **Tim Green** » Wed Feb 04, 2015 6:47 am

Hi Wayne,

The 100% width option for tables actually refers to the container of the table, and that is really the paragraph it is located in, not the page. Normally, the paragraph will be as wide as the page, so you don't notice this. However, if the paragraph has indents, then a 100% table will only expand to the width of the paragraph, not to the width of the page.

In Help & Manual, a table always sits in a paragraph of its own. The paragraph is created along with the table. When you create a toggle with an icon in the header and create the table automatically along with the toggle, Help & Manual automatically indents the table paragraph so that its left border aligns with the beginning of the toggle header. After creating the toggle, the insertion point is located in the table paragraph, between the end of the table and the paragraph mark. You can then apply a style or manual formatting to this table to adjust the indents for the toggle table. To do this later, you need to click to the right of the table or press the right cursor arrow key at the very end of the very last cell in the table to move the insertion point to the position outside the table and inside the table paragraph (it helps to have paragraph marks display turned on in the program options).

Note that you can also select a table style for the toggle table when you define a toggle (this doesn't affect the indenting, however, because that is external to the table).

The easiest way to manage items like this with specific formatting that you want to reuse is with a snippet. You can set up a dummy toggles with exactly the formatting, content and layout you need and store them as topic files in your project or as external XML files in your project folder and insert copies of them whenever you want to use them.

1) Create the complete item you want to reuse with all components, using some dummy text in places where text is necessary. You can do this with toggles, note boxes, lists, tables and any other kind of complex layout that you want to reuse over and over again. T
2) Select the entire item you want to reuse.
3) Select File > Save Snippet in the Project > Manage Topics tab and save the snippet in your project folder with a descriptive name.
4) To use the snippet, click in the place where you want to insert a new item, select the Snippet tool in Write > Insert Object. Activate the options "From File" and "Copy & paste into text". Then select the snippet and click OK.

See this chapter in the help for instructions on using snippets:
http://helpandmanual.com/help/index.htm ... ippets.htm

Snippets can be stored topic files in the current project, as external XML files on their own or as topic files in their own project, which can then be used to edit and manage them efficiently. In addition to this, you can also save snippets along with shared stylesheets in a "style repository" that allows you to share both your project stylesheet and snippets between any number of other projects. This provides standardized styles edited in a single location for all your projects, plus snippets that use those styles and thus appear formatted in exactly the same way in all projects.

See this chapter in the help for details on style repositories:
http://helpandmanual.com/help/index.htm ... tories.htm

Wayne Chen · Unread post by **Wayne Chen** » Wed Feb 04, 2015 11:12 pm

Hi Tim,

It's not the left edge of the table that I am looking at, it's the right edge. In the image in the first post, the first table (Test1) extends all the way to the right of the page. The second table (Test2) only extends to the end of the text.

The question is whether this is intended behavior? We would prefer that the Test2 table went all the way to the right (or that we could set whether the table fit the page or not).

Unread post by **Tim Green** » Thu Feb 05, 2015 6:28 am

Hi Wayne,

If you set the table to 100% width and the containing paragraph extends to the edge of the page as well then the table will follow. The only thing that could prevent this would be if the width settings for the individual cell have been set differently. To check this, open the table properties and check in the Selected Cells tab.

Wayne Chen · Unread post by **Wayne Chen** » Thu Feb 05, 2015 11:40 pm

Hi Tim,

This is the frustrating part. I've tried setting table to 100% width in the Edit Table Properties screen (though it resets the setting back to "Size table to fit on page") and playing with the "containing paragraph" position, but no matter what I do, the table will only extend to the right end of the text and no further. Cell options has "Preferred Width" unchecked.

In H&M, the containing paragraph for Test2 is set to just under 8 inches.

tablewidth2.jpg

But when I publish in CHM, the table (Test2) extends only as far as the text goes.

tablewidth3.jpg

If I reduce the text length, the table shrinks.

tablewidth4.jpg

Unread post by **Tim Green** » Fri Feb 06, 2015 5:17 am

Hi Wayne,

Now I see what's happening -- this is caused by the short text. For browser compatibility reasons, toggle tables automatically have 100% dimension options turned off in the output because otherwise brain-dead browsers like older versions of IE calculate the overall width incorrectly and end up with total widths of over 100%, which activates a spurious horizontal scrollbar.

You can solve this problem with a trick: Open the table properties for the toggle table and in the Select Cells tab set a "Preferred Width" in pixels with a ridiculously high value, like 3000 pixels. Since this is only "preferred", not absolute, this won't force the width beyond the edge of the page. The browser will simply make the cell as wide as possible to come as close as possible to the target value, and that will have the same effect as 100% width.

SimonH · Unread post by **SimonH** » Mon Feb 09, 2015 2:57 am

Hi Tim,

This is a bit of a problem for Wayne and myself and is concerning. We got lotsa-lotsa tables and lotsa-lotsa toggles. All will be affected in the output if the content does not stretch further than the available width. Admittedly it is aesthetic only, but it looks like poor form to users that are viewing the output.

Can't H&M do the necessary jiggery-pokery internally for dealing with old browsers rather than get authors to change the way they do this to something that is illogical? I mean, setting the width to a value that you really should NOT rather than simply using the 100% width setting

, which should work as expected in every scenario.

Is it safe to assume that PDF output will not be affected by 3000px cell widths?

Cheers mate and happy new year [belated].

Martin Wynne · Unread post by **Martin Wynne** » Mon Feb 09, 2015 7:01 am

Hi Simon,

Most table problems in H&M can be cured by setting the table width to 99% instead of 100%. There may be a discrepancy of a few pixels, but you won't have the unpredictable results which you get with the 100% setting. If I'm not using the Autosize option I always use 99% width.

regards,

Martin.

Unread post by **Tim Green** » Mon Feb 09, 2015 7:27 am

Hi Simon,

I can understand how you feel on this. It's a bit of a problem for generating the output as well, because one of the principles we hold to for all the standard output is that there should never be any jiggery-pokery. For The high-value solution should work fine in PDF, but if you're concerned just use Martin's 99% solution. That's the alternative and works just as well. For most toggles this isn't a problem because the tables in toggles are usually used without any visible borders. They are simply invisible containers for text that is shown or hidden.

As for updating all your many tables globally: You can't do this from within Help & Manual but you can use a multi-file search and replace tool on the source code of your topics, provided your project is saved in the uncompressed HMXP format so that you can access the individual files. You can save to HMXP with Save As... in the File menu. Choose an empty folder to save in (you can add other files and folders to it later if necessary, for example for your images etc).

First you need to create "before" and "after" examples of what you need to do in the HM editor, then look in the XML Source view (tab below the main editor window) to see the XML code you need to find and replace. Then use a multi-file search and replace tool on the topic files in the /Topics sub-folder in your project folder to make the changes.

Tools you can use:

If you don't have a suitable editor for this here's a list of ones you could use:

Help & Manual Toolbox "beta":
http://helpman.it-authoring.com/viewtop ... 22&t=12586

This is a little power tool I originally wrote for my own use but a lot of users now find it quite useful. It has five different multi-file search/replace modes for Help & Manual projects, including support for regular expressions, and it automatically ignores spacing and linefeeds between tags/nodes in the XML.

PowerGREP:
http://www.powergrep.com/

If you feel comfortable with regular expressions PowerGREP is the best tool available, on any platform and at any price. It is a little pricey, but if you do a lot complex searching in multiple files (also for programming work) it will pay for itself subjectively in a single afternoon. The RegexBuddy tool from the same company (http://www.regexbuddy.com/) is also the best interactive tool available for defining and testing regular expressions, and its documentation is quite literally the best tutorial and introduction to regular expressions available anywhere.

Notepad++ (free):
http://notepad-plus-plus.org/

Notepad++ also supports multi-file regular expression searching, if you feel comfortable with that, but it is more limited than PowerGREP and unfortunately uses a rather arcane flavor of RegEx that can take a while to get used to. It can also only search and replace on single lines, which limits the search functionality even further. Apart from that, however, it is one of the best code editors available. I use it for all my web programming.

FAR HTML (inexpensive, generous free trial period)
http://www.helpwaregroup.com/products/far

FAR HTML is actually a Swiss Army knife for help authors, with a wealth of useful tools, not just the find and replace. It includes a special interface for complex searches, making them easier for users not familiar with the rather arcane syntax of regular expressions.

Windows Grep (less expensive and capable than PowerGREP but still quite good)
http://www.wingrep.com/index.htm

IMPORTANT: Always make a backup before doing this! Automated global changes are always a little bit risky.

SimonH · Unread post by **SimonH** » Mon Feb 09, 2015 8:40 pm

Hi Tim, hi Martin,

Thanks. Martin's 99% solution sounds a little more elegant and swallowable and if it does cure some of the other table anomalies [tables that have minds of their own] that occur every now and then, all the better

. Still...

Perhaps 99 is to be the new 100 in H&M, eh Tim? Outta sight, outta mind so to speak

We do store our projects in raw xml, so no drama doing the external find-replace.

Nadia Gaganova · Sat Dec 26, 2015 8:36 pm

Hey Martin,

just wanted to thank you for this great tip! I can actually feel it saving my sanity until the next time =)

Martin Wynne wrote: Most table problems in H&M can be cured by setting the table width to 99% instead of 100%. There may be a discrepancy of a few pixels, but you won't have the unpredictable results which you get with the 100% setting. If I'm not using the Autosize option I always use 99% width.

Unread post by **Tim Green** » Mon Dec 28, 2015 1:47 pm

SimonH wrote:Perhaps 99 is to be the new 100 in H&M, eh Tim? Outta sight, outta mind so to speak

This is actually included in the new Help & Manual 7 width setting for responsive images. Choosing the responsive width, maximum is native width setting for images automatically sets a width of 99.90%.

Help & Manual Forums

Toggle tables not respecting width settings.

Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.

Re: Toggle tables not respecting width settings.