I am trying to build a grid created by AngularJS's ng-grid module that will extend across the width of the webpage. However, when I create the grid, by default it only extends roughly 1/2 of the way across the page. Increasing the width of columns only results in columns being cut off instead of expanding the overall grid. I can't find any online documentation on how to expand the width of grids so any help would be appreciated.
Create a grid style.
.gridStyle {
border: 1px solid #ccc;
width: 100%;
height: 300px
}
And then apply it to the HTML
<div class="gridStyle" ng-grid="gridOptions">
Related
I have used following code for increasing the left border of particular column using id selector:
div#PriceCurveCurrent {
border-left: 1px solid black;
}
The quick solution.
.x-gridcolumn > .x-header-el {
border-right-width: 12px;
}
Another solution might be to use the ExtJS theme variables.
Here is a starting point.
I have 20 columns in the grid. I want the grid to be split in half, where in the left half I can scroll through the first 10 columns, and in the right half I can scroll through the last 10 columns. In other words, I want there to be two horizontal scrolls in the same Grid. Is it possible?
The functionality you're trying to implement doesn't natively exist in ag-Grid. One solution would be to use pinned columns where you pin 10 columns to the left. The problem would be that you cannot scroll pinned columns, therefore you'll have the add some extra css in order to modify the grid to your needs.
NB. this is VERY hacky solution:
Add the following to your css in order for the pinned columns to be scrollable (change the width from 200px do your desired width):
.ag-pinned-left-cols-container {
min-width: 200px !important;
width: 200px !important;
overflow: auto !important;
}
.ag-horizontal-left-spacer {
width: 200px !important;
max-width: 200px !important;
min-width: 200px !important;
}
.ag-pinned-left-header{
width: 200px !important;
max-width: 200px !important;
min-width: 200px !important;
overflow: hidden !important;
}
You'll also need to make sure the pinned column headers scroll along with the pinned columns. For this, you can use an event listener:
document.getElementsByClassName('ag-pinned-left-cols-container')[0].addEventListener("scroll", this.runOnScroll, {passive: true});
runOnScroll = function(evt) {
document.getElementsByClassName('ag-pinned-left-header')[0].scrollTo(evt.srcElement.scrollLeft, 0)
Demo.
For those interested in ViqMontana's solution:
In version 28.1.1 they added a new event-listener which resets any scroll inside the header (commit 12552505). It says this would fix bug "AG-7137", which I can't find out what it was.
It's possible to remove this listener after the grid is ready:
const api = this.gridOptions.api;
api?.ctrlsService.leftHeaderRowContainerCtrl.destroyFunctions[6]?.();
api?.ctrlsService.rightHeaderRowContainerCtrl.destroyFunctions[6]?.();
After this the header scrolls correctly.
When using TypeScript, you will need to cast api to any.
I have read Antd's layout design documents and the docs on Grid and Layout. What I don't understand is how to accomplish the following design in Antd:
I'd like my app to have a single centered column.
On a wide screen (landscape clients), the center column should be fairly narrow. In terms of grid, maybe 8 units.
On a narrow screen (portrait clients), the center column should use a relatively large
width. In terms of grid up to 24 units in case of very narrow/small screen sizes.
Basically this sounds like I'm looking for the good old container with a max width. I could obviously come up with some custom CSS to style a custom <div>, but this makes me wonder:
Am I missing something, or is there really no way to achieve that with Antd's layout system natively?
If so, am I doing something wrong in terms of modern UI design philosophy?
We have done this. Not exactly via Ant Design, but used a lot of Ant Design inside this.
I am not sure what other solutions are, but this is how we did it. The container you talked about was the parent container of our website, with everything else rendered inside this.
We created a routing inside the main container (as bottom tabs, so was convenient for us) and set its max-width to 420px. Since everything was contained in the bottom tabs, our app was centered when on landscape clients, and looked to fill the width on portrait mode.
Code for clarity. (its a react app)
App Container CSS:
.App {
text-align: center;
height: 100vh !important;
}
Parent Container CSS:
.parentcontainer {
height: calc(100vh - 50px);
max-width: '100%';
display: inline-block;
width: 100vw;
}
Tab CSS:
position: 'fixed',
padding-bottom: '10px',
bottom: '0',
width: '100%',
max-width: '420px',
This worked for us, and the behavior is what you desire.
I'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800
So I thought formatting the borders within an extjs treegrid would be basic but I have not been able to find a solution after hours of trying and looking around. The problem I'm having is that my borders appearance and width are inconsistent between both columns and rows (tried attaching screenshot but couldn't since new to site). I tried defining borders directly in the column creation:
columns:[{header: 'H6',dataIndex: 'hour6',width: 210, border: 1}]
as well as in the XTemplate where I'm setting my cell background color (didn't think this would work but thought I'd try):
columns: [{header: 'H6',dataIndex: 'hour6',width: 210,
tpl: new Ext.XTemplate('{duration1:this.doFormat}', {
doFormat: fn(v){
if (v == 1) {return '<span style="background-color: red; width: 100%; border: 1">' + v + '</span>';}
else {return '<span style="background-color:' + currentcolor + '; width: 100%; border: 1">' + v + '</span>';}
}
})
}]
Does anyone know how to format treegrid borders to fix this issue?
Thanks.
Your best bet us to use css classes through the cls config option of your column definition or manipulate the css style directly on the column element. The border between grid rows is set on the .x-treegrid-col class.
// set the border on all rows to red
.x-treegrid-col {
border-bottom: 1px solid red;
}
I'm not entirely sure what you are trying to achieve though, upload a screenshot to http://tinypic.com/ and embed of link to it in your original post, that might help.