Wrap the Content inside the Input Value - html

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;
}
`

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>

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>

Related

How do I change text direction

I am making a word counter but the text is not in the left. How can I make it to the left?
let area = document.getElementById('area');
let char = document.getElementById('char');
let word = document.getElementById('word');
area.addEventListener('input', function() {
// count characters
let content = this.value;
char.textContent = content.length;
// remove empty spaces from start and end
content.trim();
console.log(content);
let wordList = content.split(/\s/);
// Remove spaces from between words
let words = wordList.filter(function(element) {
return element != "";
});
// count words
word.textContent = words.length;
});
* {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h1 {
font-size: 25px;
}
.container h3 {
font-size: 20px;
}
.heading {
border: 2px dashed green;
padding: 5px;
font-weight: 700;
text-align: center;
width: 400px;
}
#area {
height: 200px;
width: 400px;
resize: none;
font-size: 15px;
font-weight: 700;
padding: 5px;
margin-top: 15px;
color: green;
outline: none;
border: 2px dashed green;
}
#area:focus {
border: 2px dashed blue;
outline: none;
}
.result {
color: green;
font-size: 20px;
width: 401px;
text-align: center;
font-weight: 200;
padding: 5px;
border: 2px dashed green;
margin-top: 10px;
}
#word,
#char {
font-size: 25px;
text-decoration: none;
}
<div class="container">
<div class="heading">
<h1 style="color:green">Word counter</h1>
<h2>Delete everything first!</h2>
<h3><b>Word and Character count<b></h3>
</div>
<textarea id="area"
placeholder="Enter your Text Here">
</textarea>
<p class="result">
<span id="word">0</span> Words and
<span id="char">0</span> Characters
</p>
I tried changing the center to left but it gave weird results like the boxes being to the left of the page, the text being to the left but not centered. So again, how can I make it so that the text inside the middle box is on the left and not in a weird spot
If you mean in your textarea, it is because you have spaces between your textarea tags
Try this : <textarea id="area" placeholder="Enter your Text Here"></textarea>
That's why your placeholder wouldn't show too.
You can use dir="rtl" on text area
<textarea dir="rtl"></textarea>
<element dir="ltr|rtl|auto">
ltr - Left-to-right text direction
rtl - Right-to-left text

How to make same-size cards that display varying amounts of text without overflow?

Currently I have a container that defines the boundary for a set of cards:
.cards-container {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
border: 5px solid violet;
}
.card {
margin: 10px;
transition: all 0.4s;
width: 25em;
/* height: 25em; */
border: 5px solid black;
}
In the react code I display them on the page like:
<div className={classes['cards-container']}>
{
articlesData.length > 0 ?
articlesData.map( (article) =>
<div key={article.id} className={classes.card}>
<Card
itle={article.title}
body={article.abstract}
/>
</div>
) :
null
}
</div>
The Card component has the following css:
.mycard {
background-color: white;
display: block;
padding: 1rem;
border-radius: .25rem;
/* box-shadow: 0 2px 8px 0 rgba(0,0,0,0.9); */
border: 5px solid red;
}
.mycard-body {
font-size: 0.7rem;
}
.mycard-header {
/* font-size: 1.5rem; */
font-size: 1rem;
margin-bottom: .5rem;
}
.mycard-footer {
margin-top: 1rem;
}
Finally, here's how the card is defined:
const Card = (props) => {
const mainText = props.body.slice(0,300);
const [textBody, setTextBody] = useState(mainText + '...');
const onSeeMore = () => {
setTextBody(props.body);
}
return <>
<div className={classes.mycard}>
<div className={classes['mycard-header']}>
{props.title}
</div>
<div className={classes['mycard-body']}>
{textBody}
</div>
<div className={classes['mycard-footer']}>
<button type='button' onClick={onSeeMore}>See More.</button>
</div>
</div>
</>
};
The text that populates these cards on the main page is dynamic, so sometimes the full box assigned to a card doesn't filled and looks like the following:
I need the bounding blax box because I have blurring and other transitions when hovering on a card. How can I make it so that the cards are the same size but with varying amounts of content?
Thank you for the help.
Apply your transitions, background-color: white, etc. to the .card elements, not to the .mycard. They will be the same height.
Example: https://codepen.io/zkla/pen/vYaymWo
Not sure if anyone else will have this issue but I found a solution:
From the parent class, I know pass the background color of the card with prop color. And in the Card component I overwrite the styling, see below:
In parent class,
const cardColor = 'white'
<Card
title={article.title}
body={article.abstract}
color={cardColor}
/>
In Card.js:
<div className={classes.mycard} style={{'backgroundColor': props.color}}>
I constrained the text in the header and body ('mycard-header','mycard-body') to some n number of lines via the below CSS:
.mycard-header {
font-size: 1rem;
margin-bottom: .5rem;
line-height: 1rem;
width: 100%;
height: 2.2rem;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
}
.mycard-body {
font-size: 0.7rem;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
}

Label element width till the end

I have searched for it. But unable to solve my problem.
I want the label element to grow till the end of the parent element so that when I get more space to select the radio. When I add display: inline-block; and width: 100%;, it goes in the next line.
.q-option{
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
cursor: pointer;
background-color: red;
}
.q-option:hover{
}
label{
display: inline-block;
/* width: 100%; */
background-color: blue;
}
<div class="q-option">
<input type="radio" class="q-check" name="option" value="1" id="opt1">
<label for="opt1">Preprocessor Home Page</label>
</div>
You can use display: flex on the parent and simply ensure that your label grows and shrink as necessary to fill up the remaining space.
You can optionally add a gap property to ensure there is sufficient negative whitespace between the actual radio button and the label itself:
.q-option {
/* Use flexbox on parent */
display: flex;
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
cursor: pointer;
background-color: red;
/* Optional */
gap: 8px;
}
.q-option:hover {}
label {
display: block;
background-color: blue;
/* Ensure label takes up remaining width */
flex: 1 1 auto;
}
<div class="q-option">
<input type="radio" class="q-check" name="option" value="1" id="opt1">
<label for="opt1">Preprocessor Home Page</label>
</div>
Even better: wrap your <input> with <label> directly
However, what I'd suggest is you make the entire radio button wrapped by the label element: in that way you do not have to provide an id and for attribute:
.q-option {
/* Use flexbox on parent */
display: flex;
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
background-color: red;
/* Optional */
gap: 8px;
}
.q-option:hover {}
input + span {
display: block;
background-color: blue;
/* Ensure label takes up remaining width */
flex: 1 1 auto;
}
<label class="q-option">
<input type="radio" class="q-check" name="option" value="1">
<span>Preprocessor Home Page</span>
</label>
maybe this could be a solution with flex:
.q-option{
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
cursor: pointer;
background-color: red;
display: flex;
}
label{
background-color: blue;
flex: 1 0 auto;
}

Form border creates space around inner elements

I'm trying to create a simple bordered form that has a button and input of type="text" inside of it.
There is this spacing that appears that I cannot remove.
main {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
main form {
display: flex;
border: 2px solid green;
}
main form .btndep {
display: block;
padding: 10px;
background: green;
border: 0;
box-shadow: none;
outline: none;
}
main form input {
border: 0;
outline: none;
box-shadow: none;
text-align: right;
padding-left: 5px;
padding-right: 5px;
}
<main>
<form class="deposit">
<button class="btndep">Deposit</button>
<input type="text" placeholder="0.00€">
</form>
</main>
there is a way around it; it seems... outline instead of border

How can I keep an image from overflowing its container?

I'm working with Reactjs in a page... like a diary.
At the end of the page, there is an img that I'm trying to set inside the page but because of the size, it goes out of the page... I try to modify it with Css, but still not working. Can you help me please?
This is how the page looks:
This is how the html code looks:
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
This is how I set the css:
.notes__main-content{
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar{
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content{
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input, .notes__textarea{
border: none;
&:focus{
outline: none;
}
}
.notes__title-input{
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea{
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image{
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
To be clear, what I want to do is to set the img to 150px so it can fit my page. Thank you for your help
You can add another div inside notes__image div. Lets call it notes__image__inner with a div wrapper.
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<div className="notes__inner__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
</div>
Update the notes__image and img CSS with this:
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
position: relative;
}
.notes__inner__image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.notes__inner__image img {
width: 100%;
position: static;
height: 100%;
object-fit: cover;
}
Images don't magically shrink to fit their containers. You need to tell them to do so:
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
You don't want to use the width property as that'll stretch images beyond their native size, and you don't want to set height as that will goof up aspect ratio.
Here I've converted className to class for demonstration purposes. If you view the fullscreen demo and shrink the window size you can see it in action.
.notes__main-content {
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar {
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input,
.notes__textarea {
border: none;
&:focus {
outline: none;
}
}
.notes__title-input {
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea {
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
<div class="notes__content">
<input type="text" placeholder="Somer awesome title" class="notes__title-input" autoComplete="off" />
<textarea placeholder="What happened today?" class="notes__textarea"></textarea>
<div class="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen" />
</div>
</div>
The className property is used in React. Is this a React application? If not, it needs to be revised to "class".
Also make sure your image does not overflow the bounds of the div. You can set strict width and height in the image by using the img tag's "width" and "height" properties. Or create a notes__image img declaration, like this:
.notes__image img {
width: 100%;
height: 100%;
}