I encountered an issue when creating a custom form inside a RAW HTML container.

It looks like some CSS is controlling it.

I created a table and the rows are not aligned, also to perform the function associated to the form is needed to click outside the last field to be able to perform the calculation.

Also the fields and label move down every time new data is typed and every time the clear button is pressed.

http://es.flexopluss.com/troqueles-flexibles/

http://imgur.com/eDWVXfn

http://imgur.com/HsMTEwj

http://imgur.com/ubAoRRX

http://imgur.com/XxIfeC5

After reloading the page, the fields come back to the original position.

http://imgur.com/xpjaWlB

Thanks,

Sure you can see what CSS takes place, basically the labels (first cells) have a:

vertical-align: baseline;

and the inputs and selects have a default of bottom-margin: 20px; here:

input[type="text"], input[type="password"], input[type="email"], textarea, select {
border: 1px solid #eee;
padding: 8px;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-family: inherit;
font-size: inherit;
color: #555;
margin: 0;
width: 300px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #f9f9f9;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
}

Feel free to overwrite those values for you specific table, using a CSS class on it. For example:

.my_table {
vertical-align: top;
}

.my_table input[type="text"], .my_table  input[type="password"], .my_table  input[type="email"], .my_table  textarea, .my_table  select {
    margin-bottom: 0px;
}

Good luck!

Now, every time a field is filled, the different rows of the table get separated in between, even when clear (Borrar) button is pressed, the distance between rows gets increased.

I tried the code on http://www.w3schools.com Try it Yourself and this doesn’t occur.

Any Ideas?

Thanks,

In your case you need this to fix the TD alignment:

.distribution_calc table td {
    vertical-align: top;
}

BTw what browser are you using, I don’t get anything change once you fill the fields in chrome.

But this last addition to the custom CSS solved the problem.

Thanks a lot, have a nice weekend.