Austin Hunter Austin Hunter - 3 months ago 14
Android Question

HTML/CSS formatting trouble.

So I have made a simple app in ionic and I am formatting my css and html. I am trying to make my app look really nice. All it has right now is a input text field and a input button. I am having a hard time with my margins/padding, not sure. Here is my code:



.title {
background-color: #e6ffff;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;

}

input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
vertical-align: middle;
display: inline-block;
border: none;
text-align: center;
width: 100%;
margin-top: 15px;
}

div {
margin-top: 50px;
margin-left: 120px;
margin-right: 120px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 15px;
}

<body ng-app="starter">

<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Push Notifications</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="myCtrl">
<form>
<input type="text" class="messageText" placeholder="Message" ng-model="messageText">
<input type="submit" ng-click="submit()">
</form>
</div>
</ion-content>
</ion-pane>
</body>





Picture of the app running in the browser

See how the gray is all weird and the header also is missing some color? I need some help fixing this. Also I would not mind some css tips on making a app look professional! Thanks in advance!:)

Answer

Okay, so the problem lies in how you have things positioned in the DOM. Quickest solution is to add the styles to the form and take a few styles away from the div that's wrapping it.

form{
 background:pink;
 background-color: #f2f2f2;
 padding:15px;
 border-radius: 5px;
}
div {
 margin-top: 50px;
 margin-left: 120px;
 margin-right: 120px;
 padding: 15px;
}

quick reference for box models: https://css-tricks.com/the-css-box-model/