Responsive Tables

  • Posts: 441
  • Thank you received: 24
11 years 5 months ago #107295

it seems that tables in hikashop are not resposive
can you make something like this for next release?
mobifreaks.com/user-interface/responsive...riendly-data-tables/

Please Log in or Create an account to join the conversation.

  • Posts: 441
  • Thank you received: 24
11 years 5 months ago #107299

i found something better and get the table to be responsive with no problems.
i describe it:
you have to modify cart view in checkout
add a div before the table id="no-more-tables"
add class empty to all <td></td>
add data-title to the td you want to display with title.
finally add this css
@media only screen and (max-width: 767px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

#no-more-tables tr { border: 1px solid #ccc; }

#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}

#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}

/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
.empty {display:none !important;}

that´s how it finally shows

Attachments:
The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

  • Posts: 441
  • Thank you received: 24
11 years 5 months ago #107333

Nonetheless i´m still ahaving a lot of problems with responsive, like vote and others that does not fit the witdh, i use joomla 3, hikashop latest and yoothem templates warp 6. Any idea?

Please Log in or Create an account to join the conversation.

  • Posts: 82760
  • Thank you received: 13346
  • MODERATOR
11 years 5 months ago #107342

We've actually added new CSS in the default frontend CSS file of the latest version of HikaShop so that the votes&comments display properly on mobile devices.
Maybe you had edited the frontend CSS file of HikaShop before updating ?
I would recommend to try with the default CSS file to see if that helps.

Please Log in or Create an account to join the conversation.

  • Posts: 441
  • Thank you received: 24
11 years 5 months ago #107343

and the carrousel? i have the same problem, i have a 4 product carrousel but its not responsive anyway;

Please Log in or Create an account to join the conversation.

  • Posts: 26151
  • Thank you received: 4027
  • MODERATOR
11 years 5 months ago #107356

Hi,

The carousel system use a jQuery script and this is not a bootstrap responsive carousel.
So, this module is not responsive.

But if you want to modify the views in order to have a responsive carousel (like the bootstrap carousel), we will be hzppy to include it into HikaShop.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

Time to create page: 0.068 seconds
Powered by Kunena Forum