What is the best way to adapt the width of a column in a FreeMarker template when the text is too lengthy?

I am currently encountering an issue while trying to create a PDF template using FreeMarker for NetSuite. One specific challenge I am facing is related to a column titled "Serial Number."

Within the template, the code appears as follows:

<table class="itemtable">
    <#list record.item as item>
        <#if item_index==0>
            <thead>
                <tr valign="top">
                    <th colspan="1">#</th>
                    <th colspan="4">${item.item@label}</th>
                    <th align="left">${item.quantity@label}</th>
                    <th align="left">${item.description@label}</th>
                    <th align="left">${item.serial_num@label}</th>
                </tr>
            </thead>
        </#if>
        <tr>
            <td colspan="1">${item_index+1}</td>
            <td colspan="4">${item.item}</td>
            <td align="right">${item.quantity}</td>
            <td align="left">${item.description}</td>
            <td align="left">${item.serial_num}</td>
        </tr>
    </#list>
</table>

If the length of the serial number is shorter than the header's title "Serial Number," the width of the column remains unchanged.

However, if the serial number (e.g. AB-795-1245-SER-572) exceeds the length of its header, the column should extend to display the entire value in one line without any breaks.

Currently, the column width does not adjust automatically when the value surpasses the title length. I am unsure about the CSS adjustments needed for this. Can anyone provide some guidance on how to resolve this? Thank you!

Update: Description

The current issue has evolved to the following:

The third column needs to dynamically adjust based on the length of its value and maintain a fixed distance from the second column.

The second column has a set width, and the table alignment should be towards the right.

<table style="margin-top: 10px;">
    <tr>
        <td></td>
        <td align="right">SubTotal</td>
        <td align="right">${subtotal}</td>
    </tr>
    <tr>
        <td></td>
        <td align="right">Tax</td>
        <td align="right">${tax}</td>
    </tr>
    <tr>
        <td></td>
        <td align="right">Total</td>
        <td align="right">${total}</td>
    </tr>
</table>

What would be the best approach to implement these changes? Is it advisable to utilize the "colspan" attribute?

Answer №1

If you're looking to adjust the spacing in your table, consider using the CSS "white-space" property.

<table class="itemtable">
    <#list record.item as item>
        <#if item_index==0>
            <thead>
                <tr valign="top">
                    <th colspan="1">#</th>
                    <th colspan="4">${item.item@label}</th>
                    <th align="left">${item.quantity@label}</th>
                    <th align="left">${item.description@label}</th>
                    <th align="left">${item.serial_num@label}</th>
                </tr>
            </thead>
        </#if>
        <tr>
            <td colspan="1">${item_index+1}</td>
            <td colspan="4">${item.item}</td>
            <td align="right">${item.quantity}</td>
            <td align="left">${item.description}</td>
            <td style="white-space: nowrap;" align="left">${item.serial_num}</td>
        </tr>
    </#list>
</table>

Update: Example

If we insert this into our template:

<table>
    <thead>
        <tr valign="top">
            <th colspan="1">#</th>
            <th colspan="4">Item</th>
            <th align="left">Quantity</th>
            <th align="left">Description</th>
            <th align="left">Serial Num</th>
        </tr>
    </thead>
    <tr>
        <td colspan="1">1</td>
        <td colspan="4">Item A</td>
        <td align="right">200</td>
        <td align="left">asdf asdfasdfasdf asdf asdf asdfasdfasdf asdf asdf asdfasdfasdf asdf asdf asdfasdfasdf asdf</td>
        <td style="white-space: nowrap;" align="left">AB-795-1245-SER-572 AB-795-1245-SER-572</td>
    </tr>
</table>

The result will be:https://i.sstatic.net/JPhS5.jpg

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for iterating through a collection of responses once and showcasing exclusively the incorrect ones

Let's consider the following as the correct and incorrect answers for each question: Question Number: 1 Correct Answer(s) B Incorrect Answers A C D Question Number: 2 Correct Answer(s) A C Incorrect Answers B D Question Number: 3 Correct ...

Issues encountered with AngularJs filter search functionality

