I need to overlap the left part of the Input using styled-components in React. He will be able to write only after the overlap, on the right part.
Codesandbox is here CLICK HERE
Just like this image below:
const TextInput = styled.input`
font-size: 16px;
padding: 10px 10px 10px 10px;
display: block;
border: 2px solid #e3e5e5;
border-radius: 8px;
height: 28px;
width: 100%;
&:focus {
outline: none;
}
`;
I would push the border styling and layout to the Wrapper component. Add a styled label component.
Code
const Wrapper = styled.div`
width: 100%;
position: relative;
margin-bottom: 1rem;
display: flex;
flex-direction: row;
border: 2px solid #e3e5e5;
border-radius: 8px;
overflow: hidden;
`;
const InputLabel = styled.label`
background-color: #e3e5e5;
color: gray;
display: flex;
flex-direction: column;
font-size: 16px;
height: 28px;
justify-content: center;
padding: 10px;
width: auto; // <-- can set to specific width for consistency
`;
const TextInput = styled.input`
border-width: 0;
flex: 1;
font-size: 16px;
height: 28px;
padding: 10px;
outline: none;
`;
const TextError = styled.span`
display: block;
font-size: 12px;
color: #ff0000;
line-height: 14px;
font-weight: bold;
margin-top: 11px;
`;
const Input = ({
label,
name,
type = "text",
value = "",
handleChange = () => {},
error = null,
touched = false
}) => {
return (
<div>
<Wrapper>
<InputLabel htmlFor={name}>{label}</InputLabel>
<TextInput
id={name}
name={name}
type={type}
value={value}
onChange={handleChange}
/>
</Wrapper>
{error && touched && <TextError>{error}</TextError>}
</div>
);
};
I tried to recreate same way as in the picture above. For the solution i added extra class to the Wrapper. Does this approach solve your problem? example
const Overlap = styled.span`
width: min-content;
display: flex;
align-items: center;
padding: 0px 60px 0 20px;
border-radius: 8px 0 0 8px;
background-color: hsl(0, 0%, 90%);
color: hsl(195, 2%, 68%);
font-size: 1.2em;
white-space: nowrap;
`;
hej there.
i created an svg from a complex image, showing a city map. including tiny green boxes to mark certain houses, etc. with A,B,C or other. (can be seen in screenshot)
on mouseover, a div box should appear (with more than a tooltip-line - as shown in the screenshot and by code) - positioned within the viewbox and next to the pointer.
alternatively it could be an overlay - centered within the viewbox - that disappears when moving the pointer away from the anker.
i was not able to achieve this with plain css, working with combined #C .mark #markc (for example) and visibility.
SVG-'box':
<g id="C">
<rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
<g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
</g>
DIV to appear:
<div class="mark" id="markc">
<div class="thead">
<div class="pin">C</div> <div class="label">culpepper crescent</div>
</div>
<div class="tdetail">
<p class="descrp">Bewohner</p>
<p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
</div>
</div>
CSS code:
#karte {
width: 90%;
position: relative;
margin: auto;
margin-top: 70px;
border: #fff solid 10px;
outline: #ceccc4 solid 1px;
}
.mark {
width: 250px;
min-height: 100px;
position: relative;
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
line-height: 110%;
font-weight: normal;
z-index: 1;
border: 10px solid #fff;
}
.thead {
display: inline-flex;
background-position-y: bottom;
font-family: Roboto Slab;
letter-spacing: .5px;
text-transform: uppercase;
}
.pin {
background-color: #4e9295;
width: 10%;
text-align: center;
font-size: 15px;
color: #fff;
padding: 8px;
}
.label {
background-color: #D6EBEC;
width: 90%;
font-size: 12px;
text-align: left;
padding: 8px;
}
.tdetail {
background: #E9E9E9;
color: #4d4e52;
font-family: calibri;
min-height: 75px;
text-align: left;
padding: 0px 10px 10px 10px;
border-top: 8px solid #fff;
}
.tdetail .descrp {
color: #4d4e52;
text-transform: uppercase;
margin-bottom: -10px;
font-weight: 600;
font-size: 15px;
}
.tdetail .peops {
font-weight: 300;
font-size: 12px;
padding: 8px;
}
it is supposed to be a 'present'. i have nearly no experience with javascript - i am happy to use it as a solution, but might need a 'clear' instruction. it is up to 25 'pins' on the complete map.
many thanks!
screenshot
Here's a very simple example implementation to get you started.
You'll need to do a little more work to make it work with more than one tooltip. Not also that it assumes your map is at 1:1. If your SVG has a viewBox or is otherwise scaled, you need to do some work to get the correct coordinates to show the tooltip at. You can find out how to do that by searching Stack Overflow.
var C = document.getElementById("C");
// Add an event handler to C that fires when the mouse moves over it
C.addEventListener("mousemove", function(evt) {
let markc = document.getElementById("markc");
// Position the tooltip element near the mouse
markc.style.left = (evt.offsetX + 10) + "px";
markc.style.top = evt.offsetY + "px";
// Show the tooltip element
markc.classList.remove("hidden");
});
// Add an event handler to C that fires when the mouse leaves the element
C.addEventListener("mouseout", function(evt) {
hideElement("markc");
});
// Hide the element with given id
function hideElement(id) {
document.getElementById(id).classList.add("hidden");
}
// Start out with the tooltip hidden
hideElement("markc");
#karte {
width: 90%;
position: relative;
margin: auto;
margin-top: 70px;
border: #fff solid 10px;
outline: #ceccc4 solid 1px;
}
.mark {
width: 250px;
min-height: 100px;
position: absolute; /* changed to absolute so we can position it where we want */
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
line-height: 110%;
font-weight: normal;
z-index: 1;
border: 10px solid #fff;
}
.thead {
display: inline-flex;
background-position-y: bottom;
font-family: Roboto Slab;
letter-spacing: .5px;
text-transform: uppercase;
}
.pin {
background-color: #4e9295;
width: 10%;
text-align: center;
font-size: 15px;
color: #fff;
padding: 8px;
}
.label {
background-color: #D6EBEC;
width: 90%;
font-size: 12px;
text-align: left;
padding: 8px;
}
.tdetail {
background: #E9E9E9;
color: #4d4e52;
font-family: calibri;
min-height: 75px;
text-align: left;
padding: 0px 10px 10px 10px;
border-top: 8px solid #fff;
}
.tdetail .descrp {
color: #4d4e52;
text-transform: uppercase;
margin-bottom: -10px;
font-weight: 600;
font-size: 15px;
}
.tdetail .peops {
font-weight: 300;
font-size: 12px;
padding: 8px;
}
.cls-245 {
fill: green;
}
.cls-6 {
fill: white;
}
/* Needs to be position relative so we can later position the tooltip relative to it. */
.container {
position: relative;
}
/* class used to hide the tooltip when we don't want it showing */
.hidden {
display: none;
}
<div class="container">
<svg width="400" height="700">
<g id="C">
<rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
<g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
</g>
</svg>
<div class="mark" id="markc">
<div class="thead">
<div class="pin">C</div>
<div class="label">culpepper crescent</div>
</div>
<div class="tdetail">
<p class="descrp">Bewohner</p>
<p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
</div>
</div>
</div>
How to get the text wrapped under the points?
https://codepen.io/neginbasiri/pen/ZEGReRZ
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3
pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt">
Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13">
<span>3</span></sup> </span></p></div>
In the example switch should show under 16,000.
.bUhvVh {
display: flex;
margin-bottom: 20px;
width: 300px;
}
.iBQvHK {
color: #e40000;
font-size: 24px;
margin-right: 10px;
border: 1px solid red;
width: 20px;
}
.icon--icon--base--17 {
height: 1em;
min-width: 1em;
vertical-align: middle;
fill: currentColor;
}
.cPwDGx {
font-family: Ciutadella Regular;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
.enMiay {
float: left;
font-family: Ciutadella Medium;
margin-right: 4px;
position: relative;
color: #323232;
}
.dufgDt {
margin: 0;
font-family: 'Ciutadella Regular',sans-serif;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3 pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt"> Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13"><span>3</span></sup> </span></p></div>
</div>
Remove display: flex; flex: 1 from .cPwDGx.
Remove display: inline-block from .enMiay and add float: left for this element.
Update width to min-width for icon--icon--base--17. It will not shrink if text is larger.
Refer : https://codepen.io/bala_tamizh/pen/WNvyEPg
I am having a container which takes in the amount and the currency. As the amount gets bigger and reaches near to the right padding (i.e., 16px), the font size should be reducing. At the same time the top padding of the currency should also change.
https://jsfiddle.net/jmjjeena/uzsL7n0c/
//////////////// REACT /////////////////
class FontSize extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<div className='container'>
<div className='subContainer'>
<div className='amount'>$1000000000.00</div>
<div className='currency'>USD</div>
</div>
</div>
)
}
}
ReactDOM.render(<FontSize />, document.querySelector("#app"))
//////////////// CSS /////////////////
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#app {
background: white;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.container {
background-color: white;
box-sizing: border-box;
border: 1px solid red;
border-radius: 5px;
width: 316px;
height: 81px;
}
.subContainer {
display: flex;
flex-direction: row;
padding: 16px 16px 12px 28px;
}
.amount {
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 40px;
color: black;
padding-right: 8px;
}
.currency {
padding-top: 17px;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 18px;
color: black;
}
You can make the css dynamics, e.g. something like this:
<div style={fontStyle(1)} />
fontStyle= function(fontSze) {
return {
font-size:fontSze
}
}
You will need to add the logic based on the amount changing. You can update the variable via props and put the logic to update it within the componentDidMount()
I have this CSS styles which I want to change to styled-components in react:
.movie-page .movie-details {
display: flex;
flex-direction: column;
max-width: 800px;
margin: 20px auto 60px auto;
}
.movie-page .movie-details h1 {
line-height: 1.5em;
}
.movie-page .movie-details h1 span {
font-size: inherit;
font-weight: normal;
padding-left: 1rem;
color: #bbb;
line-height: inherit;
}
I'm a bit confused how does the tags nesting work. I'm doing this with styled-components:
const MovieDetails = styled.div`
display: flex;
flex-direction: column;
max-width: 800px;
margin: 20px auto 60px auto;
h1 {
line-height: 1.5em;
}
h1 span {
font-size: inherit;
font-weight: normal;
padding-left: 1rem;
color: #bbb;
line-height: inherit;
}
`;
Does this code seem to be ok? My h1 tag looks like p tag
You should be able to select like that. Bt you can also do like the following which will look neater:
const MovieDetailsHeader = styled.h1 `
line-height: 1.5em;
span {
font-size: inherit;
font-weight: normal;
padding-left: 1rem;
color: #bbb;
line-height: inherit;
}
`