Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

bootstrap css bug on mobile

Posted on 2014-03-27
9
Medium Priority
?
387 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 54

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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 54

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 54

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 54

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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!
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

963 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