Possible Bug: Form <input> wrapping issues

ionic-v1
1

Hi all,

I posted this in a previous post that listed several issues. All of those have been fixed except the following problem. A form that is designed to be a height of 20px and consist of a single line:

Location: |_____________________| [Set Button]

Is being wrapped to 3 lines causing the height to be 80px.

Location:
|_____________________|
[Set Button]

For the life of me I can’t figure out why. Below is my CSS and the HTML that is displaying it:

css/style.css

#dispAddress {
  margin-top:5px ;
  margin-bottom:3px ;
  padding-left:3px;
  text-align:left ;
  width:360px ;
  height: 20px ;
  white-space: nowrap ;
}

#curAddress {
  border:1px solid #4e8cf9 ;
  height: 18px; 
  width: 60px;
}

HTML from file:

<ion-view view-title="Test - Active Map">
    <ion-content>
      <form id="dispAddress" action="#" onsubmit="getPosition(this.address.value); return false" style="width:360px;">
      Location: <input type="text" id="curAddress" name="address" value=""><input type="button" value="Set">
      <br>
      <span id='test'></span>
      </form>
      <div id="map" data-tap-disabled="true"></div>
      <div id="requestRide">
        <form action="#" onsubmit="getPosition(this.address.value); return false">
        Pickup in <input type="text" id="requestTime" name="requestTime" value=""> min
          <input type="button" value="Go">
        </form>
      </div>
    </ion-content>
</ion-view>

The attached image shows the problem visually. Half of the input field and the [Set Button] are hidden behind the map when the whole should be on the same line next to “Location”

image
img1.jpg539×626 76.6 KB

2

I am really starting to think this is a bug. I created the same form with the same CSS in another test cordova project and everything displays on a single line. Here is what happens on the form when I set “text-align: right” instead of left (this also has “height” removed so you fully see the issue).

image

3

Well, maybe not a bug, but not being able to deploy your custom CSS for how you want your forms to look is tad too much. After reviewing the IONIC CSS docs I saw the Forms inset inputs - and that fixed my issue. However, I still want to be able to customize they way things look but there doesn’t seem an easy way to do it.