I am getting started with react ag-grid, and it seems that the tutorials the provide have hardcoded with and height:
<div
className="ag-theme-balham"
style={{ height: '200px', width: '600px' }}
>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>
</div>
If I remove width and height specs, the grid simply doesnt show up.
I really dont want to have some magical size numbers. If I am using Bootstrap or Material CSS, and I have the notion of a "centered container" class with some controls in it, I would like the grid to be of that container size -- is that possible? I dont know CSS at all -- kind of cutting and pasting examples, but essentially, I want a series of input controls, centered on my page vertically -- and ag-grid among them. this doesnt seem to be an issue with the "standard" html inputs/buttons, but ag-grid is a different beast. thank you
Something like this:
<div style={{height: '500px', width: '100%', position: 'absolute'}}>
<div className="ag-theme-balham" style={{height: '100%'}}>
<AgGridReact gridOptions={gridOptions}/>
</div>
</div>
Here the grid height will always be the same as outer div height.
Related
I am having an issue when using <#nested in FreeMarker
If I do:
<div style="background: white;">
<#nested "header">
<#nested "info">
<#nested "form">
</div>
<div>NOT WHITE</div>
Even the div with NOT WHITE text has a white background. The div itself also gets nested inside the previous div for some reason. Can someone help me here?
Probably your actual nested content (which you don't show in your question) has an unclosed div. Thus the </div> you have after <#nested "from"> closes that unclosed div, and so the div that sets the white background stays open.
I am learning material-ui v5 and it's new styling system, using sx, how do I set a bunch of different element on the same line to have the same height?
<Mui.Box m={2}
component="form"
sx={12}
md={12}
noValidate
autoComplete="off"
>
<Mui.Card variant="outlined" raised sx={{ p: 2 }}>
<Mui.Grid container
spacing={2}
direction="row"
alignItems="center"
justifyContent="center">
<Mui.Grid item xs={12} md={3}>
<Mui.TextField
required
fullWidth
id="password"
label="Password"
type="password"
defaultValue=""
helperText="Some important text"
/>
</Mui.Grid>
<Mui.Grid item xs={12} md={3}>
<Mui.Button
fullWidth
variant="contained"
size="large">
Authenticate
</Mui.Button>
</Mui.Grid>
</Mui.Grid>
</Mui.Card>
</Mui.Box>
Here is what it currently look like:
As you can see they have different height and are not aligned vertically, how do I fix this?
Hover the grid items and you'll notice that the alignItems="center" is possibly starting you at a bad spot.
Change this to top then you know the elements are starting at the same spot. Seeing as you have the helperText, I think the best option is to then set your button height to match the TextField.
So, change the grid container prop alignItems="center" to alignItems="top" and then add something like sx={{ height: "56px" }} to your button.
If you need to do this frequently, make the button a styled component so you don't need to keep adding the sx prop.
See it here: https://codesandbox.io/s/usage-forked-tn7rw?file=/index.js
By the way, line 3 looks like it should be xs, not sx.
You can't control the height of the text box and the button precisely enough in MUI to make them exactly the same height, the "large" button is just slightly larger than a "small" text field.
But you can at least align them better by using alignItems="stretch" in the outer <Mui.Grid>:
But, in general it's much better to organize forms vertically, in a single column:
Single column forms convert a lot be!er than multi-column ones because you only have a single path to follow with your eyes, instead of jumping between blocks.
Locally ran Basic AngularJS 1.x Example, found out if style="height: 100%;" the grid collapsed into a horizontal line. Setting it to something else like 100px works.
Everything the same except my Angular is 1.5.0, and ag-grid v8.1.0.
<div ng-controller="exampleCtrl">
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>
JS is the same as the tutorial. Looks like a bug.
This is almost certainly due to you having DOCTYPE html in your html file.
If you do, then you need to ensure that the grids container has a non-0 height to fill, otherwise it will appear as a flat line as you've found.
This is not an ag-Grid specific issue - it's a side effect of not having quirks mode in use.
The easiest thing for you to do is this:
<style>
html, body {
width: 100%;
height: 100%;
}
This StackOverflow Question/Answer explains the underlying issue pretty well
You shall try setting the autoHeight of the ag-grid, by setting the DomLayout.
See the sample code below for angular.
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
//The ag-grid is not enlarging based on the page height,
//so dynamically adjusting the height of the grid
this.gridApi.setDomLayout("autoHeight");
}
For reference see this https://plnkr.co/edit/Jb1TD7gbA4w7yclU?preview
.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
height: 100%;
}
I'm developing a GWT project, and I encountered a problematic cross-browsering problem.
When using firefox, there are problems with the display of all the pages. I found the reason why :
In UIBinder, each of my pages are wrapped by a "g:HTMLPanel" : at start and at the end of the xml file, to wrap the content of all the pages
When doing this, the generated code of the panel goes like this :
div style="width: 100%; height: 100%; ....
The problem is that "height : 100%". If I remove it with firebug, the display is perfect.
So my goal is to programatically remove that generated 100% height.. But no way to do it !
I tried everything : setHeight, setSize, working on the Element itself with getElement().methods()... I tried to do things like style.clear(), everything that could have a chance to work.. But in the generated code that "height: 100%" will ALWAYS be there. If I set it's height to "50%" or "50px" it has no effect at all.
I even tried to give it an ID, then with pure javascript to change it's style, but no solution either..
Note : I'm sure that I'm working on the right element : adding a styleName, for example, works well.
Any idea ?
Your help would be really appreciated, I have no clue of how to remove this bit of generated code, and I've been looking for hours already :(:(:(:(
Best regards,
Nils
I just inspected some of the code generated by GWT from my uibinders in firebug and < g:HTMLPanel > isn't adding any width or height styling.
I don't have < g:HTMLPanel > as the root element in my uibinder though, I have my own class.
<a:FormPanel ui:field="form">
<g:HTMLPanel>
<input type="hidden" ui:field="discoveryId" />
<table cellpadding="2" cellspacing="0" class="{widgets.gridPanel}">
<tr>
<td>Name:*</td>
What about using say FlowPanel as your root uibinder class instead, then HTMLPanel?
Failing that you could always use the !important css rule to override the ones assigned on the div.
.myHTMLPanel {
width: auto !important;
height: auto !important;
}
This can be due to the fact that an HTMLPanel is wrapped into a DeckPanel. A DeckPanel adds "height: 100%" and "width: 100%" to the elements.
After showing the widget, add the following code:
deckPanel.add(widget);
deckPanel.showWidget(0);
Element e = DOM.getParent(widget.getElement());
DOM.setStyleAttribute(e, "height", "");
DOM.setStyleAttribute(e, "width", "");
widget.setHeight("");
widget.gwtContainer.setWidth("");
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.