angularjs - For Angular js ui grid remove right and bottom scrolling boarders

In Angular js ui rid, how can I remove vertical and horizontal scrollbars ?

And also for each column heading I am getting a little carrot icon by default, which shows sort ascend, sort descent, Hide column. I want to remove this also from my column headings.

Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?

2 Answers

  1. Charles- Reply

    2019-11-13

        enableHorizontalScrollbar : 0,
        enableVerticalScrollbar : 0,
        enableSorting : false,
        enableColumnMenus : false;
    
  2. Chris- Reply

    2019-11-13

    Good answer from @Asqan answering the first part of your question. For the second part:

    Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?

    I'm thinking you mean you want the look in this plunker I created.

    You can solve these css issues in one of two general ways.

    1) Customize the ui-grid css

    2) Leave the original ui-grid css then override it in your own css file

    I've shows the first option to solve your "stripped" issue and the second option to implement your desired border. I have done both for example only so you can see both options - I recommend choosing and using consistently one method or the other.

    The ui-grid sets the ".table-striped" look to which you are referring in the css. You can override this either in you own css file or using the customizer tool and setting the @rowcoloreven and @rowcolorodd fields to the hex code for white #ffffff. This will update the ui-grid css to contain the below:

    .ui-grid-row:nth-child(odd) .ui-grid-cell {
      background-color: #ffffff;
    }
    .ui-grid-row:nth-child(even) .ui-grid-cell {
      background-color: #ffffff;
    } 
    

    For ".table-bordered" see specifically in the style.css file these added lines

    .ui-grid-cell {
        border-style: solid;
        border-bottom: 1px #ff0000;
    }
    

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>