Form formating issues

Resolved Mike Seiler
(@mike-seiler)

10 years ago

This is very puzzling. I have isolated the problem thus:

I have a form spread out over 4 tabby tabs.
I change the font-style (for illustration purposes) in any of the 4 tabs.
<label for="test" style = "font-style: italic;" >Test: </label><input id="test" name="test" type="checkbox" value='1' />

However , I can only set the label width on the first tab.
<label for="test" style = "width: 150px;" >Test: </label><input id="test" name="test" type="checkbox" value='1' />

Put another way,

style = "width: 150px;"

is ignored after the first tab, but

style = "font-style: italic;"

works on any tab.

How can I set the width of the label on tabs > 1 ?

https://wordpress.org/plugins/tabby-responsive-tabs/

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author cubecolour
(@numeeja)

10 years ago

please post a link to the page on your site where I can see this

Thread Starter Mike Seiler
(@mike-seiler)

10 years ago

I just love the cute picture of the tabby.

Here ya go!
http://genuinemoney.us/wp/membership-account/configure-sites-monitored/

Thanks for looking into this.
Plugin Author cubecolour
(@numeeja)

10 years ago
I don’t see
```
style = "width: 150px;"
```
on any of your form field labels in your page source.

Have you tried adding the style to the stylesheet rather than inline?
Thread Starter Mike Seiler
(@mike-seiler)

10 years ago

Hi cubecoloour,

Thanks for the quick response!

Yes, the 150px wide style is in the style sheet.

I’ve changed the code that illustrates the problem to
style = "border: 1px solid black ; width: 200px"
Notice how there is a 200px wide box around
“Don’t Monitor This Site:” on the first “Monitor” tab.
The same inline style code does NOT put a 200px wide box around
“HTML Format Email:” on the second “Email/Notify” tab

– Mike

Plugin Author cubecolour
(@numeeja)

10 years ago

The styling of the tab content is independent of the tabs. The issue could be caused by invalid markup – see: https://validator.w3.org/nu/?doc=http%3A%2F%2Fgenuinemoney.us%2Fwp%2Fmembership-account%2Fconfigure-sites-monitored%2F

It looks like the opening and closing form tags are not nested correctly, so this may be the issue. Can you paste the content of the page from the WordPress text editor into a pastebin and post a link to it in your reply so I can see the shortcodes and other elements

Thread Starter Mike Seiler
(@mike-seiler)

10 years ago

You’re right. The problem is with the form tags.

The tabby short codes don’t let forms continue between tabs.
The problem went away when I closed the form before the next tabby short code.

Take a look at this test page:
http://genuinemoney.us/wp/membership-account/tab-form-test/
Notice how the form on the “Email/Notify” tab is now properly formatted.

However, our user interface specification calls for the one “OK” button at the bottom to be used to take action on the form fields on ALL the tabs.

I know this is asking a lot, but is there some way to keep the tabby tabs from implicitly closing a form at the end a tab? Put another way, is there a way that a tabby tab won’t act like a </form> ?

Plugin Author cubecolour
(@numeeja)

10 years ago

Please paste the content of the page from the WordPress text editor into a pastebin and post a link to it in your reply so I can see the shortcodes and other elements.

I don’t know how you are including the opening and closing form tags on the page as My testing indicates tgat WordPress strips these out on saving a page. For this to work the opening form tag needs to be before the first tabby shortcode, the closing form tag needs to be after the tabbyending shortcode and all elements defined in the markup need to be correctly nested.

I have done a test using tabby responsive tabs with rhe wp libre forms plugin. A smsll tweak was required for the ‘forms’ post type to work with shortcodes (this is outlined at https://wordpress.org/support/topic/shortcodes-within-the-form-post-type?replies=1#post-8221390 ) I have been able to split the form over several tabs with no problems or formatting/styling issues, so I don’t think the issue is that the tabs are breaking the form, but it looks to be more an implementation issue with how the form is added

Thread Starter Mike Seiler
(@mike-seiler)

10 years ago

Your suggestion is spot on.

Putting the <form …> tag before the first tabby shortcode and the </form> tag after the last tabby shortcode does allow the form to span multiple tabs.

Also, I code only in the “Text” tab of the WordPress TinyMCE editor. Switching to the “Visual” tab messes up my code.

Here is the working multitab form code:
http://pastebin.com/9wjGCCih
for
http://genuinemoney.us/wp/membership-account/tab-form-test/

Plugin Author cubecolour
(@numeeja)

10 years ago

I’m glad you have this working now.

I would suggest creating a simple shortcode function in a plugin (or less optimally in your theme’s functions.php) to allow you to add the

<form> & </form> tags to the page without the risk of them being stripped out accidentally.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Form formating issues’ is closed to new replies.