CODEWITHSUNDEEP
htmlcss
Akshay Shrivastav
Akshay Shrivastav

Reputation: 1237

how to prevent text overlapping the button through css

Please have a view at this image:

please have a view on this image

As from the image you can see that I have entered text in the input box but as I also have a button placed in that box so the text is getting hidden below the box.

Is there any way to prevent that, the button should also be on that place and the text should not hide instead it shoud be focused if further text is being typed.

Html code is:

<div class="form">
   <input type="text" placeholder="Subscribe & Get Notified" id="email_inp">
   <button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button>
</div>

The css code is:

@media only screen and (max-width: 768px)
{
input[type="text"]
    {
        font-family: "titillium_webregular", Arial, sans-serif;
        border: none;
        -webkit-border-radius: 3px 33px 33px 3px;
        border-radius: 10px 33px 33px 10px;
        color: rgba(85, 85, 85, 0.85);
        font-size: 1.1em;
        display: inline;
        padding: 19.7px 13px;
        background: #f5f5f5;
        outline: none;
        width: 93%;
        box-shadow: 0px 11px 34px #111;
        vertical-align: middle;
    }

.btn-1
    {
        cursor: pointer;
        padding: 29px 29px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        margin-left: -67px;
        text-indent: -9999px;
        margin-top: 1px;
        outline: none;
        width: 20px;
        height: 14px;
        border:none;
    }
}

Any helps appreciated. Thanks in advance.

Upvotes: 0

Views: 4034

Answers (5)

user2136053
user2136053

Reputation:

In this case all u need to do is add "padding-right: 50 px;" to the input text box class(50 is just a number u can increase or decrease that according to your need)

Upvotes: 0

szymonm
szymonm

Reputation: 1051

In my opinion, you should use your styling in a bit different way and use .form CSS selector too. You can use flexbox for example:

.form {
  // NEW:
  display: flex;
  justify-content: space-between;
  // Your old input CSS:
  -webkit-border-radius: 3px 33px 33px 3px;
  border-radius: 10px 33px 33px 10px;
  background: #f5f5f5;
  box-shadow: 0px 11px 34px #111;
  width: 93%;
}

input[type="text"] {
  // NEW:
  width: 100%;
  // Your old without unnecessary CSS:
  font-family: "titillium_webregular", Arial, sans-serif;
  color: rgba(85, 85, 85, 0.85);
  border: none;
  font-size: 1.1em;
  padding: 19.7px 13px;
  outline: none;
  vertical-align: middle;
}

.btn-1 {
  // NEW
  align-self: flex-end;
  // Your old without unnecessary CSS:
  cursor: pointer;
  padding: 29px 29px;
  text-indent: -9999px;
  margin-top: 1px;
  outline: none;
  width: 20px;
  height: 14px;
  border:none;
}

Add webkit CSS properties in case you need support in older browsers.

Upvotes: 1

Tak&#225;cs Botond
Tak&#225;cs Botond

Reputation: 136

Just add this:

input[type="text"]
{
    padding-right:5%;
}

Upvotes: 0

Sharmila
Sharmila

Reputation: 795

Try this.. You can see a space right to the textbox. I have added padding right to the textbox

$(function(){
  $('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
});
#tbcss
   {
    padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="tbcss"/>

Upvotes: 1

giotiskl
giotiskl

Reputation: 531

If you wish to prevent the image from hiding the text, then all you need to do is increase the padding-right property on the input textfield.

Maybe try a value of 40px or even more until you're satisfied with the result, then the caret should never go below the button.

Upvotes: 0

Related Questions