Webgrid columns lose their width after a postback event

I'm working on a simple webgrid that has 3 columns:

View


columns: grid.Columns(
grid.Column("Applicant Name",
format: (item) => @Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId },
null), style: "AppName")
, grid.Column("Role", "Role", style: "Role") 
, grid.Column("ApplicantSkills", "Skills", style: "AppSkills") 

I've been trying to set fixed widths for my columns. I've experimented with percentage and exact pixel widths like 500px, 100px, etc., and they initially work but get reset after postback.

css:

.AppSkills {
width: 70%;
}
.AppName {
width: 20%;
}

.Role {
width: 10%;
}

The grid I'm working on displays search results based on various filters selected by the user. Each time different filters are chosen and a search is performed, the results change and the grid is updated. However, I'm encountering an issue where the column widths of the grid are not being preserved. Initially, everything looks good, but after applying filters and searching again, the column widths change.

I've tried submitting my form using both GET and POST methods to see if the formatting gets lost during the process. Unfortunately, both approaches result in the same issue.

@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{

Am I missing something obvious here? Is there a way to ensure that the grid columns maintain a fixed width without shifting around?

Answer №1

It appears that the lack of spaces after commas is causing one of the entries to be treated as a single unbreakable word. If you cannot modify the original data, and assuming the issue is not with the code concatenation, consider using the css word-break property to resolve this.

Answer №2

Ensure that the grid elements maintain their styling even after a postback.

Please share the HTML with us so we can identify the issue, as we are unsure whether the grids are styled as divs or tables.

If they are tables, you can apply the following CSS to target specific columns individually in case classes are lost during postback:

td:nth-child(3) {
    width: 70%;      /* style for skills column */
}
td:nth-child(1) {
    width: 20%;      /* style for name column */
}
td:nth-child(2) {
    width: 10%;      /* style for role column */
}

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

What is the best way to incorporate three divs into a single line while maintaining a responsive design

Struggling with adding a logo above a login form? As a PHP developer without design expertise, achieving a responsive layout like the image below may seem daunting. To create this layout, consider using the following code: <style> .container { ...

What causes an image's size to change when it floats within the parent container?

There seems to be a height mismatch issue between the container and the image inside it when the parent is floated, but not the child. However, when both are given the float property, the height matches perfectly. Why is this? <div class="parent">&l ...

Identify all anchor elements that contain image elements

I am on the hunt. I am looking for a CSS-Selector, but if that's not an option, a jQuery selector would work too. ...

The height of the container is not adjusted correctly after loading data via ajax which causes it to overlap with

My HTML code consists of a container with two columns (content and sidebar) and a footer. The content contains a horizontal list with li elements that are populated via ajax when the "Load More" button is pressed. I am using Bootstrap and testing on Chrome ...

Changing a p element to a div and adding a class in Bootstrap 4.5

To maintain consistency, I prefer using <div class='something'>BIO</div> over <p>BIO</p>. In Bootstrap 4.5, is there a similar class that achieves the same result? I'm not very skilled in CSS, so please forgive me i ...

Is it feasible to utilize a CSS variable within a CSS "background URL" property?

Having trouble setting a base domain for all my pictures in a CSS file. Here's what I've tried: In global.css: :root { --bgd: #C0C0C0; --picdomain: "https://somedomain.com/"; } In s1.css: @import url("global.css"); body { background-co ...

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

Reverse the order of jQuery toggle animations

Looking for something specific: How can I create a button that triggers a script and then, when the script is done, reverses the action (toggles)? (I am currently learning javascript/jquery, so I am a beginner in this field) Here's an example: ...

Determine if the html element is wrapping to a new line when zoomed in or when the text size on Windows is increased

My webpage has 2 labels displayed side by side, but due to the system text size being set at 150% (which is recommended) in Windows, the second label does not have enough space and gets pushed below the first label. I am looking for a way to determine if t ...

Exploring Advanced Techniques for Filtering Enumerable Items in Lists

In my app, I have a ListBox containing a collection of items. Each item also contains its own collection of sub-items, forming a tree structure that resembles folders and files. class item { ... List<item> childItems; } There are various types of ...

Increase the Value of a Model Using the Power of Ajax and Razor

While iterating through a collection in my model using Razor to render it, one scenario could be: @foreach(var item in myCollection) { <span id='<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b425f4e46066b425f4e46 ...

The font background color appears to be malfunctioning

body { margin: 0; background-color: white; background: linear-gradient(to right, #000000, #ffffff, #ffffff, #000000); line-height:25px; } h2{ color: black; text-align: center; display: block; font-family: 'Montserrat', san ...

What is the best way to differentiate the behavior of two identical classes using a single JavaScript function?

Can someone help me figure out how to make two circles move differently with the same JavaScript function? I'm new to JavaScript and struggling to differentiate between classes in HTML to achieve this. My goal is to have each circle move randomly and ...

Modifying the URL does not alter the selected tab

As part of my project, I wanted to ensure that when the page is refreshed, the previously selected tab remains active. To achieve this, I created a basic HTML page and added some jQuery. However, I encountered an issue when manually changing the URL from ...

Is it possible to use jQuery to update CSS styles in an AJAX request

Is it possible to update the CSS of divs that are injected into files but do not exist in the main HTML file? In my main HTML file, I have: <div id="container"> <div id="page"> <!placeholder> </div></div> I am having tr ...

Use jQuery to set a Firebase image as the background of a div element

Is there a way to fetch an image from Firebase and use it as the background for a div element? I've tried several approaches without success. Could someone share some examples on how to achieve this? <div class="museBGSize rounded-corners grpelem" ...

Using line breaks and horizontal scrolling in HTML and CSS

I am struggling with a div that contains multiple small spans. My goal is to implement a horizontal scrollbar that extends up until the line break tags (a-z on each line) in order to view the full content on narrow screens. Although I have applied the &ap ...

Having trouble with Bootstrap 4: I want to rotate an image, but every time I try, it ends up overwriting the CSS properties

I am currently working on a website using bootstrap 4, and I'm facing an issue with the image I selected. It seems to rotate to the right and is not displaying correctly. click here for image preview The main problem lies in rotating the image witho ...

Core-pages with polymer core have no set height limit

I am embarking on my first project using Polymer. I have implemented core-pages to facilitate navigation between different pages. However, I am facing an issue where the pages are not displaying with a white background-color as intended in the css. You ca ...

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...