In my cordova application i used Jquery mobile(v 1.3.2) and thomas jbradly Sign plugin.In my application i have one signature field(canvas to draw sign) and some fields.
Like below code:
<div data-role="page" id="page1">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<button>Button1</button>
</div>
<div class="ui-block-b" style='margin-top: 2%;'>
<b><label>Label 1</label></b>
</div>
</div>
<div data-role="fieldcontain"></div>
<div id="signaturePart">
<div class="sigPad">
<b><label>Put Your Sign Here</label></b>
<ul type="none">
<li class="clearButton">Clear</li>
</ul>
<div class="sig">
<canvas class="pad" width="550" height="200" id="mKundusskirt"></canvas>
<input type="hidden" name="output" class="output">
</div>
</div>
</div>
</div>
</div>
When put signature in canvas filed the duplicate of canvas field is displayed above the original field.
Before Signing the canvas:
After Signing the canvas:(Create duplicate of original canvas)
NOTE*:
When remove the Jquery mobile the signature field working fine.
For reference: Signature Css
Signature Js
Please help me to solve the problem..
try to apply the CSS overflow:hidden on the div which contains the class="sig".
Related
I've started experimenting with MaterializeCSS the last few days, reorganizing an older web-based application that displays CSV files in a particular way. I don't do much FRONTEND work, so it's nice to have a toolkit like MaterializeCSS to make things easier. :)
I've created a JSFiddle demo showing off some alignment issues I'm having creating a very, very simple Navbar component here: https://jsfiddle.net/Le14fkoy/
<body>
<header>
<!-- https://materializecss.com/navbar.html -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper row grey lighten">
<div class="col s4">
LOGO
</div>
<!-- https://materializecss.com/text-inputs.html#file -->
<form class="col s8" action="#">
<!-- <div class="file-field input-field" style="margin-top: 0.7rem;"> -->
<div class="file-field input-field">
<div class="btn">
<span>Upload CSV</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row grey lighten-2">
<div class="col s4">
LOGO
</div>
<form class="col s8" action="#">
<div class="file-field input-field">
<div class="btn">
<span>Upload CSV</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
</div>
</main>
<footer class="page-footer" style="padding-top: 0px;">
</footer>
The first row is ACTUALLY the Navbar component, and for some strange reason, pushes the file upload form to the top of the screen (as well as NOT showing the bottom border for the file path div). The second row is a simple "container" class div, and seems to resolve the issues.
I'm not entirely sure what change inside the Navbar component causes it behave differently from a typical div, but any advice would be welcome. Thanks!
I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}
I am trying to use scrollspy from Materialize (http://materializecss.com/scrollspy.html) to target each div that is created with ng-repeat.
However, it seems to me as if the scrollspy class is not doing anything. Instead of scrolling to that part of the page, the DOM just reloads and points to the portion of the page.
Another problem is that using href="/#community#sharingLove" is changing the website URL. Is there anyway for the scrollspy to work without adding to the URL?
<div class="full-height row" ng-controller="CommunityController">
<div class="col l10 main-content">
<div ng-repeat="principle in acmPrinciples" id ="{{principle.id}}" class="row full-width centering-text section scrollspy">
<div class ="col-md-12">
<h4>{{principle.title}}<h4>
</div>
<div class ="col-md-12 comm-description-container">
<p class="paragraph-style larger-font-size">
{{principle.description}}
</p>
</div>
<div class ="col-md-12">
<video class="responsive-video comm-video-height" controls>
<source ng-src="{{principle.videoURL}}" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="col l2 scroll-content">
<div class="row">
<div class="col hide-on-small-only m3 l2 scroll-items">
<ul class="section table-of-contents">
<li>Experiencing God</li>
<li>Sharing Love</li>
<li>Connecting Lives</li>
<li>Declaring Truth</li>
</ul>
</div>
</div>
</div>
</div>
I have linked included jQuery, bootstrap, and materialize. Last thing: other features of materialize work for me, just not the scrollspy. I also do
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
I think if you remove #/community from the hrefs it should work. The href should contain the id of the block, not extra url info. Eg try using
Experiencing God
I was testing out the DHTMLXscheduler module on my application. I followed all the steps which explained setting up the module on http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:how_to_start but couldnt get it to work.
I have implemented the js and css in my header file and implemented all the necessary code. After running my application, I end up with an empty screen without any errors in my console.
Did someone ever experienced the same like this?
The code i used to initialize is exactly the same as shown on their webpage which is:
<script type="text/javascript">
scheduler.init('scheduler',null,"week");
</script>
<div id="content">
<div id="scheduler" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
I have also tried calling the init method after the html content which resulted in the same result.
The problem is solved. I had to increase the height of the inner div #content.
I'm trying to get the jQuery gallerific plugin working at http://justrecip.es/ViewRecipes.aspx?recipeid=S9ML32WQO3&act=view . The gallery is loaded correctly, but neither the thumb grid nor the navigation (next/previous image) buttons work. There are no script errors, but it seems this is a JavaScript problem of some sort.
Try this
<div class="gallery-content">
<!-- Move controls above slideshow -->
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
jsFiddle example