Draft looks fine but preview is wrong
-
I’ve created a form and it all looks okay but when I check it in preview mode the headings all run into each other instead of being on different lines. I’ve tried changign the them but this doesn’t seem to have helped.
WP.com: Yes
Correct account: YesThe blog I need help with is: (visible only to logged in users)
-
Hi there,
You are referring to the form here? https://onlyagame2022.wordpress.com/10-2/predictions-page/
The form on that page seemed to be fine to me, I did not see the issue you describe. Were you able to sort this out on your own, or did you need a hand still?
-
Hi,
I’ve still got an issue with this form. In the editor it looks fine but when I preview it in a new tab, the headings display out of order e.g. h4 above h3 and the text boxes don’t line up correctly.
-
I can see that, yes. Looks like an issue with the Form block and your current theme. I’ll try replicating it on my end and report it to our development team.
While we’re working on a fix, you can use a different theme. We have plenty of minimalist themes that resemble the look of Blockbase.
-
Hi,
I tried changing the theme several times and this did not fix the problem.
I did stumble on a fix. If the heading 4 item is not wider than the text box then it tends to wraps. I had assumed that there was a hard return after each header style forcing a new line but this appears not to be the case. In order to ‘fix’ the issue for now I have added ‘—‘ characters into the heading to ensure that it is wider than the text boxes which are set at 50%.
I had tried insert html br tags into the code but that didn’t help either so I’m assuming there is an issues with the CSS definitions of the header items.
thanks
Douglas -
Hi there,
After a closer look it seems the issue here is with the 50% width settings of the form fields. I understand your intent is to have the form display choices side-by-side but it seems at this point the form block has some difficulty supporting this.
I noted that the form does appear to display as you wish on larger monitors (desktops and laptops) without issue, but on smaller screens like tablets and smartphones the layout of the form starts to fall apart. Essentially it can’t properly scale the side-by-side content to remain responsive to the screen size.
I did stumble on a fix. If the heading 4 item is not wider than the text box then it tends to wraps. I had assumed that there was a hard return after each header style forcing a new line but this appears not to be the case. In order to ‘fix’ the issue for now I have added ‘—‘ characters into the heading to ensure that it is wider than the text boxes which are set at 50%.
Workarounds like that may do the trick, but I suspect that it may correct the issue in one view (desktop) but cause further issues in the other views like phones and tablets. You seem to indicate that this worked for you though, and if so I am glad. On our end I have reported this behaviour to our engineers, but I can’t provide an estimate of when this would be corrected. My guess however is that there will be quite bit of coding work involved in creating a way to build two-column layouts in forms.
In taking a closer look at your form I did have a question however, I noticed that you have a lot of form fields, do you have folks who fill out the form type in something specific?
If not and you just need them to “select” which team, I would actually recommend using the Radio Block to add the choices as simple buttons that visitors can check. You can see here it makes the form a bit easier to fill out since there is no typing involved and the form is shorter so there is less scrolling.
Note: Your current form on the left, a copy on my test site (using radio buttons) is on the right.
Hope that helps. Please let us know if you have any more questions.
- The topic ‘Draft looks fine but preview is wrong’ is closed to new replies.
WordPress.com Forums 