How to fix the input text cursor in the middle

Asked

Viewed 152 times

-1

I’m having a problem where I have a modified input text and when I type it starts in the middle, and I want to leave it on the left.

I tried to use text-align: left; of a topic I saw here on stackoverflow but it still didn’t work. 

* {
  margin: 0px;
  padding: 0px;
}

.Discord {
  width: 700px;
  height: 550px;
  position: relative;
  left: 350px;
  top: 50px;
  background-color: #36393f;
  border-radius: 10px;
}

.Discord .Chat {
  width: 50px;
  height: 10px;
  padding: 12px 314px;
  background-color: #40444b;
  border-radius: 5px;
  position: relative;
  top: 505px;
  left: 10px;
  border: 1px solid;
  border-color: #40444b;
  outline: none;
  /*Tirar aquela borda azul quando clica na barra*/
  text-align: left;
}
<div class="Discord">
  <input type="text" class="Chat">
</div>

css

1 answer

2


The problem there is that you put one padding huge right/left of 314px in the input:

padding: 12px 314px;

It seems to me to have been a ploy just for the input to be the same width as the div where it is, but this has generated this problem now, where the typing area was small and positioned in the middle of the element, and the text-align: left; will not solve, because the problem is not the alignment of the text.

What you need to do is fix this padding, leaving only the value 12px:

padding: 12px;

'Cause then you’ll apply 12px internal spacing in all directions (top/right/bottom/left).

This is done by adjusting the width of the input. For this, you can use the calc(), subtracting from 100% the sum of the paddings right and left, 2 times the left of 10px and 1px edges of the input itself:

- paddings right/left: 24px (12px cada)
- left: 10px * 2 = 20px
- bordas right/left: 1px * 2 = 2px
- TOTAL: 46px

With this, the input should have:

width: calc(100% - 46px);

Or, as the div is fixed, you can discount the 46px of the fixed width of the div:

width: calc(700px - 46px);

Or just go straight through the subtraction result:

width: 654px;

Behold:

* {
margin: 0px;
padding: 0px;
}

.Discord {
width: 700px;
height: 550px;
position: relative;
left: 350px;
top: 50px;
background-color: #36393f;
border-radius: 10px;
}

.Discord .Chat {
width: calc(700px - 46px);
height: 10px;
padding: 12px;
background-color: #40444b;
border-radius: 5px;
position: relative;
top: 505px ;
left: 10px;
border: 1px solid;
border-color: #40444b;
outline: none; /*Tirar aquela borda azul quando clica na barra*/
/*text-align: left;*/
}
<div class="Discord">
   <input type="text" class="Chat">
</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.