I have upgraded my AngularJS SPA application from ng-grid v2.0.7 to ui-grid v3 and my column headers no longer wrap around. My column headers are now single lined and show an ellipsis ... when the column header doesn't fit.
Has this feature been removed or is had it been superseded by a different method?
I believe I have found a way of wrapping text in the header columns by overriding the ui-grid-cell-contents CSS class.
.ui-grid-header-cell .ui-grid-cell-contents {
height: 48px;
white-space: normal;
-ms-text-overflow: clip;
-o-text-overflow: clip;
text-overflow: clip;
overflow: visible;
}
Adding this to my site.css I find the column names are now wrapping onto the next line as expected.
Works in Chrome (v41) and Firefox (v35).
I added the following css to get mine to work. The line height auto adjusts when depending on the number of lines needed. When scrolling horizontally, it will change to number of lines based on what is visible.
.ui-grid-header-cell-label {
display:inline-block;
white-space:initial;
}
Related
Is it possible to change the width of a row? I have some rows with JSON data. It would be best to display them in a <pre> tag so that the user can view it naturally, but this seems to be impossible.
So now I'm wondering is it possible to remove the default overflow-x: hidden? And to just let the user scroll to the end of a row? Instead of the text just having 3 dots at the end, because there's a max-width.
In the data-grid css api they show the necessary classes which could be overridden, and at the end they say:
You can override the style of the component thanks to one of these customization points
...
So you could add the following style rule to override the default one :
.MuiDataGrid-root .MuiDataGrid-cell {
text-overflow: initial;
overflow-x: auto;
}
I am trying to make the checkbox's closer together... without so much space in between vertically.
I'm using a cls to make the font size smaller which is working properly. Any ideas?
.my-class .x-form-cb-label
{
font-size: xx-small;
font-weight: bold;
}
here is a pic of the spacing that is too large
I created my css class, declared margin-bottom: -4px; (you can pick your size) and attached it to checkbox components with help of cls config. Here's the FIDDLE check index.html for css class.
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?
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableSorting : false,
enableColumnMenus : false;
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;
}
Can I have a multi line toolbar?
I need a fixed header for all my pages, but the ons-toolbar have only one line. I need two of it in my header.
It is possible to do that?
Thank you!
You can put an extra <div> with the appearance of a toolbar with class="navigation-bar": http://onsen.io/reference/css.html#toolbar
It is also possible to change the CSS of your current toolbar to make it bigger, if you want. The anwer of this question may be helpful: Doesn't show div in onsen ui and angularjs
Hope it helps!
Edit: some CSS to do this...
Fix the position to the top under a main toolbar: position: fixed; top: 44px;
Change the page content so the new toolbar does not overlap with it:
ons-toolbar ~ .page__content {
top: 88px;
}
Working here: http://codepen.io/frankdiox/pen/YXKyjX
I am using Bootstrap 3 with the following sticky footer from http://getbootstrap.com/examples/sticky-footer/
I set the #footer to min-height: 420px; so it will work responsively and adapt to narrow width and expand in height and stack the column boxes. This works just fine.
But when setting a min-height the footer will cover the content in top of it.
Is there a solution to this so the footer will be "pressed" down?
This feature works by also setting a bottom margin on the body to offset the size of the footer.
For instance, sticky-footer.css contains:
body {
margin-bottom: 60px;
}
You'll need to adjust it to the height of your #footer.