CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive
OM The Eternity
OM The Eternity

Reputation: 16234

How to make the position of a button adjacent to input field responsive?

I have a div structure which looks like this here we can see that the a Refresh button is displayed adjacent to input field, which works fine as visible right now in web view, where as, if we switch the view to responsive, say iphone 6s or 7, for that matter any device, then the button does not behave responsive that is doesnt comes down to the adjacent field(between two input fields). Please help me in getting this in place or suggest a better way to display this button in device view

Below is the code:

CSS

.captcha-div{
    margin-bottom: 28px !important;
}

.captcha-field{
    margin-bottom: 15px !important;
    border-radius: 8px !important;
}

.captcha-inpt{
    border-radius: 8px !important;
    height: 40px !important;
}

.refresh-icon{
    display: block !important;
}

.refresh-btn{
    margin-left: 15px !important;
    height: 40px !important;
    border-radius: 8px !important;
}

HTML

<body id="indexBody">
  <div id="mainContainer" class="container-fluid">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div id="appBody" class="row app-body">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div>
              <div class="input-group captcha-div">
                <input oncopy="return false;" disabled="disabled" type="text" class="form-control form-control-manual captcha-field" id="mainCaptcha">

                <input class="form-control captcha-inpt" type="text" id="txtInput" name="captcha" onpaste="return false;" />

                <span class="input-group-btn refresh-icon">
                                        <button id="refresh" onclick="Captcha();" class="btn btn-default refresh-btn" type="button">
                                            <span class="glyphicon glyphicon-refresh"></span>
                </button>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Upvotes: 0

Views: 330

Answers (1)

veera
veera

Reputation: 327

.captcha-div {
  margin-bottom: 28px !important;
}

.captcha-field {
  margin-bottom: 15px !important;
  border-radius: 8px !important;
}

.captcha-inpt {
  border-radius: 8px !important;
  height: 40px !important;
}

.refresh-icon {
  display: block !important;
}

.refresh-btn {
  margin-left: 15px !important;
  height: 40px !important;
  border-radius: 8px !important;
}
.input-group {
    padding-right: 50px;
}

.input-group-btn.refresh-icon {
    position: absolute;
    right: 0px;
    width: 40px;
    height: 40px;
}

.input-group-btn.refresh-icon button {
    margin-left: 0px!important;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="indexBody">
  <div id="mainContainer" class="container-fluid">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div id="appBody" class="row app-body">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div>
              <div class="input-group captcha-div">
                <input oncopy="return false;" disabled="disabled" type="text" class="form-control form-control-manual captcha-field" id="mainCaptcha">

                <input class="form-control captcha-inpt" type="text" id="txtInput" name="captcha" onpaste="return false;" />

                <span class="input-group-btn refresh-icon">
                                        <button id="refresh" onclick="Captcha();" class="btn btn-default refresh-btn" type="button">
                                            <span class="glyphicon glyphicon-refresh"></span>
                </button>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

You can try this CSS,

.captcha-div {
    position: relative;
    padding-right: 50px;
}
.input-group-btn.refresh-icon {
    position: absolute;
    right: 0px;
    left: auto;
    top: 0px;
    width: 40px;
    height: 40px;
}
.captcha-div input {
    display: inline-block;
}
.input-group-btn.refresh-icon button {
    margin: 0px!important;
}

Upvotes: 1

Related Questions