Jump to content


Welcome to the forum:

Welcome to the iThemes, PluginBuddy and WebDesign.com forum. We've created several tutorial video's to help you get you started with using the forum, please check them out!

Also take note of the forum guidelines.


Support hours:

Our moderators actively respond to forum support requests during normal business hours which are Monday-Friday, 8am - 5pm Central Standard Time, typically within one business day. Although some moderators choose to work during the weekends, we can not guarantee immediate attention to your requests. Thanks for understanding.

What is included with support:

Premium support includes theme/plugin issues such as: bugs encountered under normal operation, how to use basic features, basic WordPress help, and basic help with customization (meaning we point you to resources and will help in more depth as time allows). More information.

Please Note:

The iThemes offices will be closed Thursday Nov. 27 and Friday Nov. 28 for Thanksgiving.

Support will be limited, as we allow our support staff to spend some well deserved time off with their families. The iThemes Support team wishes you a great Thanksgiving weekend.

resolved

Ui Bug: Exchange Add Membership Div/css Collision...

exchange membership user interface garbled

29 replies to this topic

#1 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 26 February 2014 - 11:22 PM

Problem: div/css formatting for membership add-on/widget is incorrect resulting in scrambled UI.  See attached graphic.

Reproducibility: 100% in configuration noted below

Configuration:
OS: Windows 7 x64
Browser: Firefox 27.0.1
Screen Resolution: 1080p
Wordpress: 3.8.1
Exchange: 1.7.16
Exchange Membership Add-On: 1.0.21

Generalized Testing:
Also occurs in IE10.0.13 v10.0.9200.16798 - so not browser-related

Steps to Reproduce:
1. Go to the WP Dashboard
2. Open Exchange/Add Membership
3. Scroll to the bottom of the page

(nothing special required)

Have at it.  ;-)

WP

Attached Thumbnails

  • exchangememberdivs.png


#2 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,876 posts
  • LocationOklahoma City, OK

Posted 27 February 2014 - 04:20 PM

Hi WP,

We've tested under the same circumstances and weren't able to replicate the issue.  An update of Membership was released today, so you might try updating and see if that makes any difference.

Let us know if you continue to have this issue.

Thanks,

Elise

#3 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 27 February 2014 - 06:09 PM

Hi -

OK. I saw an Exchange update come through, but that didn't solve the problem. I will watch for a member plugin update - not pushed yet, or was it the earlier main Exchange update that you were referring to?

Also, can you please post a picture of how it is supposed to look? That would help me, and if I have time, I will look to see why the css is screwed up.

Thanks.

- WP

ps. The forum needs a reply button at the bottom of the page.

#4 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,876 posts
  • LocationOklahoma City, OK

Posted 27 February 2014 - 06:15 PM

Hi WP,

You said you were running version 1.0.21 of the Membership add-on; the most recent version is 1.1.1.  If you're not seeing an update available in your dashboard, you can try downloading it from your iThemes Member Panel and re-install the newer version.  

Thanks,

Elise

#5 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 27 February 2014 - 09:07 PM

OK - I will manually install it.  No problem. Thx.

However, the failure to push to my install might imply that there's another problem, since the plugin is not indicating that an update is available. Does it have to be listed on wordpress.org, or can you hook directly into an update filter? I thought that it was possible even without being listed.

Note that Recurring Payments plugin appears to have the same issue. My installed version is 1.0.16, the latest version is 1.0.17 and the update is not showing up for me.

Other plugins like BackupBuddy and Exchange seem to update just fine.

Regards - WP

#6 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 27 February 2014 - 09:38 PM

Hi Elise -

I deleted the old Membership Add-On and manually installed new version, but it didn't fix the problem. Can you post a screen-shot of what that area of the Membership plugin is supposed to look like when the divs are positioned correctly?

Also, while looking at my downloads section on ithemes.com for the other plugins, it looks like the main Exchange plugin has vanished again (a problem that someone previously fixed).

