I am using the bootstrap accordion (collapse) in my project, but unfortunately the result is not the desire one. I have around 8 items in the accordion, some of them having lot of text inside (sometimes more than half a page).
I am trying to collapse/expand items in accordion, but the behavior is totally strange and unpredictable. I just copied the example on their site and added more items.
My expectations was that each time I click on a closed item it will open and the open div will receive focus. Sometimes I see page scrolling very fast and focus is positioned in a wrong place or item is opened but focus is too low on the page and title is not visible.
Any idea on how to handle accordion properly or what's the correct behavior ?
Here's a working example http://jsfiddle.net/panchroma/RdK8t/
It's taken directly from the bootstrap example with extended content added to one of the elements.
The typical code is:
<div class="accordion" id="accordionParent"> <!-- start #accordionParent wrap -->
<!-- start typical content group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionParent" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
content
</div>
</div>
</div>
<!-- end typical content group -->
</div> <!-- end accordionParent wrap -->
You could validate your page to ensure there isn't a nesting problem, and double check that if your aren't using the full bootstrap js file, make sure you are including the transitions plugin.
Hope this helps!
Related
I have a web app (asp .net webforms) that I am integrating bootstrap into. I have one page where the bootstrap toast is displayed and fades away as intended. I have another page where the toast displays as intended, but fails to fade away. One of the toasts that does not fade away is shown below. I have this exact same code running on another page and it does fade out properly. I think that the problem is something the toast is within. Any suggestions regarding what I should look for? TIA
<div id="nextStepDeleteConfirmation" class="toast fixed-top text-white bg-primary border-0"
role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="3000">
<div class="toast-body">
<div role="alert" aria-live="assertive" aria-atomic="true"> blah blah You have selected to delete an activity log record on the next update of this TA.</div>
</div>
</div>
CodePen https://codepen.io/david263/pen/zYNaoRQ shows an example simple home page layout that fits the browser viewport perfectly and centers some div content (choose Change View > Full Page View in CodePen to see the page clearly). But note the CSS style elements used to set div heights and the many Bootstrap 5 classes used to achieve vertical centering. It took several days to get this working, but it fails to use only simple Bootstrap 5 classes.
<header id=jumbo class="px-5 d-flex justify-content-center align-items-center bg-dark" style="height:70vh">
<div class="row col-12 text-center text-light">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</header>
My attempt to use the usual container, row, and col classes (see https://codepen.io/david263/full/xxgzLPj) failed to achieve the full height demonstrated by the first example.
<header id=jumbo class="container-fluid bg-dark">
<div class="h-50 row align-items-center col-12 text-center text-light">
<div class="col py-auto">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</div>
</header>
And these difficulties were encountered before adding a background image, which doesn't seem possible in Bootstrap 5 at all.
Don't get me wrong; I'm not opposed to using CSS when necessary. It's just that it's hard to tell exactly what the limits are for Bootstrap 5 so that custom CSS becomes necessary.
Many websites have a home page containing a large photo or video in the background, with text centered horizontally and vertically in the foreground, so this example represents something that is very often used. Surely such a frequent layout must be possible in Bootstrap 5.
Bootstrap isn't a silver bullet - its a framework (think of it as a chassis that you need build on top of). Bootstrap offers a few "helper" classes so that one does not need to add a whole bunch of repetitive CSS .. but that's all it can do. A clear understanding of CSS helps a lot too in using Bootstrap.
For example, the h-50 class is only height: 50%; in CSS. That's 50% of it's parent .. but your <header id="jumbo" does not have a height .. so 50% of what .. 0 .. is unknown?? (This may vary from browser to browser)
It's not clear what you're trying to achieve - but if you head on over to https://getbootstrap.com/docs/5.0/examples/ you'll see a whole bunch of examples and starting points for you to get to where you need to be. I think the Cover example is a good spot to land on. (Once there, right click and "view page source" ...)
Problem: I have developed a basic web site using GoDaddy's Website Builder V7. See it here --> oktoberfestvisits.com . It is not iPad aware or optimized in any way since I have very little control over HTML, etc that is generated. All the pages appear to display properly, however, I have two problems I do not understand.
When trying to scroll quickly, ie. swiping down or up, the page only scrolls about 5 or so lines at a time. Is there something in the page that controls or prevents smooth scrolling (Momentum Scrolling)? All other web sites and web pages scroll fine.
When in the middle of the page, touching on the black title bar at the top of the screen does not snap back to the top of the page. Like above, is there something that controls or prevents this? Like above, all other web sites and web pages work fine.
I can make some minor HTML additions if necessary, but I do not know what causes this. Is there something that needs to be on my pages so that the iPad scrolls smoothly?
.sc {
-webkit-overflow-scrolling: touch;
}
Add this css code to style sheet and then add "sc" class on the page which that scroll issue. Like if you put finger on <input /> field and quickly scroll, but it doesnt scroll then put sc class on input field or add to its parent element.
e.g.
<div class="sc">
<div class="form-group sc">
<input type="text" placeholder="First Name"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Last Name"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Email"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Property Units"/>
</div>
</div>
The whole page is in a div with position: absolute;. I think this causes the scrolling error on iOS.
It appears that iOS has laggy scroll when you use overflow: hidden or overflow-x: hidden. Try to avoid that.
I have a simple jquery mobile application in which every page has the following structure:
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">
<div class="content-primary">...</div>
<div class="content-secondary">...</div>
</div>
<div data-role="footer">...</div>
</div>
The content-secondary is a left sidebar, much like the jquery mobile documentation. This secondary content never changes but it can be very large and complex (expensive to reload on every page). I would like to move the same dom element from page to page as it transitions, and not have to include it on every page like the jqm documentation. I only need to load it when it doesn't exist and then move it with every page transition. Any hints on how to do this?
You can insert HTML content in to your page in a pagebeforecreate handler.
Has anyone actually succeeded in doing this it seems like there are so many attempts on line but no one has a definite solution. I've tried plugins that a lot of people suggested but nothing is working.
I just want to have a Google Map go full dimensions (apart from header and footer) and then on another page I want a div to do the same
JQuery-Mobile content area 100% height between head and foot
In the meantime I would recommend to use iScroll [with CSS position:fixed; for header&footer in iOS5 only]
In iScroll you just wrap the content into a wrapper & scroller class, the rest is done by the script. Here's the homepage http://cubiq.org/iscroll-4 and here's some code:
<div id="content" data-role="content">
<div id="wrapper">
<div id="scroller">
your content here.
</div>
</div>
</div>
For iScroll initialization use the documentation provided on cubiq's site.
zY