CSS formatting issues - need help

[rolinger]

Hi all,

I am not understand and can’t figure out why my CSS formatting isn’t working properly. I am adding a search box above an embedded map. The map works and is showing up and placing correct markers. But I am have three issues:

1. I have a div with an embedded form that simply allows the user to search for a location. However, the <input> text field is not displaying and I have no idea as to why. It just shows up as white space on the screen but no input field is being displayed.

2. I want the same form to all be on one line like the following:
   Location: |__________________| [Set]

However, what is appearing is:
Location:
|____________________|
[Set]

This is causing the height of ‘dispAddress’ to be 80px when I am trying to get the over height of the div/form to be around 20px. But changing the div height value to 20px in the CSS .dispAddress definition is being ignored and has no impact on the height, always defaulting back to the 80px - this then causes the in input field and the [set] button to be underneath, and thus hidden, the map.

3. it doesn’t appear that my CSS .map declaration is being used, If I put the style params directly inline into the <div id="map"> then my map shows up just fine, but if removed and thus relying on the CSS .map definition the map disappears from view.

css/style.css

.map {
    margin-top: 10px;
    width:360px;
    height:400px;
    border:3px solid black;
    text-align:center;
}

#dispAddress {
  margin-top:3px ;
  margin-bottom:3px ;
  width:100% ;
  height: 10px ;
}

HTML file:

<ion-content>
  <div id="dispAddress" style="text-align:left;"> 
    <form action="#" onsubmit="getPosition(this.address.value); return false"> Location: 
      <input type='text' id='curAddress' name="address" value='' /> 
      <input type="submit" value="Set" />
      <span id='test'></span>
    </form>
  </div>
  <div id="map" data-tap-disabled="true"></div>
</ion-content>

[rolinger]

I fixed my 3rd issue related to the CSS .map, its not a class so I needed to define it as #map instead .map

However, issues 1 & 2 still remain. dispAddress is 80px high and the input field isn’t showing.

[rolinger]

ugh…Ok, so issue 1 was never an issue, the input text box just didn’t have a native border around it thus it blended into the white background. It is there, and I have since added my own border around it and can see it clearly and it works fine.

HOWEVER, issue 2 still remains: I can’t seem to get the contents of the form onto a single line. It still is doing the following:

2. I want the same form to all be on one line like the following:
   Location: |__________________| [Set]

However, what is appearing is:
Location:
|____________________|
[Set]

[rolinger]

To highlight the #2 problem from above I have attached these two screen shots of how I can’t get the form onto a single line. The second screen shot is the code itself, I don’t understand why (or if its even the problem) " Location " is spread across two lines.

[rolinger]