I've just added some toasts to a website I'm working on. They show absolutely fine, exactly when they should do, but they don't autohide. Doesn't seem to matter how I define the properties.
According to the documentation:
data-bs-autohide has a default value true
data-bs-delay has a default value 5000 (5s)
I striped things right back to basics and added:
<div class="toast show" role="assertive" aria-live="polite" aria-atomic="true">
<div class="toast-header">
<svg class="rounded me-3" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#62c462" width="100%" height="100%" class="me-3 rounded"></rect>
</svg>
<strong class="me-auto">TITLE</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
some body text
</div>
</div>
to the homepage to see what would happen... the toast appears in the top left corner when the page loads (as expected) but does not disappear after 5 seconds.
I added
data-bs-animation="true" data-bs-autohide="true" data-bs-delay="2000" to the main toast DIV, expecting that there would be some sort of change in behaviour (some sort of animation on load/hide and that it would auto-hide after 2 seconds), but nothing... just stays there indefinitely just like before I added the additional data-bs-xxx tags.
I saw some other posts talking about this, and they were using Bootstrap 5.0.2 (I'm using 5.2.0) so I tried with the older BS5 distribution, but still exactly the same behaviour.
Any help here would be great - clearly I'm missing something simple/obvious.
Thanks...
Solved it...
I got rid of the .show class from the main toast and initialise the toasts with JavaScript instead... then the parameters in the data-bs-xxx are working exactly as expected.
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" ...)
I’m linking to a video on my web site that’s hosted on youtube. It was playing fine, however now it does not seem to play. There was a flashing black circle in the upper left corner for a while. Now when I click the play button, nothing happens.
I can say that I did add a responsive div to show what properly on mobile devices, but that did not fix it initially. I’m not sure if I also need to wait for to come back.
Is there something I might need to change in my YouTube settings? If anyone knows what I need to do to resolve this issue, I would very much appreciate it.
<div class="col-md-12 hidden-xs">
<center>
<iframe width="480" height="270" src="https://www.youtube.com/embed/1LohCR8Nj00?rel=0" frameborder="0" allowfullscreen></iframe>
</center>
</div>
<div class="col-xs-12 hidden-md hidden-sm hidden-lg">
<center>
<iframe width="280" height="160" src="https://www.youtube.com/embed/1LohCR8Nj00?rel=0" frameborder="0" allowfullscreen></iframe>
</center>
</div>
You can only have a video once on a page apparently. i corrected the css to be responsive and now it works
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 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!