Regards,

WP

#7 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,876 posts
  • LocationOklahoma City, OK

Posted 28 February 2014 - 10:26 AM

Hi WP,

Exchange isn't (and never has been) in your iThemes Dashboard.  It is only available from the WordPress Plugin Repository.  

Since Exchange is only available on the WordPress Repo, there is no license, which could be why you were seeing an update available for Exchange, but not the others.  Have you licensed the Membership and Recurring Payment plugins on your site?  I didn't have any issue updating, nor have I had any reports from anyone else about having problems updating.  So check to make sure that they're licensed

Here are the screenshots for you:

Advanced Options.png

Advanced Options 2.png

Thanks,

Elise

#8 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 28 February 2014 - 02:39 PM

Hi Elise -

Thanks for your reply.

I guess I was thinking of the "Customer Pricing" add-on that didn't initially appear in my list, rather than the main Exchange plugin.  Sorry - momentarily confused.

For the update issue, the licensing is a good point - didn't think of that one.  So, I will try to make sure everything is licensed. It will probably work fine after I do that. Feel free to yell RTFM any time!  ^_^

So...that just leaves the UI formatting/css issue.  Thanks for posting the screenshots.  That helps.  I will try to figure out what's going on in my install and report back.  It could be a plugin conflict / css collision, but that will take more work to track down.

Regards,

WP

#9 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,876 posts
  • LocationOklahoma City, OK

Posted 28 February 2014 - 02:49 PM

Hey WP,

Don't worry, you're not the only one who has been confused by Exchange not being in their dashboard!  :)

I understand testing for a plugin conflict can take some time, so just let us know what you find when you're done.  And, if you have any trouble with your licensing, you can post in the Licensing Issues forum.  

Thanks,

Elise

#10 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 28 February 2014 - 04:35 PM

Hi Elise,

I think I've ruled out all plugins that could potentially cause a conflict.  I hope I don't have to do too much plugin re-setup.  The 2 that concerned me the most were Advanced Custom Fields and Gravity Forms (especially since GF was adding a forms tag to the text area).  But, disabling those didn't fix the problem. The only one I am not willing to disable is WP-United, because it was an incredible hassle to set up and update and it is working properly (and explicitly warns not to disable it once the it is integrated/working).  But, I don't think it's responsible for the problem.

From what I can tell, it just looks like there might be some incorrect css assumptions in the Exchange css for the Advanced Tab Nav @ /plugins/ithemes-exchange/lib/admin/styles/add-edit-product.css

I took a quick look at the css and it seemed that it was loading OK, but just not working as intended based on the screenshot you provided vs. what was happening in my system.  See attached screenshot of the now working css.  It didn't take much to fix, and, while I don't claim to be a css expert, the incorrect behavior I saw seemed to match the css in add-edit-product.css.

Based on my fix, below is a short list of observations or maybe questions, depending on your perspective, for review by your engineering team. All I can report is that, in my configuration, these changes fix the problem.

1. it-exchange-advanced-tabs (red border area in my pic) needs a min-width, since both contained areas are defined as % and are dynamic.  Further, it doesn't make sense to crush the content down to nothing.  I used 600px based on measuring the min typical advanced edit box size.
2. I changed the proportion of .ui-tabs-nav and .ui-tabs-panel to 30/70 instead of 20/80. 20% seemed to be too small to me.
3. To prevent the text from being overlapped as in my original image above, I set a min-width on .ui-tabs-nav of 175px. It doesn't really change anything re: responsive (since at min window width the advanced box looks mostly the same) and responsive may be somewhat moot anyway.
4. either float: left/float: right on ui-tabs-panel is probably OK. mine is now float:left and works.  Either way, I guess.
5. OK...now to fix the fact that the nav fields auto-size to fit the text instead of the nav area: .ui-state-default should have width: 100% to make sure that the field is the same width as the nav area no matter what the text/label width might be.
6. Similarly, the hovers need width: 100% to make sure that the highlight is the entire width and not just the width of the text.  Specifically: .ui-state-default a:hover and .ui-state-active a:hover
7. In my working example image, the text size of the nav items is set to 11px.  (.ui-tabs-nav)
The biggest issue was the fact that the nav area was not actually being properly contained, and if I stretched the window, the nav fields would start realigning to be on the same row.

