What is the method to define the maximum width for a BootstrapTable while also trimming any data that exceeds this specified width?

In my ASP.NET Web Forms project, I am utilizing Bootstrap 5.2 for a BootstrapTable, which is currently defined as follows:

                        <table class="display table table-bordered table-striped w-100 tables"
                            data-click-to-select="true" data-unique-id="InventoryItemID"
                            data-pagination="true" data-sortable="true" data-page-size="5"
                            data-single-select="true" data-maintain-selected="true"
                            data-id-field="InventoryItemID" id="items" name="items">
                            <thead>
                                <tr>
                                    <th data-field="state" class="set-height" data-checkbox="true"></th>
                                    <th data-field="Description" data-sortable="true" class="set-height set-width text-start">Description</th>
                                    <th data-field="MemberPrice" class="text-end set-height" data-formatter="formatter" data-sortable="true">Price</th>
                                    <th data-field="QtyAvailable" class="text-end set-height" data-sortable="true">Available</th>
                                </tr>
                            </thead>
                        </table>

I am attempting to ensure that the Description field displays only one line of text per row by using CSS to truncate longer content. Here is the CSS code I have tried:

.set-height {
    max-height: 100px;
    overflow:hidden;
}

.set-width {
    min-width: 100px;
    max-width: 100px;
}

However, this approach does not seem to be achieving the desired result. If the Description column's data exceeds one line, it still wraps to the next line. I am wondering if there is a specific parameter in bootstrapTable that can control this behavior, as an alternative to using CSS.

Your assistance on resolving this issue would be greatly appreciated!

Answer №1

To achieve the truncation of text in a specific column, you can use CSS to apply an ellipsis like this:

Using this code will trim the text to only one line

.ellipses{
    width: 50px; /* adjust width as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

This code snippet will limit the content to a certain number of lines

.ellipses{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* specify number of lines */
    -webkit-box-orient: vertical;
}

If the above method does not work, try enclosing the text in paragraph tags and add the ellipses class to it. Hopefully, this solution resolves your issue.

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

Is there a way to open an HTML file within the current Chrome app window?

Welcome, My goal is to create a Chrome App that serves as a replacement for the Chrome Dev Editor. Here is my current progress: background.js chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('backstage.html', { ...

Concentrating on written content is proving to be ineffective in asp.net web applications

Can anyone assist me with an issue I am facing in the code below? I have a textbox that should call a server-side function when it is focused, but no alert message is appearing. I have added the web service reference as well. Any help in identifying and so ...

Some devices experiencing website update issues while others are successful

My website is functioning properly on my laptop and phone, but not on my school iPad (managed by the district). I have already cleared the cache, but the site does not update. It was working fine earlier, and I need to present it next Monday. Please help a ...

incorrect text alignment issue on mobile devices, potentially limited to iOS as Android has not been tested

I am experiencing an issue with the alignment of two forms on my webpage when viewed on iOS devices such as iPhone and iPad Safari. Strangely, the forms display correctly on computers (Windows and even Mac with Safari), but on mobile devices the inputs are ...

Interested in retrieving the dynamically changing value of LocalStorage

Hopefully I can articulate my issue clearly. I am implementing a feature where CSS themes change upon button clicks. When a specific theme button is clicked, the corresponding classname is saved to LocalStorage. However, since the key and value in LocalSt ...

Extracting Text from a Span Element Using XPath in Selenium

Here is the HTML code snippet: <div class="a-row a-spacing-small a-size-small"> <div class="a-row"> <a class="a-link-normal a-declarative g-visible-js reviewStarsPopoverLink" href="#" data-action="a-popover" data-a-popover="{"closeButton":" ...

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...

Pagination in the jQuery datatables plugin is not functioning as expected

Help Needed I am using the datatables jQuery Plugin to display a table, but I am facing an issue where all entries are shown without any pagination. Can someone please assist me with this problem? Below is my index.cshtml code: @{ Layout = null; } & ...

Incorporate CSS file into the head section or directly within the HTML section without the need for JavaScript

I'm facing an issue with adding a CSS file to my webpage using JavaScript code at the bottom of the page. When users disable JavaScript, the file cannot be added. Is there a way to include the CSS file in the page without relying on JavaScript? $(doc ...

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

JSON.Parse allows for graceful degradation of data when handling JSON objects in JavaScript

What should be done if a browser does not support JSON.parse? Would it be appropriate to include json.js and use parseJSON instead? Here's an example of how the code could look: var output; if (JSON.parse) output = JSON.parse(data); else ou ...

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

Unable to conceal adjacent radio buttons

My challenge is to use only HTML and CSS, without JavaScript, to show the first radio button with its label initially. When a user clicks on it, the second radio button and label should appear while the first disappears, and so on. I am struggling to ach ...

Ensure that buttons appear neat and organized when viewed on mobile devices

As a CSS beginner utilizing the Bootstrap framework, I have encountered an issue with my button layout on mobile devices. I have successfully created a set of buttons that display correctly on both desktop and mobile views. In the desktop view, you can se ...

Loading controls dynamically in ASP.NET based on ViewState

I have a component that dynamically generates multiple input fields based on user selection. I decided to store the IDs of these input fields in the component's internal state so that they can be consistently recreated during each interaction. The is ...

The behavior of Datatables varies depending on the screen resolution

In my data table, there are numerous entries with child tables on each row of the main table. I am currently in the process of incorporating this type of functionality into my table, with a few modifications to create a table within the child row. You can ...

How to customize JavaFx context menu appearance using CSS to achieve a full-width background color

I am trying to customize my context menu, but I'm having trouble with the white space between the menu item and the context menu border. Here is an example: view the rendered context menu with CSS styles What I want is for the color to fill the entir ...

Utilizing PHP Code within Inline CSS in HTML guides

Is it possible to integrate PHP code into Inline CSS? Here is an example: Check out this code snippet: <div class="col-auto"> <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">%22</div> </div> <div ...

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

highlight the selected option in the ng-repeat list of items

Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to en ...