CODEWITHSUNDEEP
html
nevoni3008
nevoni3008

Reputation: 447

Wrap the Content inside the Input Value

Is there any way to wrap the content with the input field, in my case is taking a size, but I would like for example if it is the value "123" for the input to be wrapped around the text, and when we type more words it grows in size, without having a fixed size like this in the screenshot.

Screenshot of the Input Text Field 1

My Component structure JSX:

 <Container {...props}>
    <Input placeholder="New Skill" />
    <AddIcon color="#0056FC" />
 </Container>

Here is CSS, using Styled Components:

const Container = styled.section`
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 7px 10px;
    gap: 10px;
    background: transparent;
    border-radius: 4px;
    border: 1px solid ${props => props.theme.border};
`

const Input = styled.input`
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #455560;
    border: 0;
    background: transparent;
    display: flex;

    &::placeholder{
        color: #0056FC;
    }
`

Upvotes: 1

Views: 271

Answers (2)

Thearcane
Thearcane

Reputation: 69

I think now that must work.

span {
  padding: 5px;
}
     
div {
  display: flex;
  width: max-content;
}
<div>
  <span>Input Field :</span>
  <input type="text" oninput="this.size = this.value.length + 1"  size="1">
</div>

Upvotes: 1

Diego D
Diego D

Reputation: 8160

You've already got the right answer, I just wanted to show the contenteditable strategy to achieve the same result:

.content {
  display: flex;
}

#field {
  min-width: 3rem;   /*3 chars min length*/   
  border: 3px solid gray;
  cursor: text;  
  padding: 5px;
}
<div class="content">  
  <h1 contentEditable="true" id="field"></h1>
</div>

Upvotes: 1

Related Questions