I have a section list defined as
contentContainerStyle: {
flexDirection: 'row',
flexWrap: 'wrap',
}
<SectionList
sections={data}
scrollEnabled={!isLoading}
contentContainerStyle={styles.contentContainerStyle}
indicatorStyle={EStyleSheet.value(ThemeAttribute.ScrollIndicatorStyle)}
ListEmptyComponent={renderEmptyComponent}
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps="handled"
refreshing={isLoading}
renderItem={renderListItem}
keyExtractor={keyExtractor}
testID="explore-screen-section-list"
ListFooterComponent={renderSeparator()}
stickySectionHeadersEnabled={false}
renderSectionHeader={renderSectionHeader}
/>
I want headers to act like a column and group items to act like second column. Group items in screenshot act like they are also added as rows
but entire group should act like a single column something like
Related
I put two items (e.g. two buttons) in one row. I want to align the first item left, and align the second item right, which looks like:
How to achieve this in react native using flex?
After some digging, I found there're two easy ways to achieve this:
// first way
<View style={{flexDirection: "row", justifyContent: "space-between"}}>
<Button>B1</Button> // align left
<Button>B2</Button> // align right
</View>
// second way
<View style={{flexDirection: "row"}}>
<Button>B1</Button> // align left
<Button style={{marginLeft: "auto"}}>B2</Button> // align right
</View>
to do this, use space-between. If the container has a width larger than the 2 buttons, you'll see one on the left, one on the right
doc
I am trying to make Mui select scrollbar position on center of the list by default and keep this field empty on start. Now whenever user clicks the select it shows values starting from the first one. For example in this select example here, I would like it to show values with the "100" on the center of the list. Now it shows "10" on top of the list what is by default.
I want it to look like that without user interaction - empty field:
After user click - it is now:
after user click - What I want to achieve:
Thanks in advance.
You set it in the in the default value in your useState which is what i recommend.
const [value, setValue] = useState("100");
or if for any reason you don't want this approach you can write it in the value of the Select like this:
<Select
label={null}
MenuProps={{ style: { maxHeight: "300px" } }}
IconComponent={() => null}
name={"example_name"}
value={value || 100}
onChange={handleChange}
>
I am pretty new to Material UI for React,
As per design, i need to give One column gap between each item component (totaling 12 columns)
Ex. 3 Column item + 1 column Gap + 3 Column item + 1 column Gap + 3 Column item + 1 column Gap
How to achieve this using xs/lg etc without creating empty column item OR margin padding as that would be static.
You would need column offset, as with bootstrap grid, but it is not supported by material-ui.
In my opinion, there is nothing wrong with adding an extra column, you could event wrap it in a component:
function MyColumn({ children, ...rest }) {
return (
<React.Fragment>
<Grid item {...rest}>
{children}
</Grid>
<Grid item xs={1} />
</React.Fragment>
);
}
I have a nested grid, and I am able to change the nested grid row background color based on the value of one of its columns. But I would like to also be able to change the color of the parent row.
For example: Parent:Study, Child:Site, Condition:column Status=pending.
If a site has a status of pending, I would like to change the row color for the pending site, and also change the row color for the study the contains that pending site.
var cellclassname = function (row, column, value, rowdata) {
if (rowdata.Status =="Pending") {
return "red";
}
}
The code above works for the nested grid:
columns: [
{ text: '<b>Site ID</b>', datafield: 'ID', width: '15%', cellclassname: cellclassname},
{ text: '<b>Organization Name</b>', datafield: 'SiteName', width: '70%', cellclassname: cellclassname},
{ text: '<b>DSA</b>', datafield: 'Status', width: '15%', cellclassname: cellclassname} ]
but not for the parent grid:
columns: [
{ text: '<b>Study Filter</b>',
datafield: 'StudyName', width: '100%', cellclassname: cellclassname }
]
How can I modify my cellclassname function so it will change the row color for the parent row as well?
Thanks in advance!
I created a work around solution.
From the database side, I was able to generate the parent data with an extra column, which says if any of the child information has a pending, then the parent study will also have a pending status. So when generating the grid, I was able to color the parent row based on that information, and I made the status column hidden.
I am still curious to know how I could have done it using the jqwidgets functions instead of modifying the source data.
Is it possible to programmatically create a Grid that has 3 rows and 2 columns, but the last row only has 1 column instead of 2?
public class MyGrid : Grid
{
public void DefineRowsAndColumns()
{
// I know you can add RowDefinitions and ColumnDefinitions here, but how to make them uneven?
}
}
I'm not trying to get someone to do my homework here...I just want to know how I can get a grid to have rows with different number of columns.
you can use the ColumnSpan property to make content span multiple columns
var label = new Label { Text = "Row 1" };
myGrid.Children.Add(label,0,0);
Grid.SetColumnSpan(label,2);
the Label will span 2 columns, effectively making that row contain only a single column