Some controls not working in responsive

[abradley]

The CategoryMenu control does not work well in the responsive, the slide out menu part is transparent so blends in with text in the center panel. Also the slide out menu slides behind conlibs(Featured products for example) in the center column.

The Whats new conlib that was on our right column does not appear at all anymore.

[mazhar]

The CategoryMenu control does not work well in the responsive, the slide out menu part is transparent so blends in with text in the center panel. Also the slide out menu slides behind conlibs(Featured products for example) in the center column.

Please have a look at this viewtopic.php?f=65&t=18334

The Whats new conlib that was on our right column does not appear at all anymore.

[/quote]
I there any URL to have a look?

[abradley]

The CategoryMenu control does not work well in the responsive, the slide out menu part is transparent so blends in with text in the center panel. Also the slide out menu slides behind conlibs(Featured products for example) in the center column.


Please have a look at this viewtopic.php?f=65&t=18334

The CategoryMenu control slides behind center panels. It slides behind the featured product conlib as displayed in this screenshot, and also is behind the text shown above said conlib.

The What's new was a false alarm, all is well with that control.

[nadeem]

Try applying z-index to category menu contents something like this:

Code: Select all

.categoryMenu .content .ui-menu {
    z-index:10;
}

[abradley]

Try applying z-index to category menu contents something like this:

Code: Select all

.categoryMenu .content .ui-menu {
    z-index:10;
}

That works great, thanks!

See below, here is the other issue we are encountering currently with responsive. The customer initially reported it and we thought it affected Safari only. We now know that it is not browser related but has to do with the product itself.

The product has a checkbox for a kitting option that is causing this issue. We have turned back on the old theme for now until we sort out these edge cases.

[nadeem]

There are two possible workarounds to this issue.

1. You can change the product display page from default to Product Display in Rows that will fix your display issue.
2. If you don't want #1, you have to make some code and style updates to make it work correctly. Here are the changes required for the kit products only.

- Go to Website/Conlib/ProductPage.ascx, locate the following line

Code: Select all

<div class="productImageArea">

and replace with

Code: Select all

<div id="productImageContainer" class="productImageArea" runat="server">

- Now open Website/Conlib/BuyProductDialog.ascx.cs, locate the following code inside Page_Load method

Code: Select all

KitsList.DataSource = GetProductKitComponents();
KitsList.DataBind();

and replace with

Code: Select all

KitsList.DataSource = GetProductKitComponents();
KitsList.DataBind();

if (KitsList.Items.Count > 0)
{
   HtmlControl kitProductImage = PageHelper.RecursiveFindControl(this.Page, "productImageContainer") as HtmlControl;
   HtmlControl kitProductDetails = PageHelper.RecursiveFindControl(this.Page, "ProductDetailsArea") as HtmlControl;
   if (kitProductDetails != null && kitProductImage != null)
   {
      kitProductImage.Attributes["class"] = "kitProductImageArea";
      kitProductDetails.Attributes["class"] = "kitProductDetails";
   }
}

- Finally add the following styles to your theme's style sheet

Code: Select all

div.kitProductImageArea, div.kitProductDetails {
    .make-md-column(12);
}

OR

Code: Select all

div.kitProductImageArea, div.kitProductDetails {
    width:100%;
}

[abradley]

This worked out great nadeem, thanks