I have a Bootstrap 4.0.0 Carousel up and running.
Time based changes and direct selection of items work as expected.
But the prev/next buttons do not work.
Documentation says, it should be like this (example for the left/prev button):
<a class="carousel-control-prev" role="button" data-slide="prev" href="#carousel-id">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
But like that, it does not work. BUT, when I do it like that:
<a class="carousel-control-prev" role="button" data-slide="prev" data-target="#carousel-id">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
Here, when I swapped out href with data-target it works.
Why does everyone say, it should be href?
Can I use data-target then? data-target is used also by 'data-slide-to' button, why not with 'data-slide'? This makes no sense.
Ok, I had Bootstrap 4.0.0 and jQuery 2.5.x.
I upgraded to jQuery 3.5.1, now it works as expected.
Related
I am not able to display Arabic characters inside chosen drop down list, any body can help me please?
can you provide more info or snippet of your code?
there is actually no reason for HTML to complain about Arabic or any other language, it will just show what you input.
check this fiddle for example:
`<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Display
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>السلام</li>
<li>عليكم</li>
<li class="divider"></li>
<li>كيف</li>
<li>الحال؟</li>
</ul>
</div>`
http://jsfiddle.net/n4xfcvsw/100/
I have a button which is using angular-ui-bootstrap dropdown and a vanilla text input. Once the page loads, I can freely enter text into the input box. However, after clicking the button, I can no longer focus on the input box: focus continually jumps back to the dropdown button.
How do I fix this problem, or have I hit a bug (and I should raise an issue)?
Here is a simple example using code directly from angular-ui-bootstrap:
https://plnkr.co/edit/JbXo3WfLgrHoXcyC2If4?p=preview
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
<input type="text">
</div>
FWIW, this seems to be the offending function call: https://github.com/angular-ui/bootstrap/blob/7a1d54c8c34265e0e1b7ac1b38f58b5867a2af49/src/dropdown/dropdown.js#L108
Looks like you found an already found bug. Someone raised an issue for the ui-dropdown focus already...please check this link: https://github.com/angular-ui/bootstrap/issues/6372 and also this one which describes your issue: https://github.com/angular-ui/bootstrap/issues/6364
I am trying to use bootstrap's carousel inside an angular.dart component. Here is the html:
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol ng-repeat="pic in ctrl.pics" class="carousel-indicators">
<li data-target="#carousel" data-slide-to="{{ $index }}" ng-class="{ active: {{$first}} }"></li>
</ol>
<!-- Slides -->
<div ng-repeat="pic in ctrl.pics" class="carousel-inner">
<div class="item" ng-class="{ active: {{$first}} }">
<img src="{{ ctrl.pic.image }}">
<div class="carousel-caption">{{ ctrl.pic.title }}</div>
</div>
</div>
<!-- Controls -->
<a id="carousel-control-left" class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a id="carousel-control-right" class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
The prev/next controls don't work (maybe other things too), probably because the href attributes are wrong. I tried to fix them by updating the hrefs at run time, but I don't know how to enter a url pointing to an id that is inside shadow dom.
Alternatively, I tried to add event listeners that would use dart:js to call the carousel('prev') and carousel('next') bootstrap functions. This approach failed too because I don't know how to pass the shadow dom root reference from dart to javascript.
Any suggestions?
There may be two issues:
JavaScript tries to querySelect() an element and can't find it because it's hidden in the shadowDOM
you could change the JavaScript code
The CSS doesn't work because you haven't added applyAuthorStyles: true to your AngularDart component.
Currently Angular UI Bootstrap components are being ported to Angular Dart
see https://github.com/akserg/angular.dart.ui
Carousel is not yet working AFAIK
I am having a bit of a problem with my site, i am trying to add a simple link to an external site, but i can't get the link to open without right clicking and selecting open link.
This is the piece of code
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item"</a>
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
</div>
I know it's most likely something simple but i can't seem to pin it down
Thanks
Aha! The problem is because you are trying to link from an http to an https!
Your anchor tag needs to override the click handler:
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');" >
Should fix it!
But I would still fix the nesting.
try properly nesting everything, like so:
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');">
<div class="nav-hover">
<i class="li_shop">
<span>Shop now</span>
</i>
</div>
</a>
</div>
Syntax error
<a href="https://www.google.co.uk/" class="nav-item">
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
Environment
jQuery Mobile 1.3.0
Ruby on Rails 3.2.12
Chrome and Firefox latest or close to latest builds (can get exact versions if needed)
OS X Lion 10.8.2
Problem
Using jQuery Mobile with Rails on the back end, I am getting an odd hover effect for only list view items. The picture below shows what a listview item looks like while hovered on. If I add an icon/button to the right of the listview item, only the left has the issue as shown in the second picture. All other elements with hover effects work fine.
Evidence
Without icon, on hover (listview item):
With icon, on hover (listview item):
With icon, on hover (listview item right icon):
Question
Why, on hover, do my listview items turn an ugly black instead of being the nice hover gradient that everything else seems to handle without issue (including an icon/button on the listview itself)?
Code
The following is my HAML template code for the listview.
%ul{"data-filter" => "true", "data-inset" => "true", "data-role" => "listview"}
- #item.subitem.each do |item|
%li{"data-theme" => "c"}
%a{"data-prefetch" => "", "data-transition" => "slide", href: edit_item_subitem_path(#item, subitem), :rel => "external"}
= item.text
- if item.set
%span.ui-li-count.ui-btn-up-c
✓
And this is what Rails/HAML generates:
<ul data-filter='true' data-inset='true' data-role='listview' data-split-icon='gear' data-split-theme='b'>
<li data-theme='c'>
<a data-transition='slide' href='/items/5' rel='external'>
Testing
<span class='ui-li-count ui-btn-up-c'>
2
</span>
</a>
<a data-theme='c' href='/items/5/edit'>
<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>
</a>
</li>
And here is the resulting "computed" source that jQuery Mobile generates (I left out the search/filter code):
<ul data-filter="true" data-inset="true" data-role="listview" data-split-icon="gear" data-split-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-theme="c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-count ui-first-child ui-last-child ui-btn-up-c">
<div class="ui-btn-inner ui-li ui-li-has-alt">
<div class="ui-btn-text">
<a data-transition="slide" href="/items/5" rel="external" class="ui-link-inherit">
Testing
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">
2
</span>
</a>
</div>
</div>
<a data-theme="c" href="/items/5/edit" title="" class="ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext">
<span class="ui-btn-inner">
<span class="ui-btn-text"></span>
<span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="gear" data-iconpos="notext" data-theme="c" title="" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext">
<span class="ui-btn-inner">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-gear ui-icon-shadow"> </span>
</span>
</span>
</span>
</a>
</li>
</ul>
Thanks
Thanks in advance, let me know if you need any additional information. Also, I didn't tag this Rails as I don't think it relates to Rails, but if I should, or if it does end up being the root cause, I will tag it as such.
Well, as it turns out, I had accidentally left the scaffolds.css.scss from when I was initially prototyping the app using the rails scaffold cli command. That was causing the issue.