Why am I having trouble adapting this search filter from here? This is what my code looks like: controllers.js angular.module('starter.controllers', ['starter.services']) .controller('AppCtrl', function($scope, $ionicModal ...

What could be causing my tabs (such as HOME, ABOUT ME..) not displaying the correct paragraph or section content?

I have set up navigation tabs on my website using anchor tags, but they are currently not linked to any specific paragraphs. I want the corresponding paragraph to be displayed when a tab is clicked, but I'm unsure how to add this functionality using j ...

Having trouble with the HTML5 canvas for loop not rendering the initial object in the array?

Essentially, I'm attempting to iterate through each letter in a text string (specifically the text "marius"). However, there's an issue where the first letter is not being displayed. When the text is "marius", only "arius" is drawn. I've exh ...

Check out this site: WWW::Mechanize

I attempted to use the code provided below to retrieve the HTML source of a website and it was successful. However, when I tried to do the same for the website , the code did not yield any results. Interestingly, I am able to access this page using a web ...

Using javascript to display a vertical scroll bar within a dropdown menu

My challenge is to create a drop-down list that displays the first four items with a vertical scrollbar when the user clicks on it. The remaining items should be visible as the user scrolls through the list. You can find a sample fiddle here: http://jsfid ...

How can I display the console log output from JavaScript on an HTML webpage?

If I have a JavaScript function that logs its output in the console using console.log(), is there a way to then export that result into the HTML console? Appreciate any advice on this. ...

Experiencing difficulties with the background color of a child div in HTML while using Yahoo

My dynamic "progress bar" component has the ability to render various background colors and widths based on different percentages. Here's a snippet of the code: <div style={{ backgroundColor: '#FFFFFF', height: '24px' ...

Switching the input to LTR changes the overall direction to LTR while maintaining the RTL placeholder

The text input is currently set to be RTL, including both the placeholder and the actual input. The settings for this were done elsewhere. My question is how can I modify it so that only the input changes to LTR, while the placeholder remains RTL. For exa ...

Fixing a dropdown menu with multiple levels

I am attempting to create a dropdown menu with multiple levels. However, when I hover over the first level, the second level appears slightly above and to the left of the first level. I want the second level to appear directly below the first level in the ...

The directory structure does not align with the 301 redirect

I recently transitioned my website from HTML to a CMS platform. The new CMS does not include any file extensions in the URLs, so I have maintained the same URL structure from my old HTML site. Here is an example of the difference: HTML site URL: www.sit ...

Showing the Datepicker from jQuery right in the middle of the screen

Here's the generated code as default: <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper- clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; position: absolute; left: ...

Tips for smoothly transitioning between two division elements:

I currently have two different div elements on my webpage: <div id="#content1"> <div id="divWelcome" style="margin-top:50px;"> <div id="headerimg" style="position: relative;"> <div style="position: absolute; bo ...

struggling to align div content to the right with bootstrap 4 as the framework

Hello, I've been working on upgrading to bootstrap 4, but I'm having some issues with the flex containers. Specifically, I'm experiencing alignment problems with my navbar menu links, both submenu and mainmenu. Interestingly, when I remove ...

Trigger click functions sequentially to display elements after specific actions are taken

Is there a way to make jQuery listen for clicks only at specific times? It seems that when I add event listeners, like $("#box").click(function(){, they are executing before the code above them finishes running. Let's say I have two boxes that should ...

Is it possible to reach this result without relying on Modernizr?

Due to personal reasons that I won't delve into, my goal is to replicate the functionality of this menu : demo : http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ However, I want to achieve this without using Modernizr and poss ...

The WebDriver encountered an error while trying to click on an element

When using Selenium WebDriver, I am facing an issue with selecting an item from a drop-down list. The element I want to click on is labeled as "game club". Despite attempting to select different elements, I keep encountering an error stating that none of ...

Selection menu drops down once the save is complete

I have two drop-down menus named source and campaign, displaying data from the database. In addition to these drop-downs, there are other input fields as well. My concern is that I want to save the filled data along with the selected options in the drop-do ...

Why does my PHP script execute before receiving any input?

As a newcomer to PHP from C#, I am currently developing a whois module for a website. However, I'm encountering an issue where my PHP page automatically runs and displays the message "invalid input" before I even click the button. Can anyone explain w ...

Is it necessary for the input element to be placed within a form?

One of the components I have in my React project has a specific purpose: allowing the user to input a word, press enter or click a link, and go to that word's definition page. 'use client'; import { FontAwesomeIcon } from '@fortawesome ...