Jump to content


Photo
- - - - -

Bootstrap tables break the responsive layout?


This topic has been archived. This means that you cannot reply to this topic.
13 replies to this topic

#1 juliencharette

juliencharette

    Newbie

  • Members
  • 4 posts

Posted 08 August 2012 - 05:56 PM

See

Please Login or Register to see this Hidden Content

on any smartphone. It looks terrible. Bootstrap tables don't scale to screen size/break the layout? Anyone knows how to fix this? Thanks in advance.

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 08 August 2012 - 09:41 PM

I'd suggest you need the Browser Specific CSS plugin found here:

Please Login or Register to see this Hidden Content



#3 evert100

evert100

    Super Member

  • Members
  • 156 posts

Posted 08 August 2012 - 10:21 PM

I think the solution is different than Rangelone suggests. It has to do with something i've studying last couple of days. Problem is that Pagelines isn't fully compatible with Bootstrap. If i look at the code in combination with the css for tables at your website and the example in Twitter Bootstrap you see what i mean. The twitter guys make use of the file bootstrap.css This code is missing in pagelines. It would be for us users and developers much more easy, at least that's my opinion, that we can use the bootstrap code. Pagelines made some kind of re-code and as i said didn't fully integrate the twitter bootstrap. So there we are lost. The documentation of pagelines is not up to date or very limited. So there you go. The wiki is still not updated. For bootstrap we only have, as far as i know, the page

Please Login or Register to see this Hidden Content

The solution for you could be to look for the css code in bootstrap.css

Please Login or Register to see this Hidden Content

and place it in your child theme css or in the plugin for customization css as i do. A lot of work. Second remark: if i look at

Please Login or Register to see this Hidden Content

on my iphone it's doing better in responsive design but not perfect! So? Anybody ideas? Do i miss something? I like to hear the vision of the pagelines team of developers on this, because i see it more lately in the forum. Need some enlightment. Cheers, Evert

#4 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 08 August 2012 - 11:16 PM

Tables aren't responsive. We have a half-baked responsive solution on the demo, and heres a link to a few options.

Please Login or Register to see this Hidden Content

We are FULLY compatible with Bootstrap, and just because you dont' see a "bootstrap.css" doesn't mean it's not there. We're not using a "recode" as you say, we're using a LESS pre-processor, which means all of our files, are in LESS, then processed into CSS. You can find these files for yourself under /includes/less. They're all broken down into sections, then combined by the processor. So, if you decide to move bootstrap.css into your child theme, its not going to do anything. We're already using it. All of it. Nick

#5 evert100

evert100

    Super Member

  • Members
  • 156 posts

Posted 09 August 2012 - 01:41 AM

Hi beardedavenger Thanks for your answer. Your answer is very clear, but still how do you explain the difference? "Second remark: if i look at

Please Login or Register to see this Hidden Content

on my iphone it's doing better in responsive design but not perfect! So?" And still the fact is that pagelines documentation on bootstrap is little. I noticed few of us discuss with eachother to solve problems for button-modal glyphon combinations. Because the pagelines shortcodes fail. Thanks anyway, it has become clearer to me now. A little bit explanation to the more dev clients would still be nice. Idea?

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15653 posts

Posted 09 August 2012 - 08:53 AM

Hi, We appreciate this feedback and we will take on it board.

#7 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 09 August 2012 - 01:19 PM

Bootstrap site is using specific CSS for their demo to make their tables look good on mobile, and its' specific to the content they have in the tables. Just like our demo, we're also using a half-concocted solution to make it so it doesn't break. We have full documentation on Bootstrap.

Please Login or Register to see this Hidden Content

There it explains how to use the grid, gives markup for the grid, and also gives every shortcode, their atts, and how to use them.

Please Login or Register to see this Hidden Content

This goes even further, and explains how to theme with Bootstrap, and how to use them. And as if that wasnt enough, we have this:

Please Login or Register to see this Hidden Content

Which covers every variable that we use, with minor instructions on how to use them. So, I think we have a pretty exorbitant amount of information on how to use Bootstrap, not to mention the Bootstrap site itself, which also shows you how to make buttons with icons. Back to your last comment, if you stick a shortcode inside an ya it probably wont' work. You'll have to use real markup, and that's covered on the bootstrap site. If you think we're really missing information, let us know and we can fill it. But between our docs, and Boostraps, you should really have no issues.

#8 juliencharette

juliencharette

    Newbie

  • Members
  • 4 posts

Posted 09 August 2012 - 05:16 PM

Well I impressed with the quantity and quality of support you get in PageLines forums. Thanks for all the help, I will try all your suggestions.

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 09 August 2012 - 05:27 PM

Please let us know how the suggestions work out and if you need further assistance.

#10 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts

Posted 09 August 2012 - 05:50 PM

You're welcome @juliencharette - we're happy to help!

#11 juliencharette

juliencharette

    Newbie

  • Members
  • 4 posts

Posted 10 August 2012 - 04:17 PM

I tried the Zurb technique and I can't make it work. I put the javascript into Custom Code > FooterScripts Code and the css into Custom Code > CSS Rules It didn't work as expected so I took it out. Maybe I'm doing something wrong?

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 10 August 2012 - 05:24 PM

What is the Zurb technique you're referring to?

#13 juliencharette

juliencharette

    Newbie

  • Members
  • 4 posts

Posted 10 August 2012 - 07:44 PM

Please Login or Register to see this Hidden Content

it is the last technique.

#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 10 August 2012 - 08:40 PM

Julien, Honestly, I don't know much about either Bootstrap or responsive table design, but I suspect you may just need some professional help with this issue as it may be beyond the scope of my skills and that of some of my colleagues. We're just getting accustomed to dealing with it and only our developers are truly skilled with it at present. I'd suggest therefore, that you request a bid from several of our Pros at

Please Login or Register to see this Hidden Content

to help with this. Likely it's a very quick fix and I wish I knew just how to help. Eventually, I expect I will.