Issue
I have created a input field and a button but i want to put that button insiade that input field. I have done it by using position:absolute
but the problem is its not working properly in medium or large screen. Any kind of help would be highly appreciated. Here is my code
HTML CODE
<div>
<div style="float: left;width: 82%">
<input type="text" class="sent-message-text">
<img src="../img/camera.png" class="post-image-uploaad">
</div>
<div style="float: right">
<button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad" style="margin-right: 15px;"></button>
</div>
</div>
</div>
CSS CODE
.fixed-bottom2 {
box-shadow: inset 0px 4px 5px #ededed;
padding: 9px;
margin:-20px !important
}
.sent-message-text {
border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border: 1px solid #1486ab66 !important;
border-radius: 4px;
width: 92%;
}
.post-image-uploaad {
width: auto;
height: 22px;
margin-top: 8px;
}
.no-button-design {
padding: 0px;
border: 0px;
background-color: transparent;
margin: 0px;
}
.no-button-design img {
height: 34px;
}
In small screen its perfectly fine
But in large screen it's coming out from the input field
Solution
use this code
css:-
.fixed-bottom2 {
box-shadow: inset 0px 4px 5px #ededed;
padding: 9px;
margin: -20px !important
}
.sent-message-text {
border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border-radius: 4px;
width: 100%;
position: relative;
}
.post-image-uploaad {
position: relative;
width: auto;
height: 22px;
margin: -39px -3px 1px 1px;
float: right;
}
.no-button-design {
padding: 0px;
border: 0px;
background-color: transparent;
margin: 19px 35px;
}
.no-button-design img {
height: 34px;
}
html:-
<div>
<div style="float: left;width: 82%">
<input type="text" class="sent-message-text">
<img src="../img/camera.png" class="post-image-uploaad">
</div>
<div>
<button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad_send" style="margin-right: 15px;"></button>
</div>
</div>
</div>
Answered By - Bal mukund kumar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.