How do I keep a button appended to an input even at a smaller page width?

Question

I am trying to append a button to a text input.

It works when I am in desktop mode, but when you change the size to a mobile-viewing size the button separates from the input.

Here is my fiddle.

I am using purecss:

input {
  font-size: 16px;
  padding-right: 50px;
  border-radius: 0px;
  height: 30px;
}
.pure-button {
  margin-left: -45px;
  height: 30px;
  width: 40px;
  padding: 1px;
}
span {
  cursor: pointer;
  display: inline-block;
  height: 11px;
  width: 8px;
  text-align: center;
  white-space: nowrap;
  align-self: flex-start;
  background: red;
  background-position: 0 0;
  margin: 1px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css" rel="stylesheet"/>
<div class="pure-g">
  <div class="pure-u-1">
    <form class="pure-form">
      <fieldset>
        <input type="text" class="pure-input-1-2" />
        <button type="submit" class="pure-button pure-button-primary">
          <span></span>
        </button>
      </fieldset>
    </form>
  </div>
</div>

I'd suggest re-thinking your design strategy. If you type a long word, it will go behind the button. Place the button next to the input, not over it. — Lazar Ljubenović, Aug 28 '16 at 22:43
@LazarLjubenović I put "padding-right: 50px" for the input button...even with that it will break? — , Aug 29 '16 at 00:44

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

The library you're using is adding display: block to the input in a media query. That's forcing the button to the next line.

Add this to your CSS:

input, button { 
    display: inline-block !important;
    margin: 0 !important;
}

The !important is needed to override the PURECSS code. Otherwise, alter the code in the source.

I also removed all whitespace between the elements in the code:

<input type="text" class="pure-input-1-2" /><button type="submit" class="pure-button pure-button-primary"><span></span></button>

This is one method for removing spaces between inline-block elements.

revised fiddle

edited May 23 '17 at 10:33

Community

1
1

answered Aug 28 '16 at 22:41

Michael Benjamin

346,931
104
581
701

If I change it to "pure-input-1" rather than "pure-input-1-2" then it breaks: https://jsfiddle.net/hjpa4bf6/5/ – Aug 29 '16 at 00:43
Because `pure-input-1` has a rule saying `width: 100%`, forcing the input to occupy the entire line. You can override that, as well. https://jsfiddle.net/hjpa4bf6/6/ – Michael Benjamin Aug 29 '16 at 00:49
hmmm..it still breaks – Aug 29 '16 at 00:51
In the fiddle demo? Not breaking here... Also, you're working with a library that is applying lots of code to your elements. Go into the inspector (F12 on Chrome) and review the CSS being applied so you can add, remove and adjust styles, as needed. – Michael Benjamin Aug 29 '16 at 11:32

score 0 · Answer 2 · answered Aug 28 '16 at 22:45

0

There is a media query that is applying tules to to the input and the button from 0px - 480px. If you remove or override these, your fields will behave the same way as > 480px screen widths.

answered Aug 28 '16 at 22:45

alanbuchanan

3,993
7
41
64

Yasir Khan · Answer 3 · 2016-08-29T11:37:58.977

Please try the below code within your existing code, hope this will help you.

.pure-form fieldset{
  position: relative;
  width: 50%;
  padding: 0 45px 0 0;
  margin: 10px;
  box-sizing: border-box;
}

input {
  font-size: 16px;      
  border-radius: 0px;
  height: 30px;
}
.pure-form .pure-input-1-2{
  width: 100%;
}
.pure-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 30px;
  width: 40px;
  padding: 1px;
  margin: 0 !important;
}

span {
  cursor: pointer;
  display: inline-block;
  height: 11px;
  width: 8px;
  text-align: center;
  white-space: nowrap;
  align-self: flex-start;
  background: red;
  background-position: 0 0;
  margin: 1px;
}

<div class="pure-g">
  <div class="pure-u-1">
    <form class="pure-form">
      <fieldset>
        <input type="text" class="pure-input-1-2" />
        <button type="submit" class="pure-button pure-button-primary">
          <span></span>
        </button>
      </fieldset>
    </form>
  </div>
</div>

that seems to work but why isn't the "padding-right: 50px;" not being respected? https://jsfiddle.net/hjpa4bf6/7/ — , Aug 29 '16 at 00:49

How do I keep a button appended to an input even at a smaller page width?

3 Answers3