I am using the Material ui's tabs and was able to make changes to the Tab's indicator. However, I am trying to reduce the width of the indicator to some fix width for each tab using styles. But it seems the indicator are positioned to left with some calculated value, and giving it a width doesn’t center align the indicator. Couldn't find appropriate solutions, kindly help me out. Here's the editable CodeSandbox.
Find below snippets:
Default fullwidth tabs. Indicator taking full width of the base button:
Width of indicator fixed, but not aligned to center below the tab label.
Based on the docs, you need to attach a span element as the children of the indicator (using TabIndicatorProps). Then you could treat the indicator as a flex container, the span as a flex item with some fixed width.
Here's the component part:
<Tabs
{...other}
classes={{
root: className,
flexContainer: "flexContainer",
indicator: "indicator"
}}
variant="fullWidth"
TabIndicatorProps={{ children: <span /> }}
centered
/>
Here's the styling part:
"& .indicator": {
display: "flex",
justifyContent: "center",
backgroundColor: "transparent",
"& > span": {
maxWidth: 40,
width: "100%",
backgroundColor: "white"
}
}
Demo code
Related
i want to give a margin-right to my button. am using mui 5 Button variant='contained'.
wrote a custom css style using styled component in mui and targeted the Box.
const Wrapper = styled(Box)({
display: 'flex',
margin: '0, 3%, 0, auto',
'& .button':{
marginRight: '40px',
}
})
here i need to target my button element and to give a marginRight property to it.the above code doesn't works
<Wrapper>
<Button variant='contained'>Login</Button>
<Typography>Become a Seller</Typography>
<Typography>More</Typography>
</Wrapper>
i want to target the button element above. but i don't know how to select the button and to give styles by using Styled imported from import styled from '#emotion/styled';
To select a element inside the styled component. we need to select with > instead of . along with & operator
here i changed my code to this
const Wrapper = styled(Box)({
display: 'flex',
margin: '0, 3%, 0, auto',
'& > button':{
marginRight: '40px',
}
})
Task:
I would like to show a really big DataTable in UI which is horizontally and vertically is scrollable
Issue:
Cannot set scrolling on X axis
UI cuts/hides down the first half of the table if not zooming out
Makes the UI not usaböe
Tried:
Reading and setting the following properties
Reading and setting custom styles with the help of git documents
Reading and setting extra HTML tags like and styles allowing overflowX to make it scrollable
Details:
Table is roughly 50-60 columns
200+ rows
component: React-Data-Table-Component
component uses custom solution using a lot of div tags (this is out of the box upon inspecting the react-data-table-component in website)
Needs solution:
Cannot scroll left and right in table
Cannot see left part of the table
Example Column:
{
name: 'header1',
id: 'header1',
maxWidth: 'auto',
minWidth: 'auto',
selector: row => row.data1,
sortable: true,
compact: true,
},
Example Table:
<div style={{ overflowX: "visible", scrollSnapAlign: "start" }}>
<DataTable
columns={DataTableHeaders}
data={filteredItems}
pagination
paginationComponentOptions={paginationComponentOptions}
selectableRows
defaultSortField="name"
subHeader
subHeaderComponent={subHeaderComponent}
subHeaderAlign={Alignment.CENTER}
expandableRows
expandableRowsComponent={ExpandedComponent}
dense
highlightOnHover
fixedHeader
persistTableHead
responsive
direction={Direction.LTR}
//customStyles={customStyles}
//theme="dark"
//className={styleDataTable.rdt_TableRow}
/>
</div>
Apparently this issue can be solved by setting fixed % width based on viewable area
<div style={{ overflowX: "hidden", width: "94vw", alignItems: "flex-start" }}>
<DataTable
className={styleDataTable.rdt_TableCol}
columns={DataTableHeaders}
data={filteredItems}
pagination
paginationComponentOptions={paginationComponentOptions}
defaultSortField="name"
subHeader
subHeaderComponent={subHeaderComponent}
subHeaderAlign={Alignment.LEFT}
expandableRows
expandableRowsComponent={ExpandedComponent}
dense
highlightOnHover
fixedHeader
persistTableHead
responsive
direction={Direction.LTR}
//customStyles={customStyles}
//theme="dark"
//className={styleDataTable.rdt_TableRow}
/>
</div>
Notice that width: 94vw which will make the table fit on the 94% of the visible area.
This way it becomes scrollable from left to right and the data table wont overflow and wont disappear.
Not sure if there is a better solution but for now this works alright.
Using React, I'm creating a page with 2 columns, something like
const renderAst = new rehypeReact({
createElement: React.createElement
}).Compiler;
<div {...styles.parentContainer}>
<div {...styles.navContainer}> navigation stuff </div>
<div {...styles.mainContainer}> {renderAst(htmlAst)} </div>
<div>
parentContainer: css({
display: 'flex',
flexDirection: 'row',
maxWidth: `45rem`,
margin: `0 auto`,
padding: rhythm(1)
}),
navContainer: css({
paddingRight: rhythm(3 / 2)
}),
mainContainer: css({
marginTop: rhythm(3 / 2),
paddingTop: rhythm(3 / 2),
width: `100%`
}),
I'm writing content in markdown, and converting it to html, then rehype-react is converting that html to react components. However, for some reason, the main container width extends past the allotted width, and becomes the width of the parent container, rather than staying within the set bounds.
Here's a screenshot of the chrome inspect tools on this layout
Interestingly, I don't see this issue if I simply replace renderAst with some my own react components.
Please let me know what I can do to fix this, thanks!
I am building a project based on this React Template.
In one of the componenets I have a Select List and under it there's a Card element.
The problem is that when I click on the list the items appear under the card element as you see below:
I had a feeling this was caused by the CSS code of the template itself that configures the card to appear over all other elements.
So what I did is I created a new react project with:
npx create-react-app
And my suspicion was right.
I copied basically the same code:
const selectStyles = {
control: (styles) => ({ ...styles, backgroundColor: "white" }),
option: (styles) => {
return {
...styles,
backgroundColor: "green",
"z-index": -5,
};
},
};
export default class App extends Component {
render() {
return (
<Fragment>
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[0]}
name="color"
options={colourOptions}
styles={selectStyles}
/>
<Card
style={{
position: "absolute",
"background-color": "red",
"z-index": 5,
}}
>
<CardImg
top
width="100%"
src="/assets/318x180.svg"
alt="Card image cap"
/>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Fragment>
);
}
}
And the select items appear ABOVE the card:
The card is colored in red.
CONCLUSION: The problem is caused by the card css code of the template.
As you see, I tried with different configurations with the z-index attribute, but to no avail.
Any idea how to fix this?
The problem is with the z-index and position, whichever content you want to show in the top should have higher z-index value.
Try giving the select dropdown the high values compared to card.
Try removing both css attributes position: absolute and z-index if it is not needed. Position absolute is only used when to need to move the content to wherever you want to the respective relative parent container. So if you are just practicing and not doing design try to remove both.
Basically, I'm creating a form component that is contained inside a v-dialog. The form component will have different child components that are rendered based on select input. So I have to set width of v-dialog to "unset", so that the width of the dialog will stretch to match its content.
The transition works when I toggle the value of width, eg: either 450px or 300px. The problem is that I don't know beforehand the width of the form contains in the dialog, so I definitely need to use dynamic width.
So far, I can not find anyways to achieve transition when using dynamic width. I was trying to get the width of the form component using refs, but setting width to unset, prevent the transition. By the way, the transition I'm talking about is the transition of the width, when using fixed width, it shows nice transition but not for dynamic width
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-dialog v-model="dialog" width="unset">
<template v-slot:activator="{ on }">
<v-btn color="red lighten-2" dark v-on="on">
Click Me
</v-btn>
</template>
<v-card>
<v-select v-model="selectedForm" :items="items">
</v-select>
<div v-if="selectedForm==='form-a'" class='form-a'>FormA</div>
<div v-if="selectedForm==='form-b'" class='form-b'>FormB</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text #click="dialog = false">
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-app>
</div>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
selectedForm: "form-a",
items: ["form-a", "form-b"],
dialog: false
};
}
});
codepen for using fixed width: https://codepen.io/duongthienlee/pen/MWaBLXm
codepen for using dynamic width: https://codepen.io/duongthienlee/pen/GRpBzmL
Noted that in the example i made in codepen, I defined width already, but the real case is that I don't know beforehand the width of form-a and form-b component. form-a and form-b width will be inherited by its parent div which is v-dialog, so that's why I set the width of v-dialog to be unset.
An example of what I mean "dynamic width": form-a has a select input. When user chooses an item, there will be a request to server to get input labels. So form-a will render multiple input fields based on the response body from server. The response body will contain label and default values information. So that makes the width of form-a becomes dynamic.
I think something like this can work for you.
Change v-dialog like so:
<v-dialog v-model="dialog" :width="forms.find(x => x.name===selectedForm).width">
Modify data() to return a forms prop:
data() {
return {
selectedForm: "form-a",
items: ["form-a", "form-b"],
dialog: false,
forms: [
{
name: 'form-a',
width: 200
},
{
name: 'form-b',
width: 1000
}
]
};
}
What you want to do is get the size of the rendered form, and then apply it to the dialog.
This is a common theme when attempting to animate content with dynamic dimensions.
One way to do this is by:
Set the form's visibility as hidden
Wait for it to render
Get the form's width and set it to the dialog
Unset the form's visibility
The tricky/hacky part is that you have to properly await DOM (setTimeout) and Vue ($nextTick) recalculations. I didn't have to await for Vue's $nextTick in this example, but you probably will if you're rendering nested form components:
<div class="form-container">
<div :style="formStyle('form-a')" class='form-a' ref="form-a">FormA</div>
<div :style="formStyle('form-b')" class='form-b' ref="form-b">FormB</div>
</div>
computed:{
formStyle(){
return form => ({
visibility: this.selectedForm == form ? 'inherit' : 'hidden',
position: this.selectedForm == form ? 'inherit' : 'absolute'
})
}
},
methods: {
async onSelectChange(form){
// async request
await new Promise(resolve => setTimeout(resolve, 1000))
this.selectedForm = form
this.recalculate()
},
async recalculate(){
// wait for DOM to recalculate
await new Promise(resolve => setTimeout(resolve))
const formEl = this.$refs[this.selectedForm]
this.dialogWidth = formEl.clientWidth
this.dialogHeight = formEl.clientHeight
},
...
}
Here's the working code to give you an idea:
https://codepen.io/cuzox/pen/yLYwoQo
If I understand you correctly, then this can be done using css. You can try replace all the fix width in the form with
width: fit-content;
For example in you codepen:
.form-a {
width: fit-content;
height: 350px;
background: blue;
}
.form-b {
width: fit-content;
height: 500px;
background: red;
}
The v-dialog renders into a div with class v-dialog:
It seems the animation only works when the the width is of known value, so it cannot be just "unset". The solution would be to get the width of the child element, and set the width of the v-dialog accordingly with a variable.
See VueJS get Width of Div on how to get the width of the child element.
Let me know if it works, I find this is very interesting.