Issue
I have a input with icon like Chat GPT search input After some lines it's icon goes up I want fix it's in same position. this is my code. I want where it shows first if I add more lines same show its position and go to bottom side. if anyone is interested please give me good Answer. Thanks in Advance!
html of the input
<div class="chat-input-container">
<div class="input-container" ng-class="{'scrollable': shouldShowScroll()}">
<div contenteditable="true" class="input-field" ng-model="setSearchInputValue"
ng-keypress="onKeyPress($event)"></div>
<md-button class="md-icon-button" ng-disabled="setSearchInputValue.trim().length === 0">
<md-icon md-font-icon="material-icons"
ng-disabled="setSearchInputValue.trim().length === 0">send</md-icon>
</md-button>
</div>
js of the input
$scope.shouldShowScroll = function () {
var inputField = document.querySelector('.input-field');
var lineHeight = parseInt(window.getComputedStyle(inputField).getPropertyValue('line-height'));
var maxLines = 8;
return inputField.scrollHeight > lineHeight * maxLines;
};
css of the input
#input {
word-wrap: break-word;
}
.bg-yellow {
background-color: lightyellow;
}
.bg-green {
background-color: #eafef6;
}
.chat-input-container {
position: relative;
display: flex;
align-items: center;
border: 1px solid #ddd;
padding: 5px;
bottom: 0;
width: 40%;
z-index: 1;
border-radius: 10px;
margin-left: 450px;
/* remove margin to use any where*/
margin-top: 50px;
}
.input-container {
flex: 1;
overflow-y: hidden;
max-height: 300px;
position: relative;
text-transform: capitalize;
display: flex;
align-items: flex-start;
/* Align items to the start of the flex container */
flex-wrap: nowrap;
}
.scrollable {
overflow-y: auto;
}
.input-field {
min-height: 25px;
height: auto;
border: none;
outline: none;
padding: 5px 5px 10px 5px;
font-size: 16px;
resize: none;
width: 90%;
line-height: 20px;
white-space: webkit-nowrap;
word-wrap: break-word;
text-transform: capitalize;
flex: 1;
}
md-button {
bottom: 0;
min-width: 40px;
background-color: #0078D7;
color: #fff;
margin-left: 6px;
align-self: flex-end;
}
md-button md-icon {
font-size: 24px;
}
md-button:hover {
background-color: #005A9E;
}
.md-button.md-icon-button {
margin: 0 6px;
height: 40px;
min-width: 0;
line-height: 24px;
padding: 8px;
width: 40px;
border-radius: 50%;
margin-left: 6px;
align-self: flex-end;
}
Solution
you should have to try this one
textarea{
overflow: hidden;
outline: none;
}
.form-group {
position: relative;
width: 400px; /* Adjust the width as needed */
}
#input {
height: 100px;
width: 100%; /* Use 100% to fill the parent div */
box-sizing: border-box; /* Include padding and border in the width calculation */
}
.icon-user {
position: absolute;
right: 9px;
top: 7px;
}
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css" rel="stylesheet"/>
<div class="form-group">
<textarea rows="4" cols="60" id="input" placeholder="متن ..."></textarea>
<span class="icon-user">
<icon md-font-icon="material-icons">icon</icon>
</span>
</div>
Answered By - user22548649
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.