1

I'm working on an autocomplete form, but I seem to have some issues with the padding between the text and submit form. I cannot seem to adjust the spacing between the text and submit items, which I need because when I increase the size of the text field, it overwrites the submit button. I believe I've tried all types of padding but they do nothing. Can someone give me a clue please?

.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid;
  padding: 5px;
  font-size: 24px;
}

input[type=text] {
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding: 5px;
}

input[type=submit] {
  margin-left: 5px;
  padding: 5px;
  background: #ccc;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border: 1px solid;
  background-color: DodgerBlue;
  border-color: #CCCCCC;
  color: #fff;
}
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Daniel Kaplan
  • 701
  • 7
  • 19
  • 1
    you can increase the value of `margin-left` in `input[type=submit] {}` – Thanthu Mar 25 '19 at 03:48
  • @Thanthu Thanks, this worked. Maybe a more suitable question would be hot to adjust the submit button based on the ending of the text field. Is that possible? – Daniel Kaplan Mar 25 '19 at 04:20
  • You can add margin to the element where you want to add space to end. In your case add `margin-right: 5px;` to `input[type=text]{}` is that what you meant. I've posted the comment as answer – Thanthu Mar 25 '19 at 04:35

3 Answers3

1

Add box-sizing: border-box to your input[type=text] - the default content-box setting means that when you add padding to an element it increases its dimensions.

See demo below:

.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid;
  padding: 5px;
  font-size: 24px;
}

input[type=text] {
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding: 5px;
  box-sizing: border-box; /* added */
}

input[type=submit] {
  margin-left: 5px;
  padding: 5px;
  background: #ccc;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border: 1px solid;
  background-color: DodgerBlue;
  border-color: #CCCCCC;
  color: #fff;
}
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

You can see more examples here:

kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • Did as you suggested, and when I increase the size of the text to 120% it still overwrites the submit button – Daniel Kaplan Mar 25 '19 at 04:15
  • why do you want to increase to greater that 100%? you have a fixed width set for the parent element – kukkuz Mar 25 '19 at 04:16
  • I want the ability to adjust things as needed, so wanted to know how. – Daniel Kaplan Mar 25 '19 at 04:18
  • see when you say 120% width, it is 120% of its parent's width and therefore *overflows* the parent `div.autocomplete` :) the issue with your code was you were saying `width: 100%` and the `padding` along with it was adding to this 100% width... – kukkuz Mar 25 '19 at 04:20
  • I hear you. So in my example does that mean that the fields make up the 300px of the parent automatically and I shouldn't play with that? – Daniel Kaplan Mar 25 '19 at 04:35
  • yeah if you have `width: 100%` for the `input` then it occupies 100% of the width of `div.autocomplete` which is 300px... then all need to get the *space between* `div.autocomplete` and `input[type=submit]` is margin - you already have `margin-left` on `input[type=submit]` – kukkuz Mar 25 '19 at 04:39
  • even if you remove that `margin-left: 5px`, there is a *small gap* that is *natural* to *inline elements*... – kukkuz Mar 25 '19 at 04:40
0

Have you tried using &nbsp; between your input text and submit button?

.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid;
  padding: 5px;
  font-size: 24px;
}

input[type=text] {
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding: 5px;
}

input[type=submit] {
  margin-left: 5px;
  padding: 5px;
  background: #ccc;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border: 1px solid;
  background-color: DodgerBlue;
  border-color: #CCCCCC;
  color: #fff;
}
<form autocomplete="off" action="/action_page.php"> 
  <div class="autocomplete" style="width:300px;"> 
    <input id="myInput" type="text" name="myCountry" placeholder="Country">   
    </div>&nbsp;&nbsp;&nbsp;
<input type="submit"> 
</form>
Viraj Khatri
  • 380
  • 2
  • 10
0

You can increase the value of margin-left in input[type=submit] {} like shown below: 

input[type=submit] {
  margin-left: 10px; /* increased value */
  padding: 5px;
  background: #ccc;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border: 1px solid;
  background-color: DodgerBlue;
  border-color: #CCCCCC;
  color: #fff;
}

or add margin right to the previous element like shown below: 

input[type=text] {
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin-right: 5px; /* add margin right */
}
Thanthu
  • 4,399
  • 34
  • 43