I'm trying to put the React-select element to the center of the page. (Please Note, I'm not trying to center the text/menu but I'm trying to center the select box)
Inline Styles didn't work for me, hence I have added a div tag and was able to control the width as shown below :
<div style={{width: '300px'}} >
<Select options={selectOptions} value={selectedOption} onChange={this.handleChange}/>
</div>
But I'm not able to center the select element.
Any help on this ?
Well, that could be solved easily by using a few CSS attributes.
You know, I am sure that display: flex, justify-content: 'center', align-items: center will work as you desire.
<div style={{width: '300px', display: 'flex', justify-content: 'center', align-items: 'center'}} >
<Select options={selectOptions} value={selectedOption} onChange={this.handleChange}/>
</div>
Related
I have a quite complex layout. If simplified it's a flexbox with two child flexbox items. Parent flexbox takes full height of a screen and child flexboxes takes full height as well.
How can I make a one child flexbox take full screen height and if its bigger than a user screen then scrollY should appear for that child? I'm trying to find a solution without calc function ...how can I make it another way (might be it is possible with height: 100%)?
The amount of content in child can be different so I need overflowY only if content exceeds screen size. In the code example below I need blue container take full height and scrollY because there's lot of content.
Here's codesandbox: https://codesandbox.io/s/modest-leakey-bk75j8?file=/src/App.js
export default function App() {
return (
<div
style={{
display: "flex",
gap: "20px",
background: "pink",
minHeight: "100vh"
}}
>
<div
style={{
flex: 1,
background: "green"
}}
>
Container 1
</div>
<div
style={{
flex: 1,
background: "lightblue",
height: "500px",
overflow: "auto"
}}
>
<p>{TEXT}</p>
<p>{TEXT}</p>
<p>{TEXT}</p>
</div>
</div>
);
}
I believe you just need to change one line in light blue box's style to achieve what you have described. Just change the maxHeight to maxHeight: "100vh".
Then it becomes:
<div
style={{
flex: 1,
background: "lightblue",
maxHeight: "100vh",
overflow: "auto"
}}
>
You can just remove the height attribute from your blue box. You can also remove overflow and still have the described effect.
Here's a sandbox exemple: https://codesandbox.io/s/elegant-jang-3k0pq4?file=/src/App.js
I am trying to add some small .png icons in a horizontal row in a main container. I am struggling to figure out the easiest way to go about doing this
Here is a code sandbox of what I have created so far
https://codesandbox.io/s/broken-dew-76c4rf
I have been struggling with this for a while now and I cannot seem to get it. I have tried creating a div, inserting tags in the div but I don't think this is correct. Any help is greatly appreciated!
Do like this
First import the img_path at the top
import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";
Then define a div with style flex flex-direction:row like this
<div className="img-container">
<div className="img">
<img src={imgurl1} alt="aws" />
</div>
<div className="img2">
<img src={imgurl2} alt="c" />
</div>
<div className="img3">
<img src={imgurl3} alt="java" />
</div>
</div>
and style like this
.img-container {
display: flex ;
flex-direction: row ;
}
.img1, .img2 ,.img3 {
/* any style for the images */
background-color: black;
}
Just set the style from the div with the images to display: 'flex', flex-direction: 'row'
I have four buttons with varying content lengths. I want all buttons to have the same dimensions as the largest button. They should all be displayed in a single row if there is sufficient space otherwise each button should be displayed on a new row. I have attached a diagram below.
My HTML code is
<div class="answers">
<button class="button">A</button><br>
<button class="button">B</button><br>
<button class="button">C</button><br>
<button class="button">D</button><br>
</div>
I have given the following CSS properties to the container
.answers {
display: inline-flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
}
This ensures that all the buttons are the same width but it always displays them on four lines even when there is room to have them all on a single row.
TLDR:
I need a way to make sure all the buttons have the same width as the largest button, I do not know this value as the buttons can be updated with new content.
I then need to calculate if these four buttons can fit horizontally on the screen and if not display them vertically avoiding a situation where I might have a grid of 2x2.
One approach can be like this (you can use jquery to calculate width for all buttons according to the text in the largest button)
let maxWidth = 0;
$('.button').each(function(){
const width = parseFloat($(this).css('width'));
if(width > maxWidth) {maxWidth = width}
})
$('.button').css('width', maxWidth +'px');
.answers {
display: inline-flex;
justify-content: center;
table-layout: fixed;
flex-direction: row;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="answers">
<button class="button">small</button><br>
<button class="button">s</button><br>
<button class="button">large</button><br>
<button class="button">the largest</button><br>
</div>
So, I am making a widget component in react, and I need to add an icon that needs to be centered. I have this code:
<div className={classes.textCenter}>
<i className={"fas fa-lungs fa-2x"} />
</div>
But I get this:
See that the enclosing element (the i tag) is centered, but the icon is bigger.
I also have the following jss code:
"& .fab,& .fas,& .far,& .fal,& .material-icons": {
position: "relative",
display: "inline-block",
top: "0",
verticalAlign: "middle",
textAlign: "center"
},
but that doesn't appear to be making any difference.
Thanks in advance.
Please try this for the parent div -:
.textCenter{
display: flex;
justify-content: center;
align-items: center;
}
Also please remove any existing icon classes.
I've implemented a kanban board with react-beautiful-dnd. It works the way I want.
I would like to be able to use this board inside a div container that has overflow: hidden. However, doing so prevents from dragging Cards in columns that are outside of the viewport, the screen does not scroll horizontally to the right anymore.
I'm simplifying the issue, the reason I need this is because I'm using a Layout component which content component is a div with overflow: hidden.
Here is a codesandbox that demo the issue
Basically, this works, I can drag-drop Card to the right and it will scroll horizontally :
<div style={{ overflow: 'unset}} >
<Kanban />
<div>
This does not:
<div style={{ overflow: 'hidden }} >
<Kanban />
<div>
Maybe there is a way to reset the first div as such?:
<div style={{ overflow: 'hidden }} >
<div style={{ }}> // something here to reset container div?
<Kanban />
</div>
<div>