Problem with displaying table in Android Dolphin and Stock

Hi,

I'm testing the mobile site in my Galaxy Note 2.
http://223.130.27.20/~concept1/index.ph ... ory_id/211

Q1:
I got the problem of displaying table in Android dolphin, Android Firefox and stock Android browser.
The features of "Scroll horizontally to view the whole table" is not working properly in above 3 browsers. Therefore the whole table displays as it is and breaks the template.(see attached Q1.png)

Q1.png

Q2:
However, it displays quite ok on Android Chrome and Opera (both are Web-kit based browsers) but not very well as it should be. There is a big white gap on the right (see attached Q2.png)

Q2.png

Look forward to your prompt response.

Thanks,

Will

I have reported that to our devteam. Thanks for bug report. Ill write back as soon as there be a solution for that problem.

Thanks and look forward to your solution.

By the way, just a suggestion. It's very annoying that the forum limits the upload of image size to 680x560 (as I remember). It requires users to resize the image.

If you are afraid of big image breaking the forum template., to what I know, there are lots of plugins out there could do the auto image resize while uploading. (OR you guys also can develop one in-house)

Cheers,

Ok, the problem is in inline width that is attached to You table:

Code: Select all

<table class="product-detail-data-table" style="width: 579px; border-collapse: collapse; color: #000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 16px; line-height: 17.90625px;" summary="">


With responsive design You should never fix width of an element, instead use:

Code: Select all

table {max-width: 100%!important}


to set max-width - then table will scale to fit window width, and problem with overlaping will not occour.

Hi,

Sorry, that is my fault when I copied over from our old website.

But even though I removed that "fixed width table", it still does not fit within screen size due to not be able to load the feature "Scroll horizontally to view the whole table" (see picture Q3.png)

You can check it here http://223.130.27.20/~concept1/index.ph ... ory_id/211
OR here http://223.130.27.20/~concept1/index.php/contact-us

Thanks,

I forgot to attach picture in my previous post of Q3.png. Here it is. Below is what is expected from loading "Scroll horizontally to view the whole table"

Q3.png

You havent add this:

Code: Select all

max-width: 100%!important


style to your tables.
You can either add it to each table, or do it globally for all tables in override.css:

Code: Select all

table {max-width: 100%!important}


Thanks. It loads perfectly fine now.

However, for this link http://223.130.27.20/~concept1/index.ph ... ory_id/211 don't know why there is a big white gap on the right on Chrome and Opera but not other there browsers.

Could you please have a check for me. Thanks.

Because You havent set:

Code: Select all

max-width: 100%!important


style on that table

I do have max-width:100% important using class CSS. Please refresh your browser

I mean the big white gap on the right only occurs in Chrome and Dolphin but NOT in other browsers.

See below image.

Q2.png

Where exactly have You added that style?
I dont see it in override.css (its disabled afais)
On table element there is also no inline styling .
My developer tools also doesnt show that style on table element from above screenshot (it is added on contact site table).

I'm applying CSS class for the table with class name is "product-detail-data-table"

Old link doesnt work anymore, could You provide new one, or is the problem fixed already?

PS - where (in which file) have you declared class for table with class="product-detail-data-table"

Sorry, because I just enabled SEO of VM.

Here is the new link http://223.130.27.20/~concept1/index.ph ... -bh-detail

I declared the class in template.css

It should work well now. Please test it again on your mobile.

Ps - best way to add custom css is override.css. If You will ever want to update template, only this file will have to be backuped, if not, You will have to remember what changes was made to template css files .

Thanks, I will copy all custom CSS into override.css.

It's still the same in my Android Chrome and Opera on Galaxy Note 2.

The table is still very small like below image

Q2.png

IF YOU HAVE AN ANDROID PHONE, PLEASE CHECK IT ON YOUR PHONE.

Thanks, Will

Ok, I have reported the problem back. Waiting for info.

No there is no problem on Stock browser on Android device, here is the screenshot >> https://www.dropbox.com/s/1x7iut707uq4ujr/2013-08-19%2010.03.06.png

Sorry but Dolphin browser is not any standard and we don't support some browser which have less than 0.5% of market share.