Bootstrap-Tour RTL Popover position - javascript

I am using RTL bootstrap CSS 3.3.7 version with Bootstrap-Tour 0.11.0 version.
The popover element doesn't appear close to the appropriate element, but is positioned to the right.
This problem happens only when I use RTL Bootstrap CSS.
This is the code I currently have:
var tour = new Tour({
template : '<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> <div class="popover-navigation"> <div class="btn-group"> <button class="btn btn-sm btn-default" data-role="prev">« הקודם</button> <button class="btn btn-sm btn-default" data-role="next">הבא »</button> <button class="btn btn-sm btn-default" data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">עצור</button> </div> <button class="btn btn-sm btn-default" data-role="end">צא מעזרה</button> </div> </div>',
steps : [{
element : "#pop1",
title : "Title of my step",
content : "Content of my step",
backdrop : true,
backdropPadding : 3
},
{
placement : "top",
element : "#pop2",
title : "Title of my step",
content : "Content of my step",
backdrop : true,
backdropPadding : 3
}
]
});
JSFiddle Link: https://jsfiddle.net/DUKEiLL/z6qzzsjj/

bootstrap-tour doesn't seem to have rtl support for the moment, even if you manage to position the popover in the right way, you'll still have the navigation with keyboard arrows messed (inverted).
I won't recommand using bootstrap-tour in rtl pages

Related

Customize popover bootstrap with Vue

I have in my HTML a popover, and it's showing after a click. Here is my HTML
<div tabindex="0" class="btn btn-lg btn-danger order"
data-template="<div class='popover'><div class='arrow'></div><div class='popover-body'></div>"
role="button"
data-toggle="popover" data-trigger="focus"
data-content="And here's some amazing content. It's very engaging. Right?"
data-placement="left"
#click="addToCart">Add model
</div>
I have a problem to customize popover width and height and element where I write text in this popover. I probably think that it is content? I want to my popover be wider and higher maybe about: width: 250 ox and height: 300px. How can I do this? Here is my Vue code:
addToCart() {
if (typeof(this.sizeChoose) === 'undefined') {
$('.order').popover(
'show'
)
}
}

Yii 1.1 TbGridView custom pagination

I have a following issue with my Yii 1.1 project. I have bootstrap.widgets.TbGridView widget in it and 2 buttons. I wan't to use these 2 buttons for TbGridView pagination (using JavaScript). How can I handle it?
Here is the code:
$this->widget('bootstrap.widgets.TbGridView',array(
'id'=>'doc-to-grid',
'dataProvider'=>$model->search(),
'summaryText'=>'{start}-{end}/{count}');
Buttons
<div class="btn-group">
<button type="button" class="btn btn-default "><i class="fa fa-chevron-left"></i></button>
<button type="button" class="btn btn-default "><i class="fa fa-chevron-right"></i></button>
</div>
If could be useful to you the simplest way for pagination is the uso a pager ..this set pagination like twitter bootstrap
$this->widget('bootstrap.widgets.TbGridView',array(
'dataProvider'=>$dataProvider,
'template' => "{pager}\n{summary}\n{items}\n{pager}",
'pager'=>array( // pager like twitter bootstrap
'header'=>'',
'cssFile'=>false,
'maxButtonCount'=>24,
'selectedPageCssClass'=>'active',
'hiddenPageCssClass'=>'disabled',
'firstPageCssClass'=>'previous',
'lastPageCssClass'=>'next',
'firstPageLabel'=>'<<',
'lastPageLabel'=>'>>',
'prevPageLabel'=>'<',
'nextPageLabel'=>'>',
),

How to enable bootstrap popover to open and close multiple times?

I want a popover using bootstrap that can be closed through clicking on a button within the popup. But I after closing, I have to click twice on the button to open the popover again.
I currently have the following implementation:
HTML:
<button type="button" id="example" class="btn btn-primary">example</button>
JAVASCRIPT:
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide");
">×</button>',
content : 'Content'
});
});
How can I implement a close-button in the popover without having to click twice on the button to re-open the popover?
You can fix this by adding click() event.
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide").click();
">×</button>',
content : 'Content'
});
});

Panzoom - How to disable the drag option?

In rails 4.2.2 project, I am using panzoom jquery for a html element (instead of an image), for the same page I am using annotator plugin. Now the issue is annotator is not working because I am not able to select any word in the page. Whole html is moving(dragging) because of panzoom, how can I disable 'drag' option in it?
Referred by http://www.jqueryscript.net/zoom/jQuery-Plugin-For-Panning-Zooming-Any-Elements-panzoom.html
In views,
<div class="buttons">
<button class="zoom-in btn btn-default btn-xs">+ Zoom In</button>
<button class="zoom-out btn btn-default btn-xs">- Zoom Out</button>
<button class="reset btn-sm btn btn-primary">Reset</button>
</div>
<div class="panzoom" style="height: 480px;">
<%= render :file => #path %>
</div>
$(".panzoom").panzoom({
$zoomIn: $(".zoom-in"),
$zoomOut: $(".zoom-out"),
$zoomRange: $(".zoom-range"),
$reset: $(".reset")
});
Use the disablePan option:
$section.find('.panzoom').panzoom({
disablePan: true,
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});

Changes in html template do not reflect

I am trying to add some buttons to the GeoNetwork 3 MapViewer. Unfortunately I'm new to AngularJS, which GN3 is written in. So what I've done is editing the html-template that the 'gnMainViewer' directive is using.
ViewerDirectve.js:
module.directive('gnMainViewer', [
'gnMap',
function(gnMap) {
return {
restrict: 'A',
replace: true,
scope: true,
templateUrl: '../../catalog/components/viewer/' +
'partials/mainviewer.html',
[...]
}]);
In this template I can find the buttons that are shown in the MapView.
mainviewer.html:
<div class="wrapper" data-ng-controller="gnViewerController">
<div data-gn-alert-manager=""></div>
<div id="map" ngeo-map="map" class="map"></div>
<div gn-gfi="" map="map"></div>
<div gn-localisation-input map="map"></div>
<!--Top right buttons - Tools-->
<div class="tools tools-right" gi-btn-group gnv-close-panel data-ng-controller="toolsController">
<button class="btn btn-default" ng-model="activeTools.addLayers" type="submit"
rel="#addLayers" gi-btn gnv-tools-btn>
<span class="fa fa-plus"></span>
<span role="tooltip" data-translate="">addLayers</span>
</button>
<button class="btn btn-default" ng-model="activeTools.layers" type="submit"
rel="#layers" gi-btn gnv-tools-btn>
<span class="fa fa-tasks"></span>
<span role="tooltip" data-translate="">Layers</span>
</button>
[...]
</div>
</div>
So I've added a button let's say:
<button class="btn btn-default" ng-model="" type="submit"
rel="#" gi-btn gnv-tools-btn>
<span class="fa fa-beer"></span>
<span role="tooltip">NewButton</span>
</button>
to the template.
Then I've saved my changed and refreshed the MapView-Page on my server. But a new button will not be displayed. Also, changing the comment "Top right buttons" to something else will not make any changes to the displayed MapView-Page.
Even restarting the server won't change anything.
Could somebody explain me why AngularJS reacts like this? Any Ideas?
Turned out I had to run the page in debug mode e.g. http://localhost:8080/geonetwork/srv/ger/catalog.search?debug#/map
to force to load all AngularJS files seperately and without cache.

Categories