Solved

bootstrap css bug on mobile

Posted on 2014-03-27
9
361 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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

760 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now