Sooo...the css for the Membership plugin (which is actually in the main Exchange css lib) appears to be problematic and may deserve a look.  My changes above may not be ideal, but potentially point to some basic issues in the current implementation or areas where it could be more bullet-proof.

I hope this info helps. I could find no explanation for why it wasn't working other than the css issues above.

Regards,

WP

ps. Just looked at it one last time after removing the color outlines, and it's still not quite right, but good enough for now, I guess, with the hopes that the above might lead to something that would fix the issue on my system.

Attached Thumbnails

  • exchangecss.png


#11 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 07 March 2014 - 10:39 AM

Also - just noticed that the content area may have an issue with the "TinyMCE Advanced" plugin. In my version above, the TMCE add-on tool rows are not properly contained, but not sure if that is because of changes I made or not. It's probably worth adding as a test case for things that attempt to modify the post area/tools.

#12 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 19 March 2014 - 10:01 AM

Hi -

Just updated to the new version of Exchange (1.7.19) and the css problem above has recurred (not fixed).  I guess I will have to re-fix it in my install.  Wish you could have addressed this issue with the update. Also, in the attached screenshot, you can see the problem with TinyMCE Advanced.  It would be great if you could make the css a little more robust/compatible.

Regards,

WP

Attached Thumbnails

  • exchangebug.png


#13 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 19 March 2014 - 10:48 AM

Here is the fixed version with TinyMCE Advanced.

Had to change default width to 900px.  Also, with nav font size of 11px, The original 20/80 is actually better than 30/70.  Note that one of the problems is that exchange is relying on the font-size being correct and there is no specification for font-size in ui-tabs-nav.  I had to add it.

Regards,

WP

Attached Thumbnails

  • exchangefixed.png


#14 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 21 March 2014 - 01:19 PM

Hi -

Attached is how it looks in today's 1.7.20 upgrade. It's better, but still looks like it needs some additional fixes. Specifically, the nav should probably have a min width. It should never collapse over the nav items and the nav background doesn't seem to be working.

Regards,

WP

ps. Is there a change history somewhere? I didn't see it on the update details link.

edit: meant to say min width, not fixed width

Attached Thumbnails

  • exchange-addmembership-1.7.20.png


#15 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 22 March 2014 - 06:56 AM

Below is the css for the Advanced section in /plugins/ithemes-exchange/lib/admin/add-edit-product.css that fixes the admin formatting bug.  It looks the same on Opera, Firefox, and IE.  When you do another update, it would be great if you could fix this issue. Attached is the image of the fixed view. Hope this helps.

Regards,  WP

