Optimizing WebGrid Alignment in MVC3 Using RAZOR

I need to customize the width and alignment of each column in a WEBGRID within MVC 3. Specifically, I have 5 columns and I want to set different width and alignment for each header.

Here is my code snippet: 

@{WebGrid grid = new WebGrid();
  if (@Model.VendorItemsList != null)
  {
      grid = new WebGrid(source: @Model.VendorItemsList, ajaxUpdateContainerId:         "gridSearch", canSort: true, rowsPerPage: Model.PageSize);
  }
}
<div id="gridSearch" class="tableGrid">
    @{            
        @grid.GetHtml(
            mode: WebGridPagerModes.All,
            columns: grid.Columns(
            grid.Column("VendorItemName", header: @GeneralResource.Vendor + " " + @GeneralResource.Item + " " + @GeneralResource.Name),
            grid.Column("ItemName", header: @GeneralResource.Item),
            grid.Column("ItemCategoryName", header: @GeneralResource.Category),
            grid.Column("VendorName", header: @GeneralResource.Vendor)
            ))
        }
    }
</div>
cssasp.net-mvc-3webgridrazor-grid

Answer №1

To customize the widths of the rows, you will need to apply CSS styling since there is no built-in method for doing so. Start by assigning classes to the header and body rows:

@grid.GetHtml(
    headerStyle: "header_row", 
    rowStyle: "item_row"
    // ...
)

Next, use the nth-child pseudo-class selectors to apply styling to them, for example:

tr.header_row th:nth-child(1) { width: 100px; }
tr.header_row th:nth-child(2) { width: 75px; }
tr.header_row th:nth-child(3) { width: 50px; }

tr.item_row td:nth-child(1) { width: 100px; }
tr.item_row td:nth-child(2) { width: 75px; }
tr.item_row td:nth-child(3) { width: 50px; }

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

Unable to adjust custom link menu font size

I have designed a unique custom menu called SANDUSKY with the css classes of no-hover. It is positioned alongside HOME, ABOUT, GALLERY, STORE, CONTACT which serve as the navigation menus. While attempting to customize SANDUSKY, I successfully altered the c ...

css

Is there a way to obtain metadata for a specific link?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><$BlogPageTitle$></title> <meta property="og:title" content=" ...

javascripthtmlcss

A minimalist dropdown menu using only HTML and CSS with an onclick function

I have been working on creating an onclick dropdown menu for mobile devices that should disappear when viewed on wider screens, but I've encountered an issue where the links in the menus are not clickable even though the @media query is set up correct ...

htmlcss

Ways to centrally position elements in a Bootstrap table

I came across this query and tried implementing the style mentioned, but unfortunately, my table items are not aligned vertically: https://i.sstatic.net/rMqSR.png This is how the HTML appears: .table > tbody > tr > td { vertical-align ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to ensure a DIV fills the entire page without using "position: absolute;"?

I am currently working on designing a webpage layout with multiple headers, main content, and a footer. My goal is to use the jQuery UI tabs widget in the main content area with a border around it. The div should span the entire space between the headers ...

csslayouthtml

Is it possible to determine which child element is currently in view within a scrollable parent div?

In an attempt to replicate a "current page" feature using divs, similar to a PDF reader. document.addEventListener("DOMContentLoaded", function(event) { var container = document.getElementById("container"); container.onscroll = function() { let ...

javascripthtmlcssscroll

What is the best way to identify the position of an element in an array given my specific circumstances

I am trying to utilize the ng-repeat directive in order to display an array. Here is what I have: <div ng-repeat="stu in school"> <div>{{stu.name}}</div> <div>{{stu.grade}}</div> </div> JavaScript $scope.scho ...

javascriptcssangularjs

creating a vertical scroll bar for an HTML table's content

How can I set a fixed height for my HTML table on a webpage so that if it exceeds the height, a vertical scrolling bar is automatically displayed? Any assistance would be greatly appreciated. Thank you. ...

htmlcss

Most effective method for designing a reusable <table> appearance

For my project, I need to create multiple tables using data from a database on different pages. I want to maintain a consistent styling throughout these tables: The first and last rows should have a bold font with reversed foreground/background colors. Th ...

jquerycss

Troubleshooting Google Web Fonts

I seem to be using code similar to what I used before, but it appears that the fonts are not loading. <html> <head> <script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></s ...

htmlcssfont-face

How to position the play button in the center using Material UI and Flexbox

Seeking advice on achieving a centered play button with borders in this layout. Struggling with flexbox to position the play button within the code provided. function Tasks(props) { const { classes } = props; return ( <div className={classe ...

cssflexboxmaterial-ui

The element fails to appear on screen when using Firefox

Check out this site using IE or Chrome and pay attention to the yellow block: Then, try opening the same page in Firefox and watch as the block mysteriously vanishes. Does anyone have any idea why this is happening? Did I make a mistake somewhere? ...

htmlcssfirefox

Utilizing AnimateCSS within a ReactJs component

After installing Animate.CSS with the command npm install animate.css --save, I noticed it was saved in the directory ./node_modules as a locally packaged module. I went through the Animate.CSS documentation on Github, which mentioned that adding class na ...

cssnode.jsreactjsnpm-install

When used, the jQuery selector returns the PreviousObject rather than the object that was selected initially

I'm currently attempting to add a second menu to my website alongside the top menu. I have multiple menus set up in two bootstrap columns (col-8 and col-4). Initially, when I used jQuery selectors outside of a function, everything worked smoothly. How ...

javascriptjquerycss

Display an image overlay upon hovering over a div

I've developed an add-on for Elementor that includes a card with the following HTML markup: <div class="card"> <div class="header"> <img src="img.jpg"> < ...

htmlcsselementor

What is the best way to target an anchor element that includes a particular word using jquery or css?

I attempted $('a[title="*"]').find('contains("PDF")').css({'background-color':'red'}); Unfortunately, this code is not working as expected. To clarify, I am searching for a specific word in the title. ...

jquerycss

Utilize the atan2() function to rotate a div so that it follows the movement of the mouse

I am trying to create an effect where the mouse aligns with the top of a div and the div rotates as the mouse moves. The rotation should happen when the top part of the div is in line with the mouse cursor. My goal is to achieve this using the atan2 functi ...

javascriptjqueryhtmlcssmath

Spacing that separates elements vertically within a listing

I'm facing an issue with a list of elements arranged in a row that wraps onto a second line due to space constraints within the container. Is there a way for me to introduce additional spacing between the first and second line of these elements, bear ...

htmlcssspacing

Issue with D3: Events not triggering transitions

I am currently working on creating a bar chart using D3 in Angular4. // Enter Phase this.chart.selectAll('.bar') .data(this.barData) .enter() .append('rect') .attr('class', 'bar'); // Update Phase let bars ...

javascriptjquerycssangulard3.js

Having trouble with my WordPress theme not recognizing my CSS file

My file path is displayed below: D:\web server\blog.dev.cc\wp-content\themes\ablog\css for java script file path D:\web server\blog.dev.cc\wp-content\themes\ablog\assets\js Despite checking ...

csswordpressfunctionbootstrap-4stylesheet