BASK Page Still Using Table? Cut Off in Mobile...

[mjstonez]

Hello All, I noticed that the BASK page is still using a table for basket contents. This is causing a problem for folks who are shopping on our site with a small mobile device - the table is not being responsive so half of it is being cut off, especially in vertical mode, a bit less in horizontal. This cuts off the option to increase, decrease, or remove the qty of item(s) in the basket. We are using the base readytheme. Is there a new responsive basket contents that does not use tables? and/or has anyone else had this issue and found a way to resolve it?

Thanks,
Mike

[Brennan]

Re: BASK Page Still Using Table? Cut Off in Mobile...

The default code on BASK for the base ready theme does scroll left and right if the basket contents are too large. Typically this is caused by really long product names. The page will need to be re-written to remove the table and make the layout look nicer on mobile. We'll post some code on how to do this here soon.

[Pamela Hazelton]

Re: BASK Page Still Using Table? Cut Off in Mobile...

Another option is to remove the "nowrap" on the table cell itself.

[mjstonez]

Re: BASK Page Still Using Table? Cut Off in Mobile...

Another option is to remove the "nowrap" on the table cell itself.

Hi, I don't see anywhere in this particular page code "nowrap", would it be in the css controlling the table?

Mike

[Pamela Hazelton]

Re: BASK Page Still Using Table? Cut Off in Mobile...

Hi, I don't see anywhere in this particular page code "nowrap", would it be in the css controlling the table?

Mike

Yes. All Ready Themes use CSS to control this.

[mjstonez]

Re: BASK Page Still Using Table? Cut Off in Mobile...

I have not been able to find a work around for this, I tried word-wrap: break-word; in the css and to style the div with no avail. Is there a way to maybe shorten the product name or use the product code or custom MPN instead when the device is small?

.table-responsive {
width: 100%;
word-wrap: break-word
margin-bottom: 15px;
overflow-x: hidden;
overflow-y: hidden;
border: none;
}

[jsdva]

Re: BASK Page Still Using Table? Cut Off in Mobile...

We'll post some code on how to do this here soon.

Is it soon yet, Brennan? I need this too and was hoping you have the code by now.

Thanks,

Jamie

[Bruce - PhosphorMedia]

Re: BASK Page Still Using Table? Cut Off in Mobile...

Try this:

table {
table-layout: fixed;
width: 100%
}

td {

/* css-3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;

}


Making sure the style declarations are specific to the basket page...possible appending .BASK to it but it depends on the actual markup on that page.

[SteveoSoule]

Re: BASK Page Still Using Table? Cut Off in Mobile...

The default code on BASK for the base ready theme does scroll left and right if the basket contents are too large. Typically this is caused by really long product names. The page will need to be re-written to remove the table and make the layout look nicer on mobile. We'll post some code on how to do this here soon.

Hello Jamie, here is some template code for a more responsive BASK page's Basket Contents. It has been created with Bootstrap's div column structure instead of tables: https://gist.github.com/steveosoule/...486c2c7e66058c

Also, here is a live example of it on a store: http://readytheme-framework.mivamerc...=1&Action=ADPR

That should help resolve the left/right scrolling. Please let me know if you have any issues implementing the change.

[jsdva]

Re: BASK Page Still Using Table? Cut Off in Mobile...

Hello Jamie, here is some template code for a more responsive BASK page's Basket Contents. It has been created with Bootstrap's div column structure instead of tables: https://gist.github.com/steveosoule/...486c2c7e66058c

Also, here is a live example of it on a store: http://readytheme-framework.mivamerc...=1&Action=ADPR

That should help resolve the left/right scrolling. Please let me know if you have any issues implementing the change.

Nice Steveo! Works like a charm! Thank you!

Jamie

[jsdva]

Re: BASK Page Still Using Table? Cut Off in Mobile...

Try this:

table {
table-layout: fixed;
width: 100%
}

td {

/* css-3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;

}


Making sure the style declarations are specific to the basket page...possible appending .BASK to it but it depends on the actual markup on that page.

Thanks for the tips, Bruce. Wanted to make it responsive, so Steveo's post helped with that.

Jamie

[Bruce - PhosphorMedia]

Re: BASK Page Still Using Table? Cut Off in Mobile...

Definitely better to go with a table-less table. But changing two styles is faster :)

[jsdva]

Re: BASK Page Still Using Table? Cut Off in Mobile...

Definitely better to go with a table-less table. But changing two styles is faster :)

You are so right Bruce!!

Jamie

[Scot - ScotsScripts.com]

Re: BASK Page Still Using Table? Cut Off in Mobile...

Even easier, at least in the bootstrap ready theme setup, is to take this:

<td class="name-row">

and add the style (or make a class) like this:

<td class="name-row" style="white-space: normal;">

And then if you have any issues with long option codes you can replace _ or other symbols with spaces using glosub:

&mvt:option:attr_prompt;: <mvt:eval expr="glosub(l.settings:option:opt_code,'_',' ')" />

These two things fixed the wrap issue for me in a few minutes.