I have a div element that I set to have a particular width, say 600px. In that div, I have a row of elements that I would like to each have a width greater than the width of that parent div. These elements are encased in a container div to hold the elements of that row as such:
<div className="App">
<div style={{ overflow: "scroll" }}>
<div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ width: "600px" }}>Test 1</div>
<div style={{ width: "600px" }}>Test 2</div>
<div style={{ width: "600px" }}>Test 3</div>
<div style={{ width: "600px" }}>Test 4</div>
</div>
</div>
</div>
However, this just constrains the width of the "Test" divs so that all four divs fit on the screen. I've tried setting the width of the row container div, and this allows the width of the children elements to expand to 600px.
I imagine this has something to do with flexbox, but I'm lost there and would like to know how I can implement the scroll function without restricting the width of the divs.
I figured it out. All I needed to do was set the min-width of the children to the desired width.
Just change your width style into min-with.
Example below:
<div className="App">
<div style={{ overflow: "scroll" }}>
<div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ minWidth: "600px" }}>Test 1</div>
<div style={{ minWidth: "600px" }}>Test 2</div>
<div style={{ minWidth: "600px" }}>Test 3</div>
<div style={{ minWidth: "600px" }}>Test 4</div>
</div>
</div>
</div>
Related
Why does the Bootstrap container component size differently than a regular HTML Bootstrap, not sure if I am missing a prop or not?
This is what I get the output I get for both:
(the white space in the sides are from the container margin)
React code:
<Container>
<Row className="row">
<Col className="col-lg-3 col-md-4">
<div
style={{ width: "100%", height: "100vh", backgroundColor: "blue" }}
></div>
</Col>
<div className="col-lg-9 col-md-8 tab-container">
<div
style={{ width: "100%", height: "100vh", backgroundColor: "red" }}
></div>
</div>
</Row>
</Container>
Regular HTML code:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4">
<div style="width: 100%; height: 100vh; background-color: blue"></div>
</div>
<div class="col-lg-9 col-md-8">
<div style="width: 100%; height: 100vh; background-color: red"></div>
</div>
</div>
</div>
Can someone help with the correct styling/fix for the React version to match the regular one please?
I am working with a react component that produces nested divs. I'd like to style force the divs to be on the same line but can only declare styles on the outer container div. Is there a way to achieve this without styling the inner divs? If only I can pass style to the "hello" div.
Currently:
hello
secondLine thirdLine
Desired:
hello secondLine thirdLine
<div style={{ textAlign: "left", whiteSpace: "nowrap" }}>
<div style={{ display: "inline" }}>
<div>hello</div>
</div>
{` `}
<div style={{ display: "inline" }}> secondDiv </div>
<div style={{ display: "inline" }}> thirdDiv </div>
</div>
make the outer div display: 'flex'
<div style={{ textAlign: "left", whiteSpace: "nowrap",display:"flex" }}>
<div style={{ display: "inline" }}>
<div>hello</div>
</div>
{ }
<div style={{ display: "inline" }}> secondDiv </div>
<div style={{ display: "inline" }}> thirdDiv </div>
</div>
For more reference :details
if you have access and can change the HTML change the inner <div> to <span> or any inline element, the parent div have display:inline and inner div will take full width ignoring parent having inline display, because the inner div have default display block:
<div style="textAlign:left, whiteSpace:nowrap">
<div style="display:inline">
<span style="display:inline">hello</span>
</div>
<div style="display:inline"> secondDiv </div>
<div style="display:inline"> thirdDiv </div>
</div>
for your jsx code it should be like:
<div style={{ textAlign: "left", whiteSpace: "nowrap" }}>
<div style={{ display: "inline" }}>
<span>hello</span>
</div>
{` `}
<div style={{ display: "inline" }}> secondDiv </div>
<div style={{ display: "inline" }}> thirdDiv </div>
</div>
I am trying to make three buttons use the full width of a column.
The grid is 3 for the buttons and 9 for other components.
Here's a visual. So basically the buttons should also occupy the space that's marked with red, they should just use the whole column of 3.
Here's App.js where I imported the component:
<div className="container-full padding-0" style={{overflow:'hidden', overflowY:'hidden'}}>
<div className="row">
<div className="col-sm-3" style={{borderRight:"1px solid #000"}}>
<div className="row no-gutters mt-auto">
<div className="col-sm-3">
<COMPONENT1/>
</div>
<div className="col-sm-9">
<COMPONENT2/>
</div>
</div>
<COMPONENT3 store={store} style={{overflow:'hidden'}}/>
<COMPONENT4/>
<BUTTONS/> --------------------------> Here are the buttons
</div>
<div className="col-sm-9" style={{paddingRight: 0, paddingLeft: 0}}>
<COMPONENT6 = {store} style={{overflow:'hidden'}}/>
<br/>
<COMPONENT7/>
<COMPONENT8 store={store} clicked={this.clicked}/>
</div>
</div>
</div>
And buttons component:
<div className="row no-gutters mt-auto" style={{paddingTop:10}}>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>A</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>B</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>C</Button>
</div>
</div>
And the css for the buttons:
const buttonStyle = {
fontSize: 20,
textAlign: 'center',
display:'inline-block',
width:'100%',
height:100
}
EDIT: Here's a quick pic of the UI
Can you please try the following method:
Give below css rules to row no-gutters mt-auto:
style={{ display: 'flex', flex: 1, flexDirection: 'row' }}
It will work for sure !
Thanks
I want - box to come exactly below + box as shown in the attached image
I have tried this code given below but does not work. Can someone tell me what changes I need to make in the css. This is part of reactjs application.
<div style={{width:"20%",float:"left"}}>
<input type="text" style={{width:"50px",height:"60px",marginLeft:"20px",marginTop:"20px",float:"left"}}/>
<div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>+</a></div>
<div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>-</a></div>
</div>
Wrap your +/- boxes in a div and use display: flex with flex-direction: column styles on the wrapper div like
<div style={{width:"20%",float:"left"}}>
<input type="text" style={{width:"50px",height:"60px",marginLeft:"20px",marginTop:"20px",float:"left"}}/>
<div style={{display: 'flex', flexDirection: 'column' }}>
<div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>+</a></div>
<div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>-</a></div>
</div>
</div>
Wrapp em in div with flex
<div style={{ display: 'flex', flexDirection: 'column' }}>
</div>
I'm wondering why setting the font-size CSS attribute on an HTML input automatically increases its width?
I understand why it increases the height, but I'd like an input to remain the same base width when changing the font-size.
The reason I ask, is because it is breaking a flex layout I'm building, in which there is an input. When I increase the font-size, the input completely breaks out of the layout.
Here's a (react) reproduction:
<div
style={{
backgroundColor: 'blue',
display: 'flex',
flexDirection: 'column',
maxWidth: 400,
padding: 20,
alignItems: 'center',
}}
>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 20 }} />{' '}
</div>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 50 }} />
</div>
</div>
Is there a clean way to solve this?
<input> tag is one of the replaced elements and they often have intrinsic dimensions.
In flexbox you can override the intrinsic size by adding:
input {
min-width: 0;
}
Or, give it a smaller size than the default value 20:
<input size="1">
Then set the desire size by using flex / flex-grow / flex-basis, or width as needed.
You can use 100% width or a fixed width on the inputs. Also to get this working in IE, you need to remove alignItems: 'center' from the outer most div
<div
style={{
display: 'flex',
flexDirection: 'column',
maxWidth: 400,
padding: 20,
}}
>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 20, width: "100%", boxSizing: "border-box" }} />
</div>
<div style={{ display: 'flex' }}>
<span>Some text</span>
<input style={{ 'font-size': 50, width: "100%", boxSizing: "border-box" }} />
</div>
</div>
For firefox you have to wrap the input in a container and apply flex: 1 1 auto; to the container.
Hope that helps