0

I am using ui-grid i just want header to be visible and all the rows will be hidden. Can someone guide how to make this change ?

For the same i have created jsfiddle

currently the css is below, i dont know how to change css for this problem :-

.grid {
  width: 500px;
  height: 250px;
}

1 Answer 1

2

If you wanna hide all rows (ONLY USING CSS) just do the following

.ui-grid-viewport{
  display:none;
}
.ui-grid{
  height:100% !important;
}

jsfiddle: http://jsfiddle.net/nujpd76y/5/

Well, this will permanently hide your rows, if that is what you want. Otherwise if you could just explain your use-case / requirement ... as in what you are trying to do so as we can suggest a more "angular way" to do this. :)

UPDATE:

If you want to hide header text then add following

.ui-grid-header-cell-label{
  display: none;
}

jsfiddle: http://jsfiddle.net/nujpd76y/7/

Hope this helps!

Sign up to request clarification or add additional context in comments.

2 Comments

but it is still showing area for rows.. i only want to show header nothing else. doesn't matter with CSS or without CSS. only header need to visible. As i have custom table to show the data and i am using this header as for data input and sort.
Perfect, Thanks for the answer. What if i dont want header text to be visible ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.