Bootstrap tables break the responsive layout?
13 replies to this topic
Posted 08 August 2012 - 05:56 PM
Seeon 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.
Posted 08 August 2012 - 09:41 PM
I'd suggest you need the Browser Specific CSS plugin found here:
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 pageThe solution for you could be to look for the css code in bootstrap.css 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 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
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.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
- stillcreek likes this
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 aton 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?
Posted 09 August 2012 - 08:53 AM
Hi, We appreciate this feedback and we will take on it board.
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.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. 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: 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.
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.
Posted 09 August 2012 - 05:27 PM
Please let us know how the suggestions work out and if you need further assistance.
Posted 10 August 2012 - 04:17 PM
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 atto help with this. Likely it's a very quick fix and I wish I knew just how to help. Eventually, I expect I will.