Right-align from overflow text instead of its parent.
Here's my sample code:
https://stackblitz.com/edit/react-jjno6n
Further analysis, your CSS has an issue,
Change your CSS like the below
.CheckoutSteps {
/* display: inline-flex; */
/* align-items: center; */
align-items: flex-start;
display: flex;
justify-content: center;
}
Output
I would strongly recommend you to read this article
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
I've created a hack for now LOL!
componentDidMount() {
this.checkMargin();
}
checkMargin() {
setTimeout(() => {
const paddingRight =
(document.querySelector(
".CheckoutSteps .Step:last-child .StepLabel span"
).clientWidth - 40) / 2;
document.querySelector(
".CheckoutSteps"
).style.paddingRight = `${paddingRight}px`;
}, 200);
}
Is this what you want to achieve my friend? The problem is that the container has a fixed size, I don't know if that is a requirement or just making the circle "circle".
https://stackblitz.com/edit/react-le2wxp
Related
Hy everyone.
I'm facing an issue that makes me lose my mind.
On iOS 15 or 16, Safari, with the setting "Single tab" enabled (meaning you have the Safari searchbar on top), when I focus my input, a weird padding animation gets triggered.
Here is my code, the most simplified possible.
The stack:
react
scss
export const SearchBusinessPage = ({whatInputContent, onWhatChange}) => {
return (
<div className={classes({ inputContainer: true })}>
<input
autoComplete={'off'}
className={classes({
input: true
})}
type='text'
value={whatInputContent || ''}
onChange={e => onWhatChange(e?.currentTarget?.value || '')}
/>
</div>
);
}
and the CSS
.inputContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
height: 100vh;
width: 100%;
}
.input {
flex: 1;
color: var(--grey-700);
font: var(--regular) var(--body-3);
&::placeholder {
color: var(--grey-500);
opacity: 1;
}
&:focus {
&::placeholder {
opacity: 0.5;
}
}
}
As you can see, nothing crazy in my code.
But I can't get rid of that iOS behavior that, on input focus, wants to add a padding top or I don't know what. I tried many thing but couldn't find what can I do. Any idea around here ?
Well, if anyone has the same trouble, the solution I found was, actually, pretty straight forward. You can use this CSS pretty high in the DOM. The solution comes with unintended side effects, but it works anyway.
That blocks Safari UI from moving. So, no UI move, no problem 🤷
height: 100%;
max-height: 100%;
min-height: 100%;
width: 100%;
position: absolute;
overflow: scroll;
I'm trying to style my react frontend for a project, and want the Form and Display components to be next to each other in a flex container. It works when I do an inline style as below, but has no effect when I use the App.css file. Could somebody explain this to me? Here is the project: https://github.com/GeorgeCGarman/tip-calculator-react
<div className="container" style={{ display: "flex" }}>
<Form />
<Display />
</div>
Your CSS syntax in App.css is incorrect, but you're on the right track.
Instead of:
.selectTip {
display: "flex";
flex-direction: "column";
}
.container {
display: "flex";
}
.Form {
display: "flex";
}
You need to remove the quote marks:
.selectTip {
display: flex;
flex-direction: column;
}
.container {
display: flex;
}
.Form {
display: flex;
}
CSS uses keywords, meaning they do not require quotes, but in React, it must be given as a string (or for things like padding, it may be given as a number)
CSS can be a minefield, so make sure you check out some kind of tutorial
I have a dropdown with span elements on desktop. I use CSS Flexbox to re-arrange order of the elements:
.parent {
display: flex;
flex-direction: column;
}
.child {
order: 0;
}
.child.disabled {
order: 1;
}
This works well - but on iOS the re-arrange doesnt work. Is it possible to target this as well, or does it needs to be done server-side?
Is there a short hand method in CSS to combine
display:flex;
flex-direction: row / column?
into one line instead of two?
I know flex-flow, does flex-direction and flex wrap.
I don't know if you are versed in Sass, however if you are, this is a quick way on how to make your idea work, you could also polish this further whith #if statements and #error directives, but here's the quick and easy way:
Here's a Codepen to demonstrate.
The mixin:
#mixin fd($flex, $direction) {
display: $flex;
flex-direction: $direction;
}
This is how you include it:
#include fd([display], [direction]);
.flex-1 {
#include fd(flex, row);
// whatever goes next
}
.flex-2 {
#include fd(inline-flex, column);
// whatever goes next
}
This is what it compiles to:
.flex-1 {
display: flex;
flex-direction: row;
}
.flex-2 {
display: inline-flex;
flex-direction: column;
}
I am using Wolox's chat widget
https://github.com/Wolox/react-chat-widget
And I am trying to make a horizontal row of multiple chat widgets along the bottom of the screen. I am trying to override the class .rcw-widget-container
.rcw-widget-container {
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 20px 20px 0;
max-width: 370px;
position: fixed;
right: 0;
z-index: 1;
}
I have two chat Widget's that I want to put side by side, but I want to do it inline with React. Because my number of widgets will grow depending on how many user chats I open. So the right positioning needs to be dynamic. I just don't know how to accomplish this. Or if it's possible
https://codesandbox.io/s/vvnjyr9r30
EDIT
Something like this may work, but I don't think I am getting the syntax right.
.chat1 .rcw-widget-container {
right: 350px;
}
.chat2 .rcw-widget-container {
right: 400px;
}
Component
<Widget className="chat1" handleNewUserMessage={(e) => this.handleNewUserMessage(e, new Date().getTime())} />
<Widget className="chat2" handleNewUserMessage={(e) => this.handleNewUserMessage(e, new Date().getTime())} />
as I can understand probably you are looking for something like this:
In this case you can try:
.App {
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: row;
}
.rcw-widget-container {
border: 2px red solid;
position: initial;
}
Also, try to reorder the imports in index.js to override the styles.
import "react-chat-widget/lib/styles.css";
import "./styles.css";
While not inherently possible in CSS modules alone, the author of the react-toolbox library has actually solved this particular problem very nicely
Read their github docs which are more in depth on the subject at https://github.com/react-toolbox/react-toolbox#customizing-components
A list of the themeable classes for a particular component is given on the component demo page on their site too