I am working with react-bootstrap-table and I am facing problems with formatting it. Main issues are:
the headers with long names should be presented with 2 lines of text, instead there is one and "..." like in the picture below:
Moreover in no way I could set the height of a single row of a table. Each text has big padding therefore the table is not too condensed:
And the code goes here:
<BootstrapTable
data={this.props.sales}
version="4"
striped
hover
pagination
keyField="Type"
>
{tableHeaders.map((header, index) => (
<TableHeaderColumn key={index} dataField={header.id} style={{ height: 10 }}>
{header.name}
</TableHeaderColumn>
))}
</BootstrapTable>
According to docs you can do all of the customizations you need.
First issue: To remove dots you can use thStyle property which you can pass to TableHeaderColumn component and override CSS white-space property.
<TableHeaderColumn thStyle={{ whiteSpace: 'normal' }} {...anotherProps} />
Second issue: You can handle height of your row using trClassName property. You can either pass string or function to handle each or make conditional class depends on row. See more here.
For example:
<BootstrapTable trClassName="customClass" {...anotherProps} />
And define your customClass:
.customClass {
// override padding or height whatever you want
padding: 3px;
}
Good luck and have fun!
Related
I'm having some trouble with the Tabs/SwipeableViews from React.
I copied this: MaterialUI Tabs.
Which overall works fine! I just have a small issue with padding in the content.
My result:
Current Result
Overall buttons work all fine and dandy, + the animation aswell. But when I inspect the page there is a 24px padding on the content (It was previously on the buttons aswell, I was able to fix this with just overriding the style. But the content of the *Swipeablev
Wanted result:
Wanted result
I've tried a few different things, even dirty tricks as doing -24px margin. But that broke the tabs.. Any help would be much appreciated and hopefully I gave enough information on the matter!
Have a nice day.
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`full-width-tabpanel-${index}`}
aria-labelledby={`full-width-tab-${index}`}
{...other}
>
{value === index && (
<Box style={{ padding: 0 }} p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
your issue was in the above function. you needed to remove the padding from the Box within the TabPanel function.
I believe the issue was you were giving it the prop of p={3} which gives it default padding
I am using React-Virtualized to create a lazy loading infinite list.
https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md
However, I am not able to create a gap between the rendered divs, since they are absolutely positioned and top is calculated dynamically.
I've tried the following, however no luck.
Any ideas on how to add this gap between each element? Thanks!
<AutoSizer disableHeight>
{({width}) => (
<List
onRowsRendered={onRowsRendered}
ref={registerChild}
rowCount={rowCount}
rowRenderer={rowRenderer}
width={width - 30}
rowHeight={175}
height={this.state.height - 64}
style={{
paddingTop: 15,
boxSizing: 'content-box',
}}
containerStyle={{
position: 'relative',
overflow: 'visible',
}}
/>
)}
</AutoSizer>
I ended up solving for the padding by adding a div inside the CellMeasurer as a parent container to provide the padding.
The div is the absolute positioned container, whereas the Card is padded and shows the box shadow.
<CellMeasurer
cache={this.cache}
columnIndex={0}
key={key}
rowIndex={index}
parent={parent}
>
{({ measure }) => (
<div
className={s.listItem}
style={style}
onLoad={measure}
key={index}>
<Card>
Build a div using padding-bottom arround your rendered item.
Example:
<div style={paddingBottom:10}>
// Your item component goes here
</div>
I also asked on GitHub what's the prefered way. See the question here: https://github.com/bvaughn/react-virtualized/issues/1786
You can just decrease the height, if one item is like 50 pixels and you want some spacing , do that to your cell renderer (rowRenderer prop):
style={{ ...style, height: CELL_HEIGHT - ROW_SPACING }}
So item will be placed on the exact same places based on the calculations of the library but they will be smaller and you will have space between them.
That would be your List component:
<List rowHeight={CELL_HEIGHT} .... />
How can align items in row/column depending on condition in *ngFor.
If the input type is textarea, then it should be in the next line otherwise on the same line.
html input from json - Stackblitz Demo
what you are trying to do is rather simple, you just need to add an extra class in the div you are iterating through with *ngFor as in:
<div
*ngFor="let prop of objectProps"
[ngClass]="{ 'same-line': prop.type !== 'textarea' }"
>
Then you can use that class to set the element's display to inline-block so that it does not go in the next line as in:
.same-line {
display: inline-block;
width: 50%;
}
(note that I also needed to specify the width as that needs to be known here)
This is the result:
And I you can also see this working in the following fork of your stackblitz demo:
https://stackblitz.com/edit/typeinformationdynamic-i24na7?file=app/dynamic-form.component.ts
The order is a useful property in flex.
I search this on the internet.
Summary
The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.
<View style={{display:'flex'}}>
{ item.cover ? <Image style={[styles.item, styles.newsItem]} source={{uri:item.cover}}/> : null }
{ item.title ? <Text numberOfLines={1} ellipsizeMode='tail' style={styles.newsTTopTitle} source={{uri:item.cover}}>{item.title}</Text> : null }
{ item.description ? <Text numberOfLines={1} ellipsizeMode="tail" style={styles.newsTSubTitle} source={{uri:item.cover}}>{item.description}</Text> : null }
</View>
</TouchableOpacity>
newsTSubTitle: {
fontSize:10,
lineHeight:13,
color:'#9B9B9B',
width:233,
textAlign:'left',
alignSelf:'flex-end',
order:2,
},
newsTTopTitle: {
fontSize:12,
lineHeight:15,
color:'#000000',
width:233,
textAlign:'left',
alignSelf:'flex-end',
order:1,
},
My coder is like above, as a result, the error show.
One more thing.
The item.cover sometimes does not have value. Then the Text will layout in the top of father view. I want to set the Text component in the bottom of the father view. Should I put a placeholder image in this case?
React Native's flexbox is not 100% identical to its web counterpart. RN's flexbox really only supports flexDirection, alignItems, justifyContent, and the flex attributes. You can learn more in the documentation here.
I wonder how ExtJS makes columns hidden without any visible CSS changes!
The problem that I had - I can't set the CSS rule to hide children icon in that hidden column. F.e. if the hidden td had class 'hidden', I can use something like that:
td.hidden img {display:none;}
But in this case I can do it only in renderer with manipulating grid.columns[col].isHidden().
renderer: function(value,td,record,row,col,store,view) {
return grid.columns[col].isHidden() ? '' : someFunctionToRenderColumn();
},
It's ok, but then if I show hidden column it will not refresh grid and shows empty column. Of course I can add one more event for show/hide that column, but it is so difficult! Has it any simple way?
It gives them a width of 0px:
<colgroup>
<col class="x-grid-cell-gridcolumn-1023" style="width: 0px;">
</colgroup>
... and that should hide your img too. Except if you've given them an absolute positionning or something. You should try to position your img using float, margin and padding. Or you will have to toggle the 'hidden' class yourself using the hide and show event of the column.
You can hide columns by targeting the corresponding col element. No need to put classes on each of the individual tds.
Here's a fiddle I made earlier: http://jsfiddle.net/MrLister/MupLH/
which has
<table>
<col><col class="invisible"><col>
...
and the CSS:
.invisible {visibility:collapse}
But you don't even need a class; you can also use col:nth-child(2) if you know the column number.