OFBiz
  1. OFBiz
  2. OFBIZ-3037 Issues in eCommerce Layout
  3. OFBIZ-2602

Main storefront page, Featured Products (middle column) overwrites right column. Should just crop column, but not overwrite right column.

    Details

    • Type: Sub-task Sub-task
    • Status: Reopened
    • Priority: Major Major
    • Resolution: Unresolved
    • Affects Version/s: Release Branch 09.04, SVN trunk
    • Component/s: None
    • Labels:
      None
    • Environment:

      Description

      To fix this, add the following line to the ecommain.css:
      OLD version:
      #ecom-mainarea .center

      { margin-left:201px; margin-right:261px; voice-family:inherit; }

      NEW version
      #ecom-mainarea .center

      { margin-left:201px; margin-right:261px; overflow:hidden; voice-family:inherit; }

      This will force any overflow to be cropped.

      1. ecommain.css.patch
        0.4 kB
        Ruth Hoffman
      2. ProductGrid.patch
        3 kB
        Scott Gray

        Issue Links

          Activity

          Hide
          Jacques Le Roux added a comment -

          Yes Bruno,

          It's the same issue than I reported when using numCol=1. Looks like a CSS issue introduced since the old layout (1 product per row) has been replaced

          Show
          Jacques Le Roux added a comment - Yes Bruno, It's the same issue than I reported when using numCol=1. Looks like a CSS issue introduced since the old layout (1 product per row) has been replaced
          Hide
          Bruno Busco added a comment -

          Unfortunately in the one product per row mode another layout issue is present.
          Onlly the first product is in the correct place while all other are below the left column.

          Show
          Bruno Busco added a comment - Unfortunately in the one product per row mode another layout issue is present. Onlly the first product is in the correct place while all other are below the left column.
          Hide
          Bruno Busco added a comment -

          Moreover the one product per row is still possible and user activable.
          Simply go to
          https://localhost:8443/catalog/control/EditCategory?productCategoryId=PROMOTIONS
          and empty the "Detail Screen" field.

          Show
          Bruno Busco added a comment - Moreover the one product per row is still possible and user activable. Simply go to https://localhost:8443/catalog/control/EditCategory?productCategoryId=PROMOTIONS and empty the "Detail Screen" field.
          Hide
          Bruno Busco added a comment -

          Scott,
          I have tested your patch.
          I think it could be OK.
          On a line appears as many products as can fit,
          When changing the browser window width the number of products on a row dinamically change.
          Bingo!

          Show
          Bruno Busco added a comment - Scott, I have tested your patch. I think it could be OK. On a line appears as many products as can fit, When changing the browser window width the number of products on a row dinamically change. Bingo!
          Hide
          Scott Gray added a comment -

          Try this out on your browser and let me know what you think

          Show
          Scott Gray added a comment - Try this out on your browser and let me know what you think
          Hide
          Bruno Busco added a comment -

          If you select the multiflex theme (a fixed with theme) it looks ok.

          Show
          Bruno Busco added a comment - If you select the multiflex theme (a fixed with theme) it looks ok.
          Hide
          Jacques Le Roux added a comment -

          Ruth,

          I agree and if nobody tackles this problem in the week I will revert. But maybe it's not much in the numCol=1 case and we could fix it, to keep this feature on hand

          Show
          Jacques Le Roux added a comment - Ruth, I agree and if nobody tackles this problem in the week I will revert. But maybe it's not much in the numCol=1 case and we could fix it, to keep this feature on hand
          Hide
          Ruth Hoffman added a comment -

          That tells me that the screen "numCol" feature is broken as well as the matrix layout. Wouldn't you agree? If not, what was the original intent of the numCol field?
          Given that it is now generally acknowledged that the 3x3 matrix rendering is broken and that the original code to build the 3x3 matrix is broken, and that no one is able or has the time to fix this, could we revert back to the rendering in the 4.x version. At least that worked.

          Show
          Ruth Hoffman added a comment - That tells me that the screen "numCol" feature is broken as well as the matrix layout. Wouldn't you agree? If not, what was the original intent of the numCol field? Given that it is now generally acknowledged that the 3x3 matrix rendering is broken and that the original code to build the 3x3 matrix is broken, and that no one is able or has the time to fix this, could we revert back to the rendering in the 4.x version. At least that worked.
          Hide
          Jacques Le Roux added a comment -

          I tried to change numCol value to 1 in

          <screen name="categorydetailmatrix">
                  <section>
                      <actions>
                          <set field="numCol" value="3"/>
          

          but on XP with FF 3.5, Opera, Chrome, IE8 and Safari, I got same issue: the 1st product is shown at the right place but the others are under the last element of the left column. I guess it's only a small change in CSS but I don't have time for that for the moment...

          Show
          Jacques Le Roux added a comment - I tried to change numCol value to 1 in <screen name= "categorydetailmatrix" > <section> <actions> <set field= "numCol" value= "3" /> but on XP with FF 3.5, Opera, Chrome, IE8 and Safari, I got same issue: the 1st product is shown at the right place but the others are under the last element of the left column. I guess it's only a small change in CSS but I don't have time for that for the moment...
          Hide
          Scott Gray added a comment -

          all that needs to be done is to remove the table and add a float left property to the product box, the products will then fit themselves into as many columns as the screen width allows for.

          Show
          Scott Gray added a comment - all that needs to be done is to remove the table and add a float left property to the product box, the products will then fit themselves into as many columns as the screen width allows for.
          Hide
          Jacques Le Roux added a comment -

          Actually it's an old problem, I saw when commiting, but it seems that noboby has a better solution for now. So I also wonder now if we should not revert...

          Show
          Jacques Le Roux added a comment - Actually it's an old problem, I saw when commiting, but it seems that noboby has a better solution for now. So I also wonder now if we should not revert...
          Hide
          Ruth Hoffman added a comment -

          Agreed. You could make the page wider, but then that doesn't always work either. If you make the page wider you risk loosing the entire right column to resizing. I suppose then you could also "request" that the browser not resize, but that is no guarantee.

          IMHO, this layout should be reverted back to the rev 4.x pattern of one product per "line" until someone commits to doing the design and CSS correctly for a fluid 3 column layout. (if that is, in fact the effect the original change was trying to achieve). Anything less is sloppy and not befitting the project.

          Just my 2 cents.

          Ruth

          Show
          Ruth Hoffman added a comment - Agreed. You could make the page wider, but then that doesn't always work either. If you make the page wider you risk loosing the entire right column to resizing. I suppose then you could also "request" that the browser not resize, but that is no guarantee. IMHO, this layout should be reverted back to the rev 4.x pattern of one product per "line" until someone commits to doing the design and CSS correctly for a fluid 3 column layout. (if that is, in fact the effect the original change was trying to achieve). Anything less is sloppy and not befitting the project. Just my 2 cents. Ruth
          Hide
          Jacques Le Roux added a comment -

          Scott's comment on dev ML

          Personally though I don't think cropping the product grid is the right
          way to go, the page should simply be made wider to accommodate
          everything. The customer would have a pretty strange shopping
          experience if 1/3 of the products are missing...

          Show
          Jacques Le Roux added a comment - Scott's comment on dev ML Personally though I don't think cropping the product grid is the right way to go, the page should simply be made wider to accommodate everything. The customer would have a pretty strange shopping experience if 1/3 of the products are missing...
          Hide
          Scott Gray added a comment -

          Reopening since Jacques has reverted the commits due to my reporting of it causing problems for Safari (4.0.3 on Mac OSX)

          Show
          Scott Gray added a comment - Reopening since Jacques has reverted the commits due to my reporting of it causing problems for Safari (4.0.3 on Mac OSX)
          Hide
          Jacques Le Roux added a comment -

          Thanks Ruth,

          Your patch is in trunk at r811419 , R9.04 at r811429

          Show
          Jacques Le Roux added a comment - Thanks Ruth, Your patch is in trunk at r811419 , R9.04 at r811429
          Hide
          BJ Freeman added a comment -

          Looks good
          a suggestion for future patches is to put the Jira number on the patch file name.
          but no need to do that for this one.
          thanks for all your effort.

          Show
          BJ Freeman added a comment - Looks good a suggestion for future patches is to put the Jira number on the patch file name. but no need to do that for this one. thanks for all your effort.
          Hide
          Ruth Hoffman added a comment -

          This is the real patch file.
          From svn diff command.

          Show
          Ruth Hoffman added a comment - This is the real patch file. From svn diff command.
          Hide
          Ruth Hoffman added a comment -

          See if this is any better as a patch file? From svn diff command.

          Show
          Ruth Hoffman added a comment - See if this is any better as a patch file? From svn diff command.
          Hide
          BJ Freeman added a comment -

          in the link I gave you is steps to create a patch.
          you use the SVn commands.

          thanks for the effort

          Show
          BJ Freeman added a comment - in the link I gave you is steps to create a patch. you use the SVn commands. thanks for the effort
          Hide
          Ruth Hoffman added a comment -

          In ecommain.css:
          Remove lines 310 - 314 and insert the contents of ecommain.css.patch

          This should replace the existing #ecom-mainarea .center style with a new style that includes the following line:

          overflow: hidden

          Thanks

          Show
          Ruth Hoffman added a comment - In ecommain.css: Remove lines 310 - 314 and insert the contents of ecommain.css.patch This should replace the existing #ecom-mainarea .center style with a new style that includes the following line: overflow: hidden Thanks
          Hide
          BJ Freeman added a comment -

          ruth if you could make this a patch
          http://docs.ofbiz.org/display/OFBADMIN/OFBiz+Contributors+Best+Practices
          otherwise the commiters have extra work on a volunteer group that does a lot.

          Show
          BJ Freeman added a comment - ruth if you could make this a patch http://docs.ofbiz.org/display/OFBADMIN/OFBiz+Contributors+Best+Practices otherwise the commiters have extra work on a volunteer group that does a lot.

            People

            • Assignee:
              Scott Gray
              Reporter:
              Ruth Hoffman
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:

                Development