how to restrict the width of long text passages within a table

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

how to restrict the width of long text passages within a table

nnako
This post was updated on .
Hi,

I'm trying to modify my forum appearance. For this, I have changed to "mixed application" and now I would like to add text paragraphs holding the sub forum "description text" below the sub forum titles (they are all pinned) within the main view of the forum. So, I intend to modify two macros:


topics_column
- add another parameter "description" in the macro header which carries the description text of the sub forum
- add some code to put the text in the right position below the sub forum title

<override_macro name="topics_column" parameters="width,title,count,description">
    <n.table_column>
        <head>
            <td class="[n.column_default_border/] topics-column nowrap" style="[n.width_style.width/]">
                <table class="avatar-table">
                    <tr>
                        <td class="nowrap" style="font-weight:bold;border:none">
                            <n.default. to="[t]Topics[/t]"><n.title/></n.default.>
                            <span class="weak-color" style="font-size:80%;margin-right:1.7em">(<n.count/>)</span>
                            <n.if.not.is_null.description>  
                                <then>  
                                    <br/>
                                    <span class="weak-color" style="font-size:60%;margin-right:1.7em">
                                        <n.description/>
                                        <br/>
                                        HERE COMES THE DESCRIPTION TEXT FOR THE SUB FORUM HERE COMES THE DESCRIPTION TEXT FOR THE SUB FORUM HERE COMES THE DESCRIPTION TEXT FOR THE SUB FORUM HERE COMES THE DESCRIPTION TEXT FOR THE SUB FORUM HERE COMES THE DESCRIPTION TEXT FOR THE SUB FORUM HERE COMES THE DESCRIPTION TEXT FOR THE SUB FORUM
                                    </span>
                                </then>  
                            </n.if.not.is_null.description>
                        </td>
                    </tr>
                </table>
            </td>
        </head>
        <body>
            <n.current_node.>
                <td class="[n.column_default_border/]">
                    <table>
                        <tr>
                            <n.topics_column_start/>
                            <td class="adbayes-content" style="width:100%;padding-left:.3em;border:none;word-break:break-word">
                                <n.if.is_app>
                                    <then>
                                        <b><n.node_link/></b>
                                        <span class="weak-color">
                                            (<n.remove_spaces_between_tags.>
                                                <n.one_or_many.topic_count>
                                                    <one_text><t>topic</t></one_text>
                                                    <many_text><t>topics</t></many_text>
                                                </n.one_or_many.topic_count>
                                            </n.remove_spaces_between_tags.>)
                                        </span>
                                    </then>
                                    <else>
                                        <n.smart_post_link/>
                                        <span class="weak-color">
                                            <t>by <t.author.owner.name truncate="20"/></t>
                                        </span>
                                    </else>
                                </n.if.is_app>
                            </td>
                        </tr>
                    </table>
                </td>
            </n.current_node.>
        </body>
    </n.table_column>
</override_macro>


and


mixed_topics_column
-> add another "description"-tag filled with something like "<n.remove_html_tags.current_node.message.as_text/>"

<override_macro name="mixed_topics_column">
    <n.topics_column>
        <title>
            <n.if.is_in_command name="top_topics">
                <then><t>Topics</t></then>
                <else>
                    <n.current_node.node_link class='second-font category-link'/>
                </else>
            </n.if.is_in_command>
        </title>
        <count>
            <n.if.is_in_command name="top_topics">
                <then>
                    <n.page_node.topic_count filter="[n.children_filter/]"/>
                </then>
                <else>
                    <n.current_node.child_count/>
                </else>
            </n.if.is_in_command>
        </count>
        <description>
            <n.if.is_in_command name="top_topics">
                <then>un-pinned topics</then>
                <else>
                    <n.remove_html_tags.current_node.message.as_text/>
                </else>
            </n.if.is_in_command>
        </description>
    </n.topics_column>
</override_macro>


But when the description text for sub forums is long, no word-wrap occurs and the subsequent columns are pushed to the right side. You see it on the picture:




Is there a NAML macro to restrict the text flow to a certain width and then doing a word-wrap?

Thanks.
Reply | Threaded
Open this post in threaded view
|

Re: how to restrict the width of long text passages widthin a table

nnako
any ideas?
Reply | Threaded
Open this post in threaded view
|

Re: how to restrict the width of long text passages within a table

GregChapman
In reply to this post by nnako
Hi nnako,

Further to my email earlier today, I have finally looked at your macro code, but just as important, the image.

This does not show all I need to see. The "Replies", "Last Post" and "Views" column headings that I would expect to see on a "Mixed" application screen are missing, so I can't see exactly what happens. However, I believe the clue is in the code:
<td class="[n.column_default_border/] topics-column nowrap" style="[n.width_style.width/]">
This generates a table cell with the class "nowrap" and guess what the CSS for that class does:

.nowrap {
white-space: nowrap;
}

To see the effect that has look at:
http://www.w3schools.com/CSSref/pr_text_white-space.asp

It could be that simply removing that class from the table has the desired effect for you forum. However, I suspect it is there deliberately to truncate long headings and so keep the "heading bar" to a single line and prevent it growing ever deeper.

Given the change in design that you are making, by adding the description, and to avoid unwanted side effects on other instances where the .avatar-table class might be used, it would probably be better to style the description to:
white-space: normal;
and so over-ride the inherited white-space: nowrap.

Being a bit more of an HTML purist than the good folk at Nabble are, in the ideal world, I would suggest that rather than a sequence of < span> and < br> tags within that avatar-table cell you should code the the heading and description in higher and lower level heading tags, or perhaps, heading and paragraph tags.

There are several good reasons for this:
• it is semantically correct
• A < span> tag produces an an inline box, where as headings and paragraphs are block tags so default to new lines - which is what you want for this particular content.
• You can write more understandable CSS using conditional selectors, that don't required a host of "pick and mix" classes.
• Search engines rank headings and paragraphs higher then mere table cell data.

(Incidentally, you've written XHTML-style < br> tags when Nable serve an HTML4.01 TRANSITIONAL page, so, technically, is wrong, although all browsers I know cope with such coding errors)

As a further BTW, I rate a lot of the HTML that Nabble uses as pretty dire. The table.avatar-table is a case in point. A single celled table is a semantic meaningless nonsense. It simply shouldn't be there. What is worse, this single celled table is nested within another table. It is utterly and completely redundant. The only reason for it being there is to confuse.

It is easy to see that all the style coding has been done visually, when all tutorials on CSS say ID and class names should be functional NOT descriptive  - just look at all those class names - "shaded-background-color" and "medium-border-color" and "nowrap" pepper the code. When you you really need is a division wrapping the page with an ID "macro-view-mixed" with the default styling set for the defaults for the page and the odd class for the row or column exceptions "category-row", "heading-row", replies-column" and the like. (if heading rows are to have shaded backgrounds the code should be included in the heading row code, not added on as a decorative afterthought.)
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.