Layout issue with Tailwind 3 #1419

philippeadam · 2024-07-11T15:01:19Z

philippeadam
Jul 11, 2024

What happened?

When using the default layout feature with Tailwind 3, the resulted layout doesn't match the displayed layout in the CMS.

CMS:

Result:

If I remove the flex-wrap in the inspect element it seems to fix the problem:

Errors and Stack Trace (if available)

No response

How can we reproduce this?

Use Tailwind 3.4.3
Use Freeform 5.3.0
Create a form and put 2 fields side by side

Freeform Edition

Pro

Freeform Version

5.3.1

Craft Version

5.1.6

When did this issue start?

Fresh install of Freeform

Previous Freeform Version

No response

kjmartens · 2024-07-12T06:28:32Z

kjmartens
Jul 12, 2024
Maintainer

Hi @philippeadam,

I am not able to reproduce this in my testing. I am wondering if you can try and confirm a few things:

Update to Freeform 5.5.4 and see if that makes any difference.
Install the demo templates included with Freeform and see if the form appears correctly there OR
Create a brand new template with nothing else on it except something like this:

<html>
<head></head>
<body>

{{ freeform.form("yourFormHandle", {
    formattingTemplate: 'tailwind-3/index.twig'
}).render() }}

</body>
</html>

Is there any chance you have custom CSS overrides that could be interfering with the form?

Thanks 🙂

0 replies

philippeadam · 2024-07-12T17:58:30Z

philippeadam
Jul 12, 2024
Author

@kjmartens I have upgraded to 5.5.4 and also tried placing only the form on an empty page but it still doesn't put the fields side by side.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Layout issue with Tailwind 3 #1419

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Layout issue with Tailwind 3 #1419

Uh oh!

philippeadam Jul 11, 2024

What happened?

Errors and Stack Trace (if available)

How can we reproduce this?

Freeform Edition

Freeform Version

Craft Version

When did this issue start?

Previous Freeform Version

Replies: 2 comments

Uh oh!

kjmartens Jul 12, 2024 Maintainer

Uh oh!

philippeadam Jul 12, 2024 Author

philippeadam
Jul 11, 2024

kjmartens
Jul 12, 2024
Maintainer

philippeadam
Jul 12, 2024
Author