I develop a SPA application and I wish place table in parent element bounds but I can't set explicit height. I can set scroll.y of table body but then result total height is large by header height. I can't get header height to calculate total needed height.
How I may place table into parent bounds?
<div style={{ width: '100vw', height: '100vh'}}>
<Table scroll={{ y: '100%' }} style={{ width: '100%', height: '100%' }} pagination={false} columns={columns} dataSource={data} />
Seems like it's more of a CSS issue within Ant then a bug. it's a browser limitation.
Try working with vh units mixed with calc:
Example:
scroll={{ y: 'calc(100vh - 4em)' }}
Related Github discussion (require tranlation)
Instead of setting scroll={{ y: '100%' }}, set a number. Because scroll y only takes a number where scroll x takes a number or boolean.
Related
I have the following image in my React Native app
I want to have this image inside a parent element with no space above or below it, and I want the image to not overshoot the left or right sides of the screen
When I have the code like this
<View style={{
marginTop: 100,
borderWidth: 2,
borderColor: 'red'
}}>
<Image
style={{
width: '100%'
}}
source={require('#images/swoosh-02.png')}
/>
</View>
I get this, because default for resizeMode is cover
When I change it to this (adding resizeMode='contain')
<View style={{
marginTop: 100,
borderWidth: 2,
borderColor: 'red'
}}>
<Image
style={{
width: '100%'
}}
resizeMode='contain'
source={require('#images/swoosh-02.png')}
/>
</View>
the image gets successfully contained horizontally, but the height of the parent element remains the same as it was when resizeMode was cover.
How can I get it so that the parent element shrinks vertically to contain only the image and not have that extra top/bottom padding?
De diference between contain and cover is :
resizeMode='contain' = Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
resizeMode='cover' = Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Maybe you should try to apply height in your View.
Read this article, should help you.
For some reason when I do add domLayout={'autoHeight'} the header is showing, but the rows have one space between each row!
If I remove that autoheight, the rows are okay and under eachother no issues, but the Header of the table is under the table first row....
I did play with the height of the DIV around it, from fixed to 100%... no luck.
Any way?
[![<div
id="myGrid"
style={{
height: '100%',
width: '100%',
}}
className="ag-theme-balham-dark"
>
<AgGridReact
columnDefs={columnDefs}
rowData={ ...}
onGridReady={...}
onCellValueChanged={...}
onRowValueChanged={...}
toolPanelSuppressSideButtons={true}
enableColResize={true}
allowContextMenuWithControlKey={false}
animateRows={true}
domLayout= 'autoHeight'
getRowNodeId={this.getRowNodeId}
getContextMenuItems={this.getMyContextMenuItems.bind(this)}
overlayNoRowsTemplate={
'<span style="color:dimgray;font-weight:bold"></span>'
}
/>
</div>][![1\]][1]][1]
How can I set the height of an image in gatsby? My approach was this:
My query:
image {
fluid {
...GatsbyContentfulFluid_withWebp
}
}
My return:
<Img fluid={image.fluid} style={{ maxHeight: '200px' }} alt={title}></Img>
The image is displaying fine but I query more than one image and using style={{ maxHeight: '200px' }} is not working for all images. Some images having different heights, I would like to display all images with the same height.
What's the proper way of doing this?
I think you are looking for a fixed image, not fluid:
My query:
image {
fixed {
...GatsbyContentfulFixed_withWebp
}
}
My return:
<Img fixed={image.fixed} style={{ height: '200px', width: 'auto' }} alt={title}></Img>
In addition, use the height, not the maxHeight property to force all image's height to 200px.
According to the docs you should use imgStyle property for directly applying styles to underlying <img>
Try something like
<Img
fluid={image.fluid}
imgStyle={{ height: '200px', width: 'auto' }}
alt={title}>
</Img>
style is applied to wrapper of <img> and your images might be overflowing it.
I like to make a div expand according to its content height but the hole Component inside that div is hidden if I use like height: '100%'. It's a bit complex and wish for some extra eyes!
I made a CodeSandbox
Looks like this in Chrome:
I can see during debug that the "hidden" Component is rendering ok so it's strange that it's "hidden"
If I set the same Style to height: 1000 the <ul> have Children:
But I want it to expand according to its content height so height: 1000 will not work.
In this CodeSandbox I set the height: 1000, to demonstrate what happens. The Component that refuse to expand height is a Masonry image gallery Component
style={{
width,
height: 1000,
position: 'relative',
margin: '0 auto',
}}
When you open the Sandbox you see in the left editor windows this TimeLineViewer.js and the Style code problem. The TimeLineViewer.js loads the Masonry image gallery Component Masonry.js
What I have tried is to set parent to also 100% height but with no luck.. I'm a little bit new to JavaScript and HTML so advice would be good
To debug this, start by taking off or commenting out the LeComponent and then testing your div actual height when you are implementing the 100% height.
<div
style={{
width,
height: !fullscreen && "100%",
position: fullscreen ? 'initial' : 'relative',
margin: '0 auto',
}}
>
{/* <LeComponent
infinite
items={items}
itemRenderer={ItemRenderer}
gutter={gutter}
outerGutter={outerGutter}
extraPx={0}
debug={debug}
rows={{
0: 1,
320: 2,
480: 3,
640: 4,
}}
cols={{
0: 1,
360: 2,
640: 2,
960: 3,
1280: 4,
1400: 5,
1720: 6,
2040: 7,
2360: 8,
}}
onEnd={() => {
// TODO possible when many items lazy load them
// this.addItems();
}}
/> */}
</div>
You will notice, that it still takes up no height at all and the component you created did not have any bearing to that. This is because it is a CSS issue. The height percentage cannot be determined because there is no parent or ancestor with a height definition. You are getting the percentage of void.
After that, we can take a glance at your Masonry component. Just by looking at the method identifiers (such as _getDimensions, _setContainerHeight) and further reviewing the code base, we can learn that this component is actually dependent on certain element dimensions (most likely the parent div dimension as well) - and from what we learned from the CSS issue awhile ago, the parent div actually has a height of 0.
At this point, I took out the style props on your Masonry Component so that it would not be dependent on the parent dimensions and that fixed the issue
<div ref={this.container}>
<ul ref={this.list}>
{mounted && items.map((item, index) => this.renderItem({ index, item, maxIndex }))}
</ul>
</div>
I wanted to scroll back up to the first element in the List when a user clicks pagination buttons.
So far I come across scrollToRow and scrollToIndex and both of them didn't work.
Here's my current code:
<AutoSizer disableWidth>
{({ height }) => (
<div>
<List
ref="list"
height={height}
rowCount={this.state.items.length}
rowHeight={115}
rowRenderer={this._rowRenderer}
width={1}
scrollToRow={0}
containerStyle={{
width: '100%',
maxWidth: '100%',
}}
style={{
width: '100%',
marginBottom: '10px',
}}
/>
</div>
)}
</AutoSizer>
After a little bit of thinking, I found out that there's no need to use react-virtualized package anymore. Since I refactored the list to make use of SSR pagination showing 24 items at a time. So, it was an overkill.
Anyway, I just reused the same _rowRenderer() function to map items into a list. To achieve the scrolling behavior I just added the styling prop of "overflow: scroll".
Thats all.