/** -----------------------------------------------------:[ advanced ]:---------- */
.js #it_exchange_advanced-sortables .postbox{display:none;}
#it-exchange-advanced-tabs{margin-top: 10px;background:#F5F5F5;border-radius:4px;border:1px solid #DEDEDE;min-width:900px;}
#it-exchange-advanced-tabs:after{content:' ';display:block;clear:both;visibility:hidden;line-height:0;height:0;}
#it-exchange-advanced-tabs .ui-tabs-nav{float:left;width:20%;font-size:11px;min-width:175px;background:#F5F5F5;}
#it-exchange-advanced-tabs .ui-tabs-panel{float:right;width:80%;border-left:1px solid #DEDEDE;border-radius:0 4px 4px 0;padding:3px;}
#it-exchange-advanced-tabs .ui-tabs-panel .inner{padding:10px;background:#FFF;border-radius:0 4px 4px 0;}
#it-exchange-advanced-tabs .ui-tabs-panel .inner > *:first-child{margin-top:0;padding-top:0;}
#it-exchange-advanced-tabs .ui-tabs-panel .inner textarea{width:100%;}
#it-exchange-advanced-tabs #it-exchange-product-purchase-quantity input[type="text"]{display:block;margin-top:1em;}
#it-exchange-advanced-tabs input[type="text"],
#it-exchange-advanced-tabs input[type="email"],
#it-exchange-advanced-tabs input[type="password"],
#it-exchange-advanced-tabs input[type="number"],
#it-exchange-advanced-tabs textarea{background:#fff;border:1px solid #d6d6d6;border-radius:3px;font-size:18px;padding:10px;color:#3d4142;width:260px;}
#it-exchange-advanced-tabs input[type="text"]:focus,
#it-exchange-advanced-tabs input[type="email"]:focus,
#it-exchange-advanced-tabs input[type="password"]:focus,
#it-exchange-advanced-tabs input[type="number"]:focus,
#it-exchange-advanced-tabs textarea:focus{outline:none;border:1px solid #c9c9c9;border-bottom-color:#aaaaaa;}

#it-exchange-advanced-tab-nav .ui-state-default{outline:none;margin-bottom:0;border-width:1px 0 1px;border-style:solid;border-color:transparent;min-width:175px;}
#it-exchange-advanced-tab-nav .ui-state-default:first-child{border-top:0;border-radius:4px 0 0 0;}
#it-exchange-advanced-tab-nav .ui-state-default:last-child{border-bottom:0;border-radius:0 0 0 4px;}
#it-exchange-advanced-tab-nav .ui-state-default a{outline:none;padding:10px;display:block;text-decoration:none;color:#747474;-webkit-transition:background .2s linear;transition:background .2s linear;}
#it-exchange-advanced-tab-nav .ui-state-default a:hover{background:#EEE;min-width:175px;}
#it-exchange-advanced-tab-nav .ui-state-active{position:relative;margin-right:-2px;background:#FFF;border-color:#DEDEDE;}
#it-exchange-advanced-tab-nav .ui-state-active a:hover{background:#FFF;min-width:175px;}

Attached Thumbnails

  • exchange-finalcss.png


#16 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 27 March 2014 - 10:21 AM

2 more updates for Exchange / Membership and the layout is still broken. Has this bug made it into the active bug database? It should hopefully be simple to resolve.

I guess I will just keep re-pasting my css fix after the iThemes updates that keep breaking it again, but it's kind of a pain after multiple iterations. The css appears to have no control for certain aspects of the design as shown above and the current design assumptions are obviously not working as intended. If you feel that the screenshots I am posting do not represent a bug, then I would appreciate an explanation as to how the layout is being controlled, since the definitions seem to be absent in Exchange. If I'm missing something, I'll be happy to look further on my side if it will help.

It would be great if someone could post an update and/or reply to my direct message in a spare moment, but I realize this is a lower priority UI issue and not a blocker.

Thanks - WP

Note that the attached image is how the Advanced section looks in its default state after today's updates to Exchange & Membership.

Also - I will add that when update notifications show for plugins like Exchange and the Membership plugin, the links to the changelogs are either just a generic feature page in the case of Exchange or a broken link in the case of the Membership plugin. It would be great if you could actually link both of them to a meaningful plugin change history so that users can see what actually changed in the updated version.

Attached Thumbnails

  • exchange-membership-1.7.23&1.1.2.png


#17 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,876 posts
  • LocationOklahoma City, OK

Posted 01 April 2014 - 03:51 PM

Hi WP,

Unfortunately, we can't replicate the issue, making it hard to correct or even definitely call it a bug.

