Align button inside search input

Question

I need to position the button inside the Search input on the right side and the text inside the search button cannot go underneath that button.

I've tried different positioning options using CSS, but I cannot find the solution

How would I do this the best way. Hope anyone can help!

$(document).ready(function(){
  var regionDropDown = $('.region_dropdown_section'),
      regionButton = regionDropDown.find('button'),
      regionList = regionDropDown.find('.region_dropdown_content').children();

  $(regionList).on('click', function(e){
    var region = e.target;
    regionButton.text(region.text).val(region.text);
  });
});

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  vertical-align: baseline;
  outline: none;
}

body {
  background: url(../images/background/body_background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo img{
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 50px;
  margin-bottom: 50px;
}

.SearchSummoners {
  margin: auto;
  width: 35%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid;

  -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%);
  border-image: linear-gradient(to bottom, #006184 0%, #303142 100%);
  border-image-slice: 1;
}

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.region_dropdown_section {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.region_dropdown_content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.region_dropdown_content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.region_dropdown_content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.region_dropdown_section:hover .region_dropdown_content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.region_dropdown_section:hover .dropbtn {
    background-color: #3e8e41;
}

.Searchbox_Summoners {
  margin: auto;
  display: block;
  width: 65%;
}

#SearchBox{
  margin-right: 10%;
  margin-left:  10%;
  width: 80%;
  background-color: white;
  height: 40px;;
 }

#SearchInput{
  width: 92%;
  line-height: 40px;
  background: white;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  margin-left: 20px;
    font-size: 24px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php define('DeniedAccessFiles', TRUE); ?>

<?php include 'header.php'; ?>
<div class="logo">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97225&w=500&h=225">
</div>
  <div class="SearchSummoners">
    <div id="SearchBox">
      <form method="POST">
        <input id="SearchInput" value="Enter the Summoner Name"  onfocus="if(this.value  == 'Enter the Summoner Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter the Summoner Name'; }"  type="text" name="SummonerName"></input>
      </form>
    </div>
    <div class="region_dropdown_section">
      <button class="dropbtn">Select Region</button>
      <div class="region_dropdown_content">
        <a href="#">North America</a>
        <a href="#">Europe West</a>
        <a href="#">Europe NE</a>
        <a href="#">Korea</a>
      </div>
    </div>
  </div>
<?php include 'footer.php'; ?>

I didn't get your problem clearly. You want green button on right to the input? — The_ehT, Aug 03 '16 at 17:50
take a look on http://stackoverflow.com/questions/15314407/how-to-add-button-inside-input — manoj singh, Aug 03 '16 at 17:50
@The_ehT Yes, I basically want the green button on the right side of the input. But aligned against it or inside it on the right side. - Like you can see on this imgur link (The red box is the green button) http://i.imgur.com/JvYRt4B.png — BPrepper, Aug 03 '16 at 17:54
with current size of input and button it won't align in the box. Either the box needs to be bigger or button and input needs to be small. Using `display:inline-box` you can achieve it, I can write answer if you want. Are you DOTA or LOL player? — The_ehT, Aug 03 '16 at 17:58
@The_ehT I'm a League of Legends player. - The button can be smaller, it's just an example size. I've tried using `display: inline-box` but that didn't work for me? — BPrepper, Aug 03 '16 at 17:59

score 0 · Answer 1 · answered Aug 03 '16 at 18:10

Here is your code snippet -

$(document).ready(function(){
  var regionDropDown = $('.region_dropdown_section'),
      regionButton = regionDropDown.find('button'),
      regionList = regionDropDown.find('.region_dropdown_content').children();

  $(regionList).on('click', function(e){
    var region = e.target;
    regionButton.text(region.text).val(region.text);
  });
});

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  vertical-align: baseline;
  outline: none;
}

body {
  background: url(../images/background/body_background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo img{
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 50px;
  margin-bottom: 50px;
}

.SearchSummoners {
  margin: auto;
  width: 50%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid;

  -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%);
  border-image: linear-gradient(to bottom, #006184 0%, #303142 100%);
  border-image-slice: 1;
}

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 14px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.region_dropdown_section {
    position: relative;
    display: inline-block;
 width:40%;
}

/* Dropdown Content (Hidden by Default) */
.region_dropdown_content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.region_dropdown_content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.region_dropdown_content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.region_dropdown_section:hover .region_dropdown_content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.region_dropdown_section:hover .dropbtn {
    background-color: #3e8e41;
}

.Searchbox_Summoners {
  margin: auto;
  display: block;
  width: 65%;
}

#SearchBox{
  
     width: 60%;
    background-color: white;
   height: 40px;
  display: inline-block;
 }

#SearchInput{
  width: 92%;
  line-height: 40px;
  background: white;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  margin-left: 20px;
    font-size: 12px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php define('DeniedAccessFiles', TRUE); ?>

<?php include 'header.php'; ?>
<div class="logo">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97225&w=500&h=225">
</div>
  <div class="SearchSummoners">
    <div id="SearchBox">
      <form method="POST">
        <input id="SearchInput" value="Enter the Summoner Name"  onfocus="if(this.value  == 'Enter the Summoner Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter the Summoner Name'; }"  type="text" name="SummonerName"></input>
      </form>
    </div><div class="region_dropdown_section">
      <button class="dropbtn">Select Region</button>
      <div class="region_dropdown_content">
        <a href="#">North America</a>
        <a href="#">Europe West</a>
        <a href="#">Europe NE</a>
        <a href="#">Korea</a>
      </div>
    </div>
  </div>
<?php include 'footer.php'; ?>

That worked great already, the only problem is that my positioning is not centered anymore for some reason: https://gyazo.com/9d74cd4a16b43c2e96e6257007ba9ece — BPrepper, Aug 03 '16 at 18:13
@BPrepper use `px` unit for green button width and then for `input` use css `calc` method to calculate the remaining. If you want to expand the bar full. but I think that search bar a bit long so better reduce the `div.SearchSummoners` element reduce its width. — The_ehT, Aug 03 '16 at 18:17
Thanks The_ehT - If you wanna join me in this project, feel free to add me on league (EUW - TheBliveon) or steam: BelgianPrepper — BPrepper, Aug 03 '16 at 18:20
[link](https://jsfiddle.net/gLcct92y/) That worked, The only thing that is bugging me is that the right side where the button is, is not staying in the box. when you zoom in, it just leaves the background box. Also the empty space right of the button is bugging me. — BPrepper, Aug 03 '16 at 18:31
Yeah, there are things to care about when building responsive UI. I can't explain all here. Somethings like link to jsbin or jsfiddle sample may be better to help you. — The_ehT, Aug 03 '16 at 18:37
[JSFiddle Code Snippet](https://jsfiddle.net/6xc5jkah/) - Ok I fixed the whitespace on the right. Now it's only the right side that keeps leaving the box on zooming in. Tried fixing in with bootstrap, but that didn't help at all. — BPrepper, Aug 03 '16 at 18:40
Updated jsfiddle https://jsfiddle.net/6xc5jkah/2/ .Use `overflow:hidden` on `.region_dropdown_section` to hide the overflow. For responsive Ui you should use CSS media queries. — The_ehT, Aug 03 '16 at 18:55
Thank you, is it possible to add you on steam, skype or league, so I don't have to keep asking questions here? — BPrepper, Aug 03 '16 at 19:02

Alex Cushing · Answer 2 · 2016-08-03T18:17:53.057

try this, you need to float the box enter box left and change some sizing so it fits.

$(document).ready(function(){
  var regionDropDown = $('.region_dropdown_section'),
      regionButton = regionDropDown.find('button'),
      regionList = regionDropDown.find('.region_dropdown_content').children();

  $(regionList).on('click', function(e){
    var region = e.target;
    regionButton.text(region.text).val(region.text);
  });
});

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  vertical-align: baseline;
  outline: none;
}

body {
  background: url(../images/background/body_background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo img{
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 50px;
  margin-bottom: 50px;
}

.SearchSummoners {
  margin: auto;
  width: 35%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid;

  -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%);
  border-image: linear-gradient(to bottom, #006184 0%, #303142 100%);
  border-image-slice: 1;
}

/* Dropdown Button CHANGED SOME SIZING FOR THIS*/
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 4px;
font-size: 12px;
border: none;
cursor: pointer;
height: 40px;
}



/* Dropdown Content (Hidden by Default) */
.region_dropdown_content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.region_dropdown_content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.region_dropdown_content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.region_dropdown_section:hover .region_dropdown_content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.region_dropdown_section:hover .dropbtn {
    background-color: #3e8e41;
}

.Searchbox_Summoners {
  margin: auto;
  display: block;
  width: 65%;
}

/*THIS WAS EDITED*/
#SearchBox {
     margin-right: 0;
     margin-left: 0;
     width: 80%;
     background-color: white;
     height: 40px;
     float: left;
    }
    
        .region_dropdown_section {
         position: inherit;
         display: inline-block;
         /* width: 0; */
         max-width: 10% !important;
        }

#SearchInput{
  width: 92%;
  line-height: 40px;
  background: white;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  margin-left: 20px;
    font-size: 24px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php define('DeniedAccessFiles', TRUE); ?>

<?php include 'header.php'; ?>
<div class="logo">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97225&w=500&h=225">
</div>
  <div class="SearchSummoners">
    <div id="SearchBox">
      <form method="POST">
        <input id="SearchInput" value="Enter the Summoner Name"  onfocus="if(this.value  == 'Enter the Summoner Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter the Summoner Name'; }"  type="text" name="SummonerName"></input>
      </form>
    </div>
    <div class="region_dropdown_section">
      <button class="dropbtn">Select Region</button>
      <div class="region_dropdown_content">
        <a href="#">North America</a>
        <a href="#">Europe West</a>
        <a href="#">Europe NE</a>
        <a href="#">Korea</a>
      </div>
    </div>
  </div>
<?php include 'footer.php'; ?>

Align button inside search input

2 Answers2