javascript - How to make BootstrapDialog movable on mobile -

-

i'm using https://github.com/nakupanda/bootstrap3-dialog make dialog, on mobile phones dialog larger screen size. on desktop when change width same size mobile, can drag dialog header using mouse, can't done on mobile.

this screen size.

before dragging

the dialog after being dragged left.

after dragging

is there way make dialog dragable on mobile? or there better solution?

edit

i tried reproduce problem using simpler setup, shows different css used on .modal-dialog:

the problem:

the problematic one

the simpler setup:

simpler setup

and know problem css' min-width property. hack replacing property when creating bootstrapdialog 

onshown: function() {   $('.modal-dialog').css('min-width', 'auto'); }

for dialog sizes think answered in comments. dragging dialog around [draggable : true] on mobiles must change little bit in sourcecode.

bootstrap3-dialog not respond mobile events such touchstart, touchend , touchmove {reference}.

take @ code line 1080 :
https://github.com/nakupanda/bootstrap3-dialog/blob/master/src/js/bootstrap-dialog.js#l1080

add mobile events bootstrap3-dialog can draggable on mobile devices :

... makemodaldraggable: function() {     if (this.options.draggable) {         this.getmodalheader().addclass(this.getnamespace('draggable')).on('mousedown touchstart', {             dialog:         }, function(event) {             var dialog = event.data.dialog;             dialog.draggabledata.ismousedown = true;             var dialogoffset = dialog.getmodaldialog().offset();             dialog.draggabledata.mouseoffset = {                 top: event.clienty - dialogoffset.top,                 left: event.clientx - dialogoffset.left             };         });         this.getmodal().on('mouseup mouseleave touchend touchcancel', {             dialog:         }, function(event) {             event.data.dialog.draggabledata.ismousedown = false;         });         $('body').on('mousemove touchmove', {             dialog:         }, function(event) {             var dialog = event.data.dialog;             if (!dialog.draggabledata.ismousedown) {                 return;             }             dialog.getmodaldialog().offset({                 top: event.clienty - dialog.draggabledata.mouseoffset.top,                 left: event.clientx - dialog.draggabledata.mouseoffset.left             });         });     }      return this; }, ...

nb: untested, convinced (the only) way go.

nb²: refactor above meant here-and-now solution. should raise issue on github project site. sure authors think great idea make bootstrap3-dialog mobile ready too.


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more