Solved

bootstrap css bug on mobile

Posted on 2014-03-27
9
364 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error on Add method 1 38
highcharts wont fix inside a bootstrap modal window 6 29
To remove highlight from a "a href" 5 23
CSS Logo Problem. 2 7
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

910 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

21 Experts available now in Live!

Get 1:1 Help Now