Streaming live at 10am (PST)

HTML Export: Gaps between input fields


#1

When exporting the HTML for a form with input fields the rendered HTML looks different from the published version. Heres the break-down of the problem:
https://preview.webflow.com/preview/sofaplayground?preview=2bf2e7e22f9d3aa2f9aac8973299ff3a

The input fields do not have any margins, when publishing the result looks as in the editor and as expected:


When exporting the code to HTML there are some nasty gaps between the input fields:


Heres the exported HTML:
https://www.dropbox.com/s/py265vw57a792ty/HTML_input_field_gaps.zip?dl=0

I also tried to minify the files according to this post without any success:

Does webflow use different versions of webflow.css while exporting or publishing?

Thanks in advance


#2

This isn't really a bug but the way inline and inline-block elements render. The easist way to deal with it for exported sites is to float the input left.

Here is an article that deals with the issue.

https://css-tricks.com/fighting-the-space-between-inline-block-elements/


#3

Great, floating solved the problem!

Thanks!


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.