The below UI is of antd tabs. I need to expand the tab item but for some reason it doesn't work as expected.
Current UI:
Desired UI:
Code:
const App = () => (
<Tabs
defaultActiveKey="1"
onChange={onChange}
style={{ display: "flex", justifyContent: "space-between" }}
>
<TabPane tab="Details" key="1" style={{ width: "50%" }}>
Content of Tab Pane 1
</TabPane>
<TabPane tab="Updates" key="2">
Content of Tab Pane 2
</TabPane>
</Tabs>
);
Even though I have given justify-content:space-between or custom width it doesn't change.
Codesandbox: https://codesandbox.io/s/basic-antd-4-22-4-forked-hxise4?file=/demo.js
According to the docs you should use tabBarStyle instead of style. You can read more here: https://ant.design/components/tabs/
EDIT:
by applying tabBarStyle the CSS properties are appended to the upper div (the red container). In order to work it should be applied to the bottom div (the blue container):
You can try custom styling via CSS
EDIT #2:
This worked fine for me:
.ant-tabs-nav-list {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.ant-tabs-tab {
width: 50%;
justify-content: center;
}
Related
I have the following code (with "#fluentui/react": "^8.33.0",)
import React from 'react';
import { Toggle } from '#fluentui/react/lib/Toggle';
class TestIt extends React.Component {
render() {
return (
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
<Toggle onText="Width Limit Auto" offText="Width Limit Manual"/>
</div>
)
}
}
export default TestIt;
It has the following result where the label text is wrapped. If I remove display: 'flex', flexWrap: 'wrap', the label text is not wrapped.
I don't want to wrap the label text; I don't understand why display: 'flex', flexWrap: 'wrap' (for some reason / other code, I need to keep it) has an effect on that.
For instance, there is no problem with codepen: https://codepen.io/SoftTimur/pen/JjJaRvv.
Could anyone help?
I think the main problem is width of parent element. First you have unnecessary wrapper over Toggle Component because it covers only one element inside flex:
Here you are few Codepen examples.
Note:
Codepen has dynamic width and that's the reason why text wrap doesn't exist. But it shows up when you have overflow or fixed width. Put at your local example some CSS for body and html or at parent element:
body, html {
width: 100%;
height: 100%;
}
I have a Material UI <Paper> component that serves as a background and exists in my main React component- it's nested inside a <ThemeProvider>, which is nested a <div>, which is then nested in the <body>. I've applied the viewport: 100vh attribute to make it take the full height of the screen. It does take up the full height, but only prior to rendering another <Paper> component on the right hand side. Then the bottom of the paper no longer extends to the bottom of the screen:
Beginning of App render method:
return (
<ThemeProvider theme={theme}>
<Paper style={{ height: '100vh', boxShadow: 'none' }}>
<Container fluid id='app'>
.......
)
I tried applying the viewport: 100vh attribute to both the <div> that encloses the App component in index.js and the <body> element in index.html. There wasn't any difference. It may be worth mentioning that I'm using react-bootstrap Containers/Rows/Cols for my grid system at the moment (haven't switched that part to Material UI yet), but they're all nested inside the Paper, so I wouldn't expect they would be causing the problem. I also tried removing any css applied to the <Container> but it didn't help.
I'm also using a muiTheme for the <ThemeProvider> (obviously):
export default function createTheme(isDarkModeEnabled) {
return createMuiTheme({
palette: {
type: isDarkModeEnabled ? 'dark' : 'light',
primary: {
main: '#6DD3CE',
dark: '#639FAB'
},
secondary: {
main: '#52CBC5'
}
},
typography: {
fontFamily: [ 'montserratlight', 'Times New Roman' ].join(','),
body2: {
fontFamily: [ 'montserratmedium', 'Times New Roman' ].join(',')
},
h3: {
fontSize: '1.75rem'
},
button: {
fontFamily: [ 'montserratmedium', 'Times New Roman' ].join(',')
}
}
})
}
Update and Solution
I did redo my layout using flexbox instead of react-bootstrap, and ultimately fixed the problem by using min-height: 100vh instead of height: 100vh for my container so it had room to expand.
It appears that your <Container> has a bit of padding that is causing the content to go beyond its height:
This could also be due to your <textarea /> not having an assigned height. This is a particular issue when you are in a medium-sized screen.
If you are already planning to do away with Bootstrap's layout system, consider flex box and styled containers:
import React from "react";
import styled from "styled-components";
export default function App() {
return (
<Container>
<StyledHeader>Hello StackOverflow</StyledHeader>
<StyledCol>
<p>This is column 1.</p>
</StyledCol>
<StyledCol>
<p>This is another column.</p>
</StyledCol>
</Container>
);
}
const Container = styled.div`
height: 700px;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
`;
const StyledHeader = styled.h1`
height: 30%;
width: 100%;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const StyledCol = styled.div`
height: 70%;
width: 50%;
& p {
text-align: center;
}
`;
CodeSandbox Example: https://codesandbox.io/s/stack-63802170-flexbox-example-909ol
This will ultimately give you more control over the layout of the page.
I can't find an answer for this, even though there are many flex themed questions.
I created a simple React app (npx create-react-app).
I then deleted App.css and set the contents of index.css to:
html, body, #root {
height: 100%;
margin: 0;
}
Next, in App.js I'm trying to have a full screen element using flex:
import React from 'react';
function App() {
return (
<div style={{ backgroundColor: 'blue', display: "flex", flex: 1 }}>
<div style={{ display: "flex", flexDirection: "column", flex: 1 }} />
</div>
);
}
But it just won't work. Why is the flex element not stretching?
The flex-grow works when there are other elements in the flex. It makes the element to grow x times in comparison to others.
wrt the solution you have implemented: inner div doesn't require display: flex and direction too. It will be inherited from the parent div.
To make the div take the full height. add height: 100vh to the parent div.
Let me know if this will solve the problem.
Thank you.
To achieve height of window you need to mention height: 100vh for parent tag like
class- .parent{height: 100vh}
object style - style={{height: '100vh'}}
import React from 'react'
function App() {
return (
<div style={{ backgroundColor: 'blue', display: "flex", height:'100vh' }}>
<div style={{ display: "flex", flexDirection: "column", flex: 1 }} >Hello world</div>
</div>
);
}
I have a bootstrap tab bar as follows:
<div>
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" style={style1}>
<Tab eventKey="policies" title="Policies" style={style2}>
slakf lsjdflkadsjf lkadkfdksjflk lakdffj lsdjlk lkdfk kldnfkjk lasdfj lksdfjkajfl lkadjflkadlkf ksdjflkajsf
</Tab>
<Tab eventKey="reporting" title="Reporting" style={style2}>
d
</Tab>
<Tab eventKey="dashboard" title="Dashboard" style={style2}>
f
</Tab>
<Tab eventKey="editProfile" title="Manage Profile" style={style2}>
f
</Tab>
<Tab eventKey="community" title="Community" style={style2}>
f
</Tab>
</Tabs>
</div>
I am trying to figure out how to space the tabs evenly across the full width of the div. Currently they are bunched on the left hand side. I can't even force them on the right side.
Reducing the width of the Tabs element also reduces the width of the tab content - which I want to avoid.
Currently, I have tried:
const style1 = {
fontSize: '90%',
marginLeft: 'auto',
textAlign: 'center',
marginRight: 'auto',
float: 'justify',
width: '80%'
}
const style2 = {
textAlign: 'center',
}
I have read other posts where users have given up trying and they suggest to use tables instead of tabs. Is there an option that allows the use of tabs with evenly justified width of tabs?
Just include the words fill and justify within the tab (see below for example):
<Tabs fill justify defaultActiveKey="home" id="uncontrolled-tab-example" className={styles.tabLinkContainer}>
You can try flex to achieve this,
const style1 = {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
margin: 0;
padding: 0;
}
const style2 = {
flex: 1;
text-align: center;
}
I am basically trying to create something like this:
Two boxes, the red one is vertical text and the blue one is horizontal text. The height of the red box should be the same as the blue box
I know that I can make text sideways like that by doing:
transform: [{ rotate: '-90deg'}]
on it, but I am having issues getting the rest to work correctly and having the boxes be aligned and sized properly. Any help would be greatly appreciated!
You should really try playing with the layout of React Native and post what you have tried but here's a sample code
<View style={{ height: 100, flexDirection: 'row'}}>
<View style={{ flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center' }}><Text style={{transform: [{ rotate: '-90deg'}]}}>Value</Text></View>
<View style={{ flex: 8, backgroundColor: 'blue', alignItems: 'center', justifyContent: 'center'}}><Text>Short Text</Text></View>
</View>
Result:
So little style pointers:
flexDirection is by default column, so if you don't say its a row,
your views will stack vertically
flex fills your screen in the flexDirection. I have 2 elements in my row with flex, so view1 will take up 1/9th of the space and view2 will take up 8/9th
Alignitems will align your items in the direction of your flex, so horizontally if it's a row, vertically if it's a column.
justifyContent aligns item in the crossaxis, so if your flex is a row, it will align items vertically
Ohey its the same as css
This fiddle should get you close: https://jsfiddle.net/1f8png0r/4/
I would stay away from styling using JS at all costs - (mainly $.css() and $.transform(), etc) It is much slower than CSS and CSS is much easier to maintain down the road -- especially if you can learn to style your selectors nicely!
To break it down a little - you want to create a .row a .left column and a .right column. Inside the .left column you want some text. You want to transform that text and rotate it -- rotate(90deg). I have never used the flex vs. inline-flex for this before now, but after needing to do horizontal text a handful of times I think it is the most robust IMHO.
The main focus is to create the grid as you need it, and to transform the content in the left column of the grid relative to the column (rather than relative to the row).
Hopefully this helps get you closer, cheers!
HTML
<div class="row">
<div class="left">
<span class="h-text">LEFT</span>
</div>
<div class="right">RIGHT</div>
</div>
CSS
.row {
width: 756px;
height: 100px;
border: 2px solid green;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.right {
width: 80%;
height: 100%;
background: red;
display: inline-flex;
justify-content: center;
align-items: center;
}
.left {
width: 20%;
height: 100%;
background: blue;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
.left .h-text {
position: absolute;
transform: rotate(-90deg);
}
you could do this.
https://codepen.io/anon/pen/yGepmm
This is an aproach using flexbox. I use sass for clear syntax (no ; )
.sass
div:first-child
display: flex
justify-content: center
align-items: center
transform: rotate(270deg)
width: 100px
background: blue
color: white
text-align: center
vertical-align: middle
div:nth-child(2)
display: flex
padding-left: 2rem
background: lightgreen
justify-content: start-end
align-items: center
color: grey
height: 91px
width: 100%
.html
<section>
<div>
Value
</div>
<div>
Lorem Ipsum
</div>
</section>
It's a very less code implementation, you will have to calculate for now, manually the:
height of div:first-child (which it's the width because the
rotation).
And the height div:nth-child(2).
Hope this helps
I implemented this way giving fixed height and some tweak with flex:
<View style={{flex: 1, paddingTop: 40}}>
<View style={{ flexDirection: 'row', height: 100 }}>
<View style={{ backgroundColor: 'red', justifyContent: 'center' }}>
<Text
style={{
textAlign: 'center',
transform: [{ rotate: '-90deg' }],
}}>
Value
</Text>
</View>
<View
style={{
flex: 1,
backgroundColor: 'aqua',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Some text here....</Text>
</View>
</View>
</View>
Here is the link to snack if you want to play around. Might have extra unnecessary styles. You can play with it in the snack.
I hope, you got the idea?
https://snack.expo.io/#roshangm1/humiliated-cookies