CODEWITHSUNDEEP
javascripthtmlcss
SFDC-Beginner
SFDC-Beginner

Reputation: 147

Two different colors for input text

I have to achieve the output as like below image

enter image description here

Black color text is name and Orange color text is status. Depending on status it can change like Pending --> Orange, Completed-->Green. These things I can able to achieve by having one input tag and span tag inside a div which position is relative

<div style="display: inline-block;position: relative;overflow: hidden;width:100%">

                <input
                id="input"
                class={computedInputClass}
                type="text"
                role="textbox"
                required={required}
                autocomplete="off"
                value={computedInputValue}
                name={name}/>

                <span class={computedStatusClass} style={componentStyle}> - {inputStatus}</span>
</div>

The only problem what I am facing is placing the position of status text.

Depending on the length of name text the left of status text also has to be adjusted. I am doing left adjustment with this calculation but its not working

 get componentStyle() {  
       // this.computedInputValue = 'William Thomas';
        return `left:${this.computedInputValue.length-2}em`;
    }

If my approach is wrong please suggest me for good solution but for sure I have to use <input> tag and I cant remove that also as it is LWC component

Here is what I tried

HTML

<template>
  <div style="display: inline-block;position: relative;overflow: hidden;width:100%">
                <input
                id="input"
                class={computedInputClass}
                type="text"
                role="textbox"              
                autocomplete="off"
                value={computedInputValue}
               
            />
                <span class={computedStatusClass} style={componentStyle}> - {inputStatus}</span>
            </div>
</template>

JS

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {

    @track inputStatus='Pending';

     get computedInputValue() {
        return 'William ThomasS';
    }
     
    get componentStyle() {         
        return `left:${this.computedInputValue.length-2}em`;
    }

    get computedStatusClass()
    {
     return 'customizedDropdownInputStatusLeft customizedDropdownPendingStatusColor';     
    }

     get computedInputClass() {
       
        return'slds-input';
    }
}

CSS

.customizedDropdownInputStatusLeft{
    position: absolute;   
    top:8px
}
.customizedDropdownPendingStatusColor{
    color:orange;
}
.customizedDropdownStatusPadding{
    padding-left:5px;
}

Upvotes: 0

Views: 941

Answers (1)

Alex Mckay
Alex Mckay

Reputation: 3696

I believe you can achieve your desired result with the following code.

The key part is a hidden span element and a resizeUserInput function:

hiddenSpan.textContent = userInput.value - copy the input text into the hidden span element.

userInput.style.width = hiddenSpan.offsetWidth + px - get the width of the hidden element and apply it to the width of the user input.

Working example

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="src/styles.css" rel="stylesheet" />
  </head>
  <body>
        <div class="box">
    <p>
      <span class="hidden-span" id="hidden-span"></span>
            <input class='user-input' id="user-input" type="text" value="William Thomas" />
      <span> - </span>
      <span class="status">Pending</span>
        </p>
        <div>
    <script src="src/index.js"></script>
  </body>
</html>

CSS

body,
input {
  font-family: sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.box {
  border: 1px solid lightgrey;
  border-radius: 5px;
  display: flex;
  padding: 0 10px;
  margin: 10px;
  justify-content: space-between;
}

.hidden-span {
  position: absolute;
  height: 0;
  overflow: hidden;
  white-space: pre;
}

.user-input {
  border: none;
  min-width: 10px;
  outline: none;
}

.status {
  color: orange;
}

JS

const px = "px";

const hiddenSpan = document.getElementById("hidden-span");
const userInput = document.getElementById("user-input");

const resizeUserInput = () => {
  hiddenSpan.textContent = userInput.value;
  userInput.style.width = hiddenSpan.offsetWidth + px;
};

resizeUserInput() // run onload
userInput.addEventListener("input", resizeUserInput); // run on subsequent changes

Upvotes: 1

Related Questions