When I write in the input the text begins to appear in the middle instead of the beginning

Question

When I write in the input the text begins to appear in the middle instead of the beginning

Navigation

#1 by (2 votes)

1

I'm a beginner in html / css and found no answer anywhere, but then, in the input I put a css to increase the size of the "box" etc, but when I type the "|" appears. to start writing in a strange position, I wanted it to start in the beginning.

CSS / HTML:

aside {
    background: #ffffff;
    color: white;
    border: 2px #438df2 solid;
    float: left;
    height: 75.56%
}

aside p {
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    color: black;
    margin: 15px;
}

.label1, .label2 {
    color: black;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    margin: 15px;
}

#email {
    padding: 0px 35px 10px 50px;
    margin: 0px;
}

#email2 {
    padding: 0px 60px 120px 60px;
    margin: 0px;
}

  <aside>
     <p>Interested in my work? Send me a message!</p>
     
      <label for="email" class="label1">Insert your email here:</label>
      <p>
        <input type="text" id="email" name="Email" class="input1"></p>
        
        <label for="text" class="label2">Insert your message here:</label>
      <p>
        <input type="text" id="email2" name="Text" class="input1"></p>
        
        <button>Send</button>
        
  </aside>

html css

asked by anonymous 01.02.2017 / 21:39

1 answer

Which event executes first, javascript or asp.net? How to display a menu according to the type of user logged in with Ionic / Angularjs?

score 2 · Accepted Answer

It's because of the paddings:

#email {
    padding: 0px 35px 10px 50px;
    margin: 0px;
}

#email2 {
    padding: 0px 60px 120px 60px;
    margin: 0px;
}

You can swap for width and height:

aside {
    background: #ffffff;
    color: white;
    border: 2px #438df2 solid;
    float: left;
    height: 75.56%
}

aside p {
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    color: black;
    margin: 15px;
}

.label1, .label2 {
    color: black;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    margin: 15px;
}

#email {
    width: 260px;
    height: 30px;
    margin: 0px;
}

#email2 {
    width: 295px;
    height: 140px;
    margin: 0px;
}

  <aside>
     <p>Interested in my work? Send me a message!</p>
     
      <label for="email" class="label1">Insert your email here:</label>
      <p>
        <input type="text" id="email" name="Email" class="input1"></p>
        
        <label for="text" class="label2">Insert your message here:</label>
      <p>
        <input type="text" id="email2" name="Text" class="input1"></p>
        
        <button>Send</button>
        
  </aside>

The second input was very large, I think what you want is a textarea maybe, look like this:

aside {
    background: #ffffff;
    color: white;
    border: 2px #438df2 solid;
    float: left;
    height: 75.56%
}

aside p {
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    color: black;
    margin: 15px;
}

.label1, .label2 {
    color: black;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    margin: 15px;
}

#email {
    width: 260px;
    height: 30px;
    margin: 0px;
}

#email2 {
    width: 295px;
    height: 140px;
    margin: 0px;
}

  <aside>
     <p>Interested in my work? Send me a message!</p>
     
      <label for="email" class="label1">Insert your email here:</label>
      <p>
        <input type="text" id="email" name="Email" class="input1"></p>
        
        <label for="text" class="label2">Insert your message here:</label>
      <p>
        <textarea id="email2" name="Text" class="input1"></textarea></p>
        
        <button>Send</button>
        
  </aside>