Scroll Horizontally to view hole table

Support desk for Multipurpose Quark Theme
GK User
Sat May 30, 2015 3:39 pm
Hi Guys,

I recently install Kunena forum in my site with an excellent custom theme and work great!

Just I have an little issue: when I open my forum in a mobile can't see 100% width of my component, and I have the following message:

"Scroll Horizontally to view hole table"
How can I change the table display mode?

Regards
User avatar
Gold Boarder

GK User
Sun May 31, 2015 9:18 am
This is a feature allowing to view wide tables on a small device. Please search forum because there already was a topic on how to disable this feature.
User avatar
Moderator

GK User
Sun May 31, 2015 11:27 am
Thank you for your response,

Can't found the topic :(

Can you help me please??

This is very important!

Thanks dude
User avatar
Gold Boarder

GK User
Mon Jun 01, 2015 4:13 pm
Hmm...
Could you please post an url to your site?
User avatar
Moderator

GK User
Mon Dec 21, 2015 8:41 pm
How is this fixed?
User avatar
Gold Boarder

GK User
Wed Dec 23, 2015 9:06 pm
@ancadia didnt reply, so please post a link to your site.
User avatar
Moderator

GK User
Wed Dec 23, 2015 9:40 pm
User avatar
Gold Boarder

GK User
Wed Dec 23, 2015 9:44 pm
There are no tables on your homepage. Could you please be more specific?
User avatar
Moderator

GK User
Wed Dec 23, 2015 9:57 pm
The table in the shopping cart that shows the information of the order. It doesnt take the up the entire area on mobile devices. The device needs to be turned in landscape view but my client needs it to show the entire table when your phone is turned vertical.
User avatar
Gold Boarder

GK User
Sun Dec 27, 2015 7:25 pm
Please advice me step by step what to do to reproduce this issue.
User avatar
Moderator

GK User
Sun Dec 27, 2015 7:27 pm
well my cart is broken after updating to VM 3.0.12, but to replicate this issue. Go to www.pinkchella.com from a phone , add a product to the shopping cart and then look at the details of your order. You need to scroll horizontally rather than everything being displayed for you.
User avatar
Gold Boarder

GK User
Sun Dec 27, 2015 7:49 pm
Firstly please disable css/js compression.
User avatar
Moderator

GK User
Sun Dec 27, 2015 7:52 pm
done..disabled css compression.. js compression was already disabled
User avatar
Gold Boarder

GK User
Sun Dec 27, 2015 8:08 pm
Now, please write back as soon as you will have this backup up and running. We will talk in different threads about different issues but they should all correspond to a same installation.
User avatar
Moderator

GK User
Tue Dec 29, 2015 6:47 pm
Cyberek wrote:Now, please write back as soon as you will have this backup up and running. We will talk in different threads about different issues but they should all correspond to a same installation.



is there any way to make this table more mobile friendly?
User avatar
Gold Boarder

GK User
Thu Dec 31, 2015 11:34 am
What is the current site url (working version)?
User avatar
Moderator

GK User
Thu Dec 31, 2015 12:38 pm
User avatar
Gold Boarder

GK User
Thu Dec 31, 2015 2:01 pm
There is no table element on homepage, could you please provide url to a specific page?
User avatar
Moderator

GK User
Thu Dec 31, 2015 2:07 pm
User avatar
Gold Boarder

GK User
Thu Dec 31, 2015 2:53 pm
Please remove this code:
Code: Select all
/* Fix for tables */
fieldset {
   box-sizing: border-box!important;
   max-width: 100%!important;
   width: 100%!important;
   overflow: hidden;
}
#gkMainbody table:before {
   content: "Scroll horizontally to view the whole table";
   height: 14px;
   width: 100%;
   display: block;
   font-size: 10px;
   margin-top: -30px;
   margin-bottom: 10px;
   font-family: Arial, sans-serif;
}
#gkMainbody table {
   width: 540px!important;
   display: block!important;
   padding: 30px 0 20px 0; /* padding for the scrollbars and the top message */
   overflow:scroll;
   -webkit-overflow-scrolling:touch;
}
#gkMainbody table tbody,
#gkMainbody table thead,
#gkMainbody table tfoot {
   width: 540px!important;
   display: table;
}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: 320px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: 640px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (min-device-pixel-ratio: 2) {
   #gkMainbody table {
      width: 260px!important;
   }
}

@media only screen and (max-width: 480px) and (orientation:landscape), only screen and (max-device-width: 480px) and (-moz-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (-o-max-device-pixel-ratio: 1.5/1) and (orientation:landscape), only screen  and (max-device-width: 480px) and (-webkit-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 960px) and (-moz-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:landscape), only screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (min-device-pixel-ratio: 2) and (orientation:landscape) {
   #gkMainbody table {
      width: 420px!important;
   }
}


from templates/gk_instyle/css/mobile.css file.
User avatar
Moderator

GK User
Thu Dec 31, 2015 4:37 pm
Cyberek wrote:Please remove this code:
Code: Select all
/* Fix for tables */
fieldset {
   box-sizing: border-box!important;
   max-width: 100%!important;
   width: 100%!important;
   overflow: hidden;
}
#gkMainbody table:before {
   content: "Scroll horizontally to view the whole table";
   height: 14px;
   width: 100%;
   display: block;
   font-size: 10px;
   margin-top: -30px;
   margin-bottom: 10px;
   font-family: Arial, sans-serif;
}
#gkMainbody table {
   width: 540px!important;
   display: block!important;
   padding: 30px 0 20px 0; /* padding for the scrollbars and the top message */
   overflow:scroll;
   -webkit-overflow-scrolling:touch;
}
#gkMainbody table tbody,
#gkMainbody table thead,
#gkMainbody table tfoot {
   width: 540px!important;
   display: table;
}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: 320px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: 640px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (min-device-pixel-ratio: 2) {
   #gkMainbody table {
      width: 260px!important;
   }
}

@media only screen and (max-width: 480px) and (orientation:landscape), only screen and (max-device-width: 480px) and (-moz-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (-o-max-device-pixel-ratio: 1.5/1) and (orientation:landscape), only screen  and (max-device-width: 480px) and (-webkit-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 960px) and (-moz-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:landscape), only screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (min-device-pixel-ratio: 2) and (orientation:landscape) {
   #gkMainbody table {
      width: 420px!important;
   }
}


from templates/gk_instyle/css/mobile.css file.



This sort of worked but it did not show all the data in the table when vertical. You are great!
This bit of code input in an override solved my problem:

@media only screen and (max-width:600px) {
#gkMainbody table::before {
display: none;
}

#gkMainbody fieldset {
width: 100% !Important;
}
}

Thanks so much. GavickPro has the best support. Can't wait to get more templates! I'm not going anywhere.
User avatar
Gold Boarder

GK User
Thu Dec 31, 2015 5:35 pm
Thanks for words of appreciation and Happy New Year :).
User avatar
Moderator


cron