Table element: column heading dissapears when resized - Support

Viewing 21 posts - 1 through 21 (of 21 total)

Author

Posts
January 30, 2015 at 6:50 pm #388431

axelfx07
Participant

Hey,

This is how table looks in full width: http://gyazo.com/1e8b6ec8f97dc78814a0717187504859
Now resized: http://gyazo.com/c4ab78ad68ee4c9ec5999ca87d1acea8

As you can see there is no Heading for third column. And you can’t style heading at all, they somehow become a part of the cell. Obviously its a problem, because they are a lot smaller then cell content.

Thanks

January 30, 2015 at 6:50 pm #388432

axelfx07
Participant

live: http://www.legalpanda.com.ua/test/

January 30, 2015 at 7:12 pm #388444

axelfx07
Participant

hmm, so I remade the table and now it shows the last heading. Question remains on how to make heading larger (or to keep their size unresponsive).

I have to say table element is extremely bugy. The reason I had to remake the table is because I changed a column type and couldn’t revert back.

February 2, 2015 at 3:41 am #389115

Andy
Inactive Moderator

Hi!

it’s working fine for me:

Could you fix it? which browser are you using? please clear your browser cache.

Best regards,
Andy

February 2, 2015 at 11:55 pm #389751

axelfx07
Participant

I fixed the missing header by remaking the table.

However, I can’t figure how to style the headings. As you can see from your screenshot, heading’s font-size scaled down to a point where it became smaller then a cell content

February 4, 2015 at 7:06 am #390546
Rikard
Keymaster
Hi axelfx07!

Please paste the following code to Quick CSS:
```
@media only screen and (max-width: 767px)
.responsive .avia_responsive_table .avia-data-table td:before {
font-size: 17px !important;
}
```
The previous font size was 11px, I set it to 17px. Please increase or decrease that value to achieve a larger or smaller font size. This code will only affect tablets and phones.

Regards,
Rikard
- This reply was modified 9 years, 10 months ago by Rikard.
February 4, 2015 at 10:45 am #390632

axelfx07
Participant

Hey.

I added the code, but it doesn’t work. I checked on iphone as well.

Thanks.

February 5, 2015 at 5:42 am #391065

Rikard
Keymaster

Hey!

Did you clear cache from your browser and reload? Also, did you try the code on the live site, and is it still there? I’m asking because I can’t see any custom CSS added to the table.

Best regards,
Rikard

February 6, 2015 at 12:54 am #391781

axelfx07
Participant

yeah, i did clear cache and I definitely added it to child’s css

here is a screentshot http://gyazo.com/e20cefaeff758dca1dba68d5a2071767

February 6, 2015 at 4:59 am #391825

teeramusic
Participant

http://www.teeramusic.com/recording-studio-2/
I have a similar problem, just resize it and you’ll see.

February 6, 2015 at 9:44 pm #392275
Elliott
Inactive Moderator
Hi!

@teeramusic, Instead of using strong tags try adding this to your custom CSS.
```
.avia-heading-row th {
  color: #f05a1a !important;
  font-weight: bold !important;
}
```
@axelfx07, Try this out.
```
@media only screen and (max-width: 767px) {
.responsive .avia_responsive_table .avia-data-table td:before {
  font-size: 17px !important;
}
}
```
Best regards,
Elliott
- This reply was modified 9 years, 10 months ago by Elliott.
February 6, 2015 at 10:06 pm #392290

axelfx07
Participant

Hi Elliott,

Thank you it worked!
Looks like a proper hrading now :)
http://gyazo.com/915abd06fdbd86a4a2fe326d04ae32c3

February 8, 2015 at 2:42 am #392604

teeramusic
Participant

I tried the custom CSS and it’s still not working properly. Please have another look.

February 9, 2015 at 5:57 am #392869
Rikard
Keymaster
Hey teeramusic!

Please try this:
```
@media only screen and (max-width: 767px) {
.responsive .avia_responsive_table .avia-data-table td:before {
  font-size: 17px !important;
}
}
```
Cheers!
Rikard
February 11, 2015 at 7:12 am #394139

teeramusic
Participant

Still not working properly :(

February 11, 2015 at 9:22 pm #394682

Elliott
Inactive Moderator

Hey!

@teeramusic, Take a screenshot and highlight what your trying to do so we can get a better idea.

Regards,
Elliott

February 18, 2015 at 3:18 am #397936
teeramusic
Participant
Instruments and Microphone end up getting repeated and the heading is no longer in the correct position.
- This reply was modified 9 years, 10 months ago by teeramusic.
February 18, 2015 at 7:16 pm #398397

Elliott
Inactive Moderator

Hi!

Hmm, I don’t see an easy way of going about that unfortunately. What I would do is create three tables instead of one. I think that should have the headings display in the correct positions on mobiles.

Regards,
Elliott

February 19, 2015 at 7:40 am #398683
teeramusic
Participant
Could I use javascript or CSS to fade out the current table and display a new (previously hidden) one? Could you point me in the right direction?
- This reply was modified 9 years, 10 months ago by teeramusic.
February 19, 2015 at 2:12 pm #398901

Ismael
Moderator

Hey!

Refer to these links:

https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263
https://kriesi.at/support/topic/is-there-an-option-to-create-a-separate-page-design-specific-to-mobile-devices/
https://kriesi.at/support/topic/displaying-another-slider-on-mobile-devices/
https://kriesi.at/support/topic/replace-slider-on-mobile/

This time, instead of doing it on sliders, replicate the same process to your tables. Anyway, have you tried switching the table purpose to tabular? After that, you can set the Responsive Styling to scrollable. This way it will just retain the table layout, just like on desktop view, then add a scrollbar.

Best regards,
Ismael

February 20, 2015 at 5:01 am #399442

teeramusic
Participant

Ahhh yes! Thanks :)
Author

Posts