New design for UI grid: eliminate sorting menu and right-align column headers

I came across a question similar to this one

My goal is to eliminate the dropdown menu from the column headers and align the text of the headers to the right. 

.ui-grid-header-cell {
 text-align: right;
}

However, my current attempts result in the disappearance of the carrot icon but leave a blank space on the right side of each column header. This means that the text isn't truly aligned to the right.

https://i.stack.imgur.com/FZ1cV.png

How can I remove the carrot icon while ensuring that the column headers are flush against the far right border without any additional spacing between the text and the border?

http://plnkr.co/edit/fa4JiMUIwtpLezYA4Fw5?p=preview

htmlcssangularjsangular-ui-grid

Answer №1

.grid-container{ 
       .ui-grid-icon-blank{
          visibility: hidden;
        }
    }

Answer №2

Give this a shot:

To align both the header text and cell text to the right, add the following code:

.ui-grid-header-cell .ui-grid-cell-contents {
    text-align: right;
}

If you only want to align the header text, use this code:

.ui-grid-header-cell {
    text-align: right;
}

See it in action on Plnkr: http://plnkr.co/edit/1JenIGIepMWmnR1Ne5Dg?p=preview

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

Steps to establish a maximum font size for my buttons

I've been working on creating buttons to decrease and increase the font size of my text. The functionality is there, but I want to establish a limit on how small or large the font can go. Here's what my current code looks like: <md-button ng ...

htmlnode.jsangular

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

javascriptjqueryhtmlajaxwordpress

Include the window.innerWidth value in the initial GET request

When dealing with a server-side rendered app that has responsive styling based on window.innerWidth, the challenge lies in how to pass the client's screen size in the initial GET request for index.html. This is crucial so that the server can prepare a ...

htmlreactjsnext.jsserver-side-rendering

Using jQuery to show/hide linked CSS3 animations upon Mouseenter/Mouseleave events

Exploring the capabilities of animate.css and jQuery within a bootstrap environment has been quite interesting for me. However, I've encountered a major issue! I am attempting to trigger animations on mouseenter / mouseleave, which led me to create a ...

javascriptjquerycsscss-animations

Replacing hyperlinks based on the user agent of a mobile device can be done using a few

I am struggling with the following HTML code that checks for a useragent from a Blackberry device. I want to customize the download URL based on the specific device, such as redirecting a user with a 9800 device to a designated download link. Can anyone ...

htmlmobileblackberryuser-agent

As I continue to fill the child DIV element with more text, the shrink wrap is compromised and eventually breaks

Snippet of HTML code: <div id="container"> <div id="first"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia velit ut magna ultricies. </div> <div id="second"> Blandit </div ...

htmlcss

The animation in an AngularJS directive only functions properly when utilizing $timeout

I can't seem to figure out why the animation is not working as intended in the code below: app.directive('openMenu', ['$animate', '$timeout', function($animate, $timeout) { return { link: function(scope, elem ...

javascriptangularjsanimation

AngularJS can retrieve the selected value from a select tag

<select ng-model="data.person"> <option value="1" selected="">1 pax</option> <option value="2">2 pax</option> </select> The ng-model above returned "1 pax," but how can I retrieve ...

javascriptangularjs

Failure in AngularJS HTTP GET Request

My attempt at using Angular code to make a GET request to different APIs has been met with mixed results. While the code works perfectly when making a request to , it encounters issues when requesting from . The error message "SyntaxError: JSON.parse: une ...

angularjsjsongetjsonp

``Considering the compatibility issues with position: absolute in Internet Explorer 8

Here's an example snippet of code in HTML: <form> <input type="file" id="iefile"> </form> <form> <input type="file" id="iefile"> </form> This is how it looks with some CSS styling: form{ position:rela ...

htmlcssinternet-explorer-8

Storing website data for localization purposes on the web platform

I am currently working on a project to develop a website that displays the selected language page upon first visit. The idea is that when a user clicks on a language name, such as French, it will be stored in web/local storage. Then, when the user returns ...

javascripthtmllocalizationlocal-storageweb-storage

Is there a way to prevent wrapping in a column, causing the last column to partially extend outside the container when the first column is hovered over?

Is there a way to prevent wrapping of a column so that when I hover over the first column, the last column displays half out of the container? I attempted to achieve this by setting the 25% to flex: 0 0 50%; in my column when hovering on the box-hover cla ...

htmlcssflexboxbootstrap-4

Why is there a thin line still visible on the other sides when a transparent background is used, but only on mobile devices, with a curved border on one side?

Recently, I've delved into the world of creating CSS art and stumbled upon a peculiar issue with CSS borders that has left me puzzled. When I apply a border to only one side of an element with a transparent background and rounded edges, I notice a fa ...

css

The alignment of inline divs is off and they are not forming a straight row

From my understanding, adding display:inline to divs with a relative position should align them (left to right) similar to float:left. I attempted both methods but with no success. Below is an example of my latest try with inline displaying. My goal is to ...

javascripthtmlcss

The ng-change function in Angular JS is triggered upon loading

I am facing an issue with a Select box where a function is being called on ng-change during page load. I want to prevent this function from running automatically on page load as it is not the intended behavior of ng-change. <select class="form-control" ...

angularjs

Adding columns dynamically to a table using ASP.NET Core 6

I am currently working on a project for my university, and I need to design a dynamic table with columns that can be added as needed. Each row should have a maximum of 4 columns before moving on to the next row and continuing the process until completion. ...

c#htmlasp.net-coreasp.net-core-mvc

What is causing errors in my Yeoman build when I use Ruby and Gems paths?

Currently, I am utilizing Yeoman to construct an Angular.js application. I have chosen to enable support for Sass and Compass in it. However, when attempting to build with Grunt, the process fails due to inability to locate Ruby for compiling the scss file ...

rubyangularjssassyeoman

Instead of being arranged vertically, the tables are positioned horizontally on display

I am attempting to generate a table using PHP and HTML that pulls data from a MySQL database. The issue I'm facing is that the data is appearing horizontally rather than vertically. if (isset($_POST['winneron'])) { echo "<tr>"; ...

phphtml

Send folder to the homepage of the website

I want to implement a redirect using .htaccess to prevent people from snooping into my directories and index files. For instance, if someone tries to access a specific image file like site.com/pics/1.jpg by trying to see the entire "pics" folder at site.co ...

phphtml.htaccesshttp-redirect

I am experiencing issues with the functionality of the Search Button in my code

I am experiencing an issue with the Search Button in my Search Form. I created the Search form using only html and pure CSS to test whether JS is necessary for a Search form with Drop Down Filter! Do I need to incorporate some JS code or is it feasible to ...

htmlcss