However, I was just helping someone else with a completely separate issue and noticed that their Advanced Options area appears as your screenshots do.  I was testing for a plugin conflict for the other issue anyway and noticed when I deactivated all of their plugins the issue went away.  On their site, the plugin causing this was the Facebook Members by Crunchify.  

You said previously, "I think I've ruled out all plugins that could potentially cause a conflict."  But have you actually tested all of your plugins?  The Facebook Members plugin wouldn't have been my first guess for the plugin causing the issue, but deactivating that plugin solved it.

I know it's a pain, but can you test all of your plugins to see if one of them is causing this?  Or do you also have the Facebook Members plugin installed on your site?

As for the CSS that you're adding to correct the issue yourself - where are you adding it?  If adding it directly to Exchange, it's going to be overwritten anytime there is an Exchange update.  What you'll want to do is create a style.css file and add it to an "exchange" directory in your theme.  See this codex article for more details:  http://ithemes.com/codex/page/Exchange_FAQs:_How_Do_I_Create_Custom_Styles_for_Exchange

Let me know how testing goes.

Thanks,

Elise

#18 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 02 April 2014 - 09:49 AM

Hi Elise -

Thanks for the reply.  Here are responses to your questions:
1. I am not using Crunchify
2. I disabled everything except WP-United, which I cannot/will not disable. It was too hard to configure and disabling it would cause too much havoc.  Also, as above, I have debugged the problem to the point of incorrect CSS design assumptions/implementation in Exchange as noted above.
3. The Exchange CSS file causing the problem is: /plugins/ithemes-exchange/lib/admin/add-edit-product.css ([advanced section])
4. I do not believe it is necessary to explicitly reproduce this problem to fix it and would suggest a proactive engineering review effort, rather than one where there is push-back on QA/support for the reproducible case (but you also technically have it now with Crunchify). To me, it appears that Exchange has been "getting lucky" on the CSS formatting for the Advanced section. The CSS file in question doesn't have the necessary/appropriate fields in its classes to correctly control the intended display behavior of the Advanced section. Also, the responsive design assumptions don't make any sense and/or are incompatible with other plugins like TinyMCE, etc.  See my previous graphics.
5. So, the best way to fix this problem might be to have one of the web designers look at the implementation of the css vs. classes in the markup and fix the advanced CSS so that it displays properly under all circumstances. The easiest way to ensure that the CSS is correct might be to isolate the specific page component as a micro-project and make sure all the markup and classes do what is intended (or use Crunchify as a development catalyst).  In my debugging (as in the above graphics), I saw no problem in correcting the display output with the Advanced section CSS classes once they had appropriate fields. So, the problem is not a case of the Advanced CSS not loading properly - it appears not to be correct and the related design assumptions about how the nav and content entry area should draw appear to need additional consideration.

I hope this information is helpful. Thanks for looking into it.

Regards,

WP

#19 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 03 April 2014 - 09:49 PM

Not fixed in today's update. Also, still no valid change history link.

#20 WildPlatypus

WildPlatypus

    Advanced Member

  • Members
  • Others: Toolkit Educator Edition
  • PipPipPip
  • 49 posts
  • LocationCalifornia

Posted 09 April 2014 - 02:08 PM

Has this issue been written up as a bug yet and is it being reviewed by engineering for a future build?  Thanks. WP



Reply to this Topic


ATTENTION
If this topic is marked RESOLVED or INFORMATION, or if you are NOT experiencing EXACTLY the same issue, please start a new topic to provide the details of your problem. If the solution provided doesn't work for you, you should start a new topic. If you feel this thread contains relevant information, you may include a link to it in your new topic. To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. When posting your question or request on the forum, please be as concise and specific as possible. The shorter and more to the point you can make your request, the better.

For BackupBuddy related issues, be sure to include the status log from your most recent backup.

CLICK HERE to start a new topic in the Exchange ecommerce plugin forum.


  



Also tagged with one or more of these keywords: resolved, exchange, membership, user interface, garbled

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users