Scrolling horizontally in ng-grid version 2.0.11

In my application, I am utilizing a ng-grid with auto height and width. The challenge arises when dynamically adding columns to the grid. If there are too many columns to display, instead of showing a horizontal scrollbar, the columns shrink in size and appear in a messy layout within the grid. Despite the grid's width remaining constant, all columns are resized to fit without an option for scrolling horizontally. Any insights on how to enable the horizontal scrollbar?

Edit: The initial query has been resolved to include a horizontal scrollbar. However, only some columns are visible initially. Upon scrolling right, the grid displays as empty beyond a certain point, indicating that the last few columns are not properly bound to ng-grid. Only the columns that can be displayed within the grid without scrolling are properly bound. Any suggestions for resolving this issue?

Note: I am using ng-grid version 2.0.11. Could this version be causing the problem?

https://github.com/angular-ui/ng-grid/issues/2071

c#css.netangularjsng-grid

Answer №1

To implement a horizontal scroll bar for additional columns in your ng-grid, include the columnDefs as shown below:

  $scope.gridOptions = {
    data: 'myData',

    columnDefs: [{ field: "<fieldname>", width: 120},
                { field: "<fieldname>", width: 120 },
                { field: "<fieldname>", width: 120 },
                { field: "<fieldname>", width: 120 }]
  };

If the product of total columns and column width exceeds the width of the ng-grid table defined in the CSS, a horizontal scroll bar will be displayed.

In angularJS, the .gridStyle class is typically used for styling the ng-grid component.

For more information, visit: ng-grid

You may also refer to the Column pinning example here: columnDefs example with pinning

If no columnDefs are specified, the columns will attempt to adjust automatically to fit within the table width, resulting in condensed columns.

Answer №2

I encountered a similar problem and resolved it by taking the following actions:

Ensure that the width of each column is specified in pixels rather than percentage. Using % format for column widths may result in issues.

Update the ng-grid.css file to include the .ngviewport class with overflow:auto property. In my particular project, the .ngviewport class was missing the overflow property which contributed to the issue at hand.

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

Approach to decoupling design elements from DOM interactions

Seeking recommendations or guidelines for effectively segregating classes utilized for browser styling and DOM manipulation. Specifically, we are developing a single-page app using backbone.js and heavily relying on jQuery for dynamically updating page el ...

cssjquerydom-manipulation

Displaying background images as list items on a web page outside of

I am facing an issue with an unordered list within a div where the list item images are floating outside the div. Does anyone have a solution for this? You can see an example of the problem on Any assistance would be greatly appreciated! ...

csslist

React random marker position shifts when the screen size is adjusted

After displaying an image and adding a marker to it, I noticed that the marker's position changes when the screen size is adjusted. Why does this happen? And more importantly, how can I ensure that the marker stays in the same position relative to the ...

csshtmlimagereactjsposition

What is the best way to create a layout for Flexbox project boxes with three boxes per row?

My project cards are displaying in a single horizontal line and expanding infinitely to the right, rather than appearing in rows of three as intended. This causes them to extend outside the visible area in a long horizontal strip. See the issue in action ...

htmlcssflexbox

The URL is displaying the MVC controller's name twice

Currently, I am developing a project using .NET MVC and AngularJS technologies. Within my HomeController file: public ActionResult Index() { return View(); } In the Angular controller, there is a service designed to retrieve all item ...

angularjsasp.net-mvc

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

javascriptcssnode.jsnpmwebpack

Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags. I have tried using a reset link but it didn&apo ...

jqueryhtmlcss

Why are my styles not working when referenced from the .module.scss file?

Here is the code snippet from my Sublayout.module.scss file: .pl-6 { padding-left: 6rem !important; } .pr-6 { padding-right: 6rem !important; } .pl-12 { padding-left: 12rem !important; } .pr-12 { padding-right: 12rem !important; } After im ...

javascriptcssreactjssassvite

Utilizing MVC and AngularJS in a Single Page Application

I am embarking on my very first Angular application, which will function as a single page application in conjunction with MVC. Attempting to create a sample application featuring two links has presented some challenges, detailed below. I have opted for the ...

angularjsasp.net-mvcsingle-page-application

Where does the JIT-generated code find its home?

A passage from the book CLR via C# authored by Jeffery Ritcher. "When a virtual instance method is called, the JIT compiler generates extra code within the method that gets executed every time the method is invoked. This additional code first checks the va ...

c#.netclr

Make sure to display at least one view separate from the ng-view in Angular

I am trying to configure my app to always display the template of the CategoryController on every page. The app currently showcases all categories with this controller: when a category is clicked, it displays all books in that category, and navigating thro ...

angularjs

Decoding information from Onedrive's REST API

I am currently working on retrieving information about the contents of a folder from OneDrive's server. The data structure I am dealing with is as follows: { "data": [ { "id": "folder.xxxx", "from": { "name": "j ...

c#jsononedrive

Guide to using two UI grids simultaneously with the directives ng-hide and ng-grid

As a newcomer to AngularJS, I am attempting to create a page with two ui-grid elements and a button labeled "other-grid". The goal is for the first grid to load initially, and when clicked again, it should be replaced by the second grid. However, I am en ...

htmlangularjsng-showng-hideui-grid

How to position Angular Component at the bottom of the page

I have been working on my angular application and recently created a footer component that I want to stay at the bottom of the page like a typical footer. The footer component is included in the default app.component.html file, which makes it visible on th ...

htmlcssangular

Updating text color in JavaFX for a textarea

I'm having trouble getting this to work. After checking the CSS analyzer in the scene builder, it seems that changing the text color in a textarea requires something like this: .text-area .text { -fx-fill: #1e88e5; -fx-font-size: 32px; } How ...

cssjavafx

Exploring the reach of scope in a directive

Managing a controller responsible for fetching event JSON data, updating the DOM with data if available, and displaying an error message if no data is found: //Controller.js myApp.controller('EventsCtrl', ['$scope','API', fun ...

javascriptangularjsangularjs-directiveangularjs-scope

What distinguishes loading angular dependencies and what method is optimal for module sharing?

Can you explain the distinction between these two methods of loading modules? angular.module('CoreApp', ['...','...','...','...']); //parent module angular.module('MainApp1', ['CoreApp' ...

javascriptangularjsmodulebowermultiple-domains

Unlocking JSON object with AngularJS

I have saved JSON data in a separate file named Countries.Json located in a folder called ListofCountries within the View directory. Now, I am trying to display this data on button click using AngularJS. However, I am facing difficulties in passing the J ...

htmlangularjs

Loading JS and CSS files in relation to the website root directory

When it comes to including CSS/JS files, what are the best practices for defining the file URI? Some people prefer to include files relative to the website root by specifying the full URI: <link rel="stylesheet" href="/my/path/to/css/main.css"> Thi ...

javascripthtmlcss