Solved

bootstrap css bug on mobile

Posted on 2014-03-27
9
366 Views
Last Modified: 2014-03-27
Hi all, the following link is to a work in progress website http://www.klima.co.nz/dev3/Benifits-FAQ

I have come across a bug with the data-toggle collapse action (only evident when viewed on ipad or other such mobile device). The bug can be seen on the accordion open and close action and the nav collapse button.

Essentially rather than smoothly do its thing I get an open, jerky close then open again.

I am sure it has to do with the collapse in, collapse, and collapsing styles.
Appreciate assistance as I cant see the wood for the trees.
Cheers,
N
0
Comment
Question by:Neil_Bradley
  • 5
  • 4
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39958223
I am going to check this out on my tablet.  But first...

Is there a reason you are using the old version of bootstrap and not the newest?  I do think changing is good as the way things work is a lot better.  However, you do have to change your classes like span6 to col-md-6.

Beyond that, there are a few errors that can come into play.  http://validator.w3.org/check?uri=http%3A%2F%2Fwww.klima.co.nz%2Fdev3%2FBenifits-FAQ&charset=%28detect+automatically%29&doctype=Inline&group=0 It is a small amount of errors, but items that could make a difference.
 Line 44, Column 124: Bad value http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic|Fjalla+One for attribute href on element link: Illegal character in query: not a URL code point.
…?family=PT+Sans:400,700,400italic|Fjalla+One' rel='stylesheet' type='text/css'>
Syntax of IRI reference:
Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.
Error Line 94, Column 125: Element hgroup not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
…go.svg" alt="Klima logo"> </a> <hgroup><h1>Benifits - FAQ</h1><span><i class="…
Content model for element div:
Flow content.
Error Line 94, Column 125: The hgroup element is obsolete. To mark up subheadings, consider either just putting the subheading into a p element after the h1-h6 element containing the main heading, or else putting the subheading directly within the h1-h6 element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a span class="subheading" element with differentiated styling. To group headings and subheadings, alternative titles, or taglines, consider using the header or div elements.
…go.svg" alt="Klima logo"> </a> <hgroup><h1>Benifits - FAQ</h1><span><i class="…
¿
Error Line 210, Column 114: Bad value tooltip for attribute rel on element a: The string tooltip is not a registered keyword. The string tooltip is not an absolute URL.
…="" data-original-title="Tooltip ex.1">consectetuer adipiscing</a> elit, sed d…
Syntax of link type valid for <a> and <area>:
A whitespace-separated list of link types, with no duplicate keywords in the list. Each link type must be listed as allowed on <a> and <area> in the HTML specification, or must be listed as allowed on <a> and <area> on the Microformats wiki, or must be an absolute URL. You can register link types on the Microformats wiki yourself.
Syntax of absolute IRI:
An absolute URL. For example: http://example.org/hello, but not /hello. Spaces should be escaped as %20.
Error Line 210, Column 499: Bad value tooltip for attribute rel on element a: The string tooltip is not a registered keyword. The string tooltip is not an absolute URL.
…"#" rel="tooltip" title="Tooltip ex.2">vel illum dolore</a> eu feugiat nulla f…
Syntax of link type valid for <a> and <area>:
A whitespace-separated list of link types, with no duplicate keywords in the list. Each link type must be listed as allowed on <a> and <area> in the HTML specification, or must be listed as allowed on <a> and <area> on the Microformats wiki, or must be an absolute URL. You can register link types on the Microformats wiki yourself.
Syntax of absolute IRI:
An absolute URL. For example: http://example.org/hello, but not /hello. Spaces should be escaped as %20.
Error Line 217, Column 12: Stray end tag section.
  </section>

Open in new window

0
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 39958232
Yes, I have since changed to the newest version of bootstrap however the project shown in this question was started quite some time ago (prior to v3).
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39958250
I tested what you have in bare bones bootstrap 2 http://jsbin.com/jiliquvu/1/edit and then I took the sample from bootstrap 3 http://jsbin.com/sesotubu/1/edit and on my android tablet there was not a huge difference.  

The actual urls I  used were http://jsbin.com/jiliquvu/1/ and http://jsbin.com/sesotubu/1/ (adding the edit at the end of the url in jsbin shows you the html).

One thing to note on both of my samples as well as your own, none of the files are compressed.  I think that would have to do more with loading and not memory.
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 5

Author Comment

by:Neil_Bradley
ID: 39958267
Great. I'll take a closer look when I get back to work in the morning.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39958290
Neil, I use bootstrap a lot but have not used the accordion.  What I am seeing is even with my 2 tests with bare bones code, it is not as smooth.   The tests are slightly better than on your sample.
0
 
LVL 5

Author Closing Comment

by:Neil_Bradley
ID: 39960191
Thanks for your time on this Scott, your examples led me to the solution which turned out to the the bootstrap.js file. I updated it and my issues vanished!
Cheers,
N
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39960213
Great, what did you updated to?  A newer version or compressed?
0
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 39960229
Newer.
I had expected a long battle this morning but it did the trick beautifully.
You made a good point earlier re compressing the css, js files etc. This I usually do at the back end of the project as I find its easier to work with the uncompressed versions.

The latest version of Bootstrap is fantastic and would have been my choice however at this 11th hour updating the entire project was not an option.
Cheers,
N
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39960244
I do the same.  Although for libraries like bootstrap, I typically start with using compressed and use my own css and js uncompressed until I am ready.

Glad it worked.
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question