fancybox not showing images when screen is smaller - fancybox

The fancybox triggers and shows the images when it's wide screen until you resize down under approx 1000px wide. What did I do wrong? Can someone help? A live page with a test is here, only the top 6 images in the row under where it says Please, Click The Logos To Read Some Testimonial Letters are code with the fancybox. The stuff below is filler for now.
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
<=== the above is in the <head> ===>
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/tucscenter.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Tuscon Center" src="photos/logo/tuscenter.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/texasdot.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Texas DOT" src="photos/logo/TexasLogo.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/ushome.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Tuscon Center" src="photos/logo/USHomeLogo.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/kimberly.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Kimberly Clark" src="photos/logo/KimberlyClarkLogo.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/FresnoCollege.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Fresno College" src="photos/logo/FresnoCollege.jpg" /> </div>
</a></div>
<div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/roswelltoy.htm">
<div class="img-fixed">
<img class="img-fluid" alt="Tuscon Center" src="photos/logo/roswelltoyota.jpg" /> </div>
</a></div>
</div>
<div class="clearfix d-none d-sm-block"></div>
<=== above </body> close ===>
<script src="jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>


First, fix all JS errors, because any JS error can prevent further execution of the code:
Uncaught TypeError: $(...).collapse is not a function

Related

how to create side panel custom search for leaflet that search through geojson data?

I have a project using leaflet, but I want to do a custom search through GeoJSON data but I don't know how to do it. I have a side panel with search box and button. below is my design:.
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
var map = new L.map("myMAP_id", {
fullscreenControl: {
pseudoFullscreen: false,
position: "topright"
}
}).setView([10.392241, 124.98], 16.5);
var layer = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© OpenStreetMap contributors',
visible: false,
title: "OpenStreetMap"
}
);
map.addLayer(layer);
var poly = L.geoJson(slsu_bldg, {
style: function(feature) {
return bldg_style;
},
onEachFeature: function(feature, marker) {
marker.bindPopup(
"<div><b>SOUTHERN LEYTE STATE UNIVERSITY" +
"<br>" +
feature.properties.BLDG_NAME +
"<br><button id='" +
feature.properties.ID +
"' class='btn btn-xs btn-primary' style='height: 23px; font-size: 11px; padding: 3px 6px; letter-spacing: 0.02rem; margin-top: 5px;'>More Details <i class='fa fa-caret-right'></i></button></div"
);
}
});
var search_val;
$("#search").on("click", function() {
search_val = $("#searchtext10").val();
console.log(search_val);
var search = new L.Control.Search({
options: {
layer: poly,
zoom: 19,
initial: false,
filterData: search_val,
propertyName: "BLDG_NAME",
marker: {
icon: true,
animate: true,
circle: {
radius: 10,
weight: 4,
color: "#1BC500",
stroke: true,
fill: true
}
}
}
});
console.log(search);
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SLSU Asset Management</title>
<link rel="shortcut icon" href="http://localhost/GIS-SLSU_AssetMgt/assets/img/slsu.png" />
<!-- offline bootstrap -->
<!-- online bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- custom stylesheet -->
<link rel="stylesheet" href="http://localhost/GIS-SLSU_AssetMgt/assets/custom/style.css" />
<!-- leaflet offline connection -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-src.js">
integrity="sha512-eldJj3obVsCO9Tlrj/J8AFrrTFD4+sN8d9HdwKAqZuSgHloWOm6IzetLy1uQnwh9qLssrY3TAgIJQfjPfQJxHQ=="
crossorigin=""
</script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/L.Conttol.Locate.min.js"></script>
<!-- leaflet full screen -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.min.js"></script>
<!-- online maptiler mapboxGL map -->
<script src="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" />
<!-- offline maptiler mapboxGL map -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/leaflet-mapbox-gl.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.js"></script>
<!-- geojson coder -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
/>
<script src="https://unpkg.com/osmtogeojson#2.2.12/osmtogeojson.js"></script>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.js"></script>
</head>
<body>
<!--- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand image" href="#">
<img
class="img img-responsive"
src="http://localhost/GIS-SLSU_AssetMgt/assets/img/LOGO.png"
alt=""
/>
<!-- SLSU-MC GIS MAP -->
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Help</a>
</li>
</ul>
</div>
</nav>
<!---map section -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map_wrapper">
<div class="row">
<div class="col-md-4" style="padding-right: 0 !important;">
<div class="left-control">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link"
type="button"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
BASE MAPS
</button>
</h2>
</div>
<div
id="collapseOne"
class="collapse show"
aria-labelledby="headingOne"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
<label>
<div>
<input
type="radio"
id="basemaps"
value="OpenStreetMap"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
checked="checked"
/>
<span> Open Street Map</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Maptiler"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Maptiler</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="MapBox"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> MapBox</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Google"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Google</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="WorldImagery"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> World Imagery</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
LAYER MAPS
</button>
</h2>
</div>
<div
id="collapseTwo"
class="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-overlays">
<label>
<div>
<input
type="checkbox"
id="vector_layerBuilding"
value="Buildings"
class="leaflet-control-layers-selector"
checked=""
onclick="vector_layerBuilding()"
/>
<span> Buildings</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerRoads"
value="Roads"
class="leaflet-control-layers-selector"
onclick="vector_roads()"
/>
<span> Roads</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBoundary"
value="Boundary"
class="leaflet-control-layers-selector"
onclick="vector_layerBoundary()"
/>
<span> Boundary</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerTrack"
value="Track/Oval"
class="leaflet-control-layers-selector"
onclick="vector_layerTrack()"
/>
<span> Track/Oval</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerField"
value="Field"
class="leaflet-control-layers-selector"
onclick="vector_layerField()"
/>
<span> Field</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerParking"
value="Parking Lot"
class="leaflet-control-layers-selector"
onclick="vector_layerParking()"
/>
<span> Parking Lot</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerPath"
value="Foot Path"
class="leaflet-control-layers-selector"
onclick="vector_layerPath()"
/>
<span> Foot Path</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBleacher"
value="Bleacher"
class="leaflet-control-layers-selector"
onclick="vector_layerBleacher()"
/>
<span> Bleacher</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div id="myMAP_id"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info" style="height: 28vh">
<div align="right"><button class="btn btn-default">IMPORT</button></div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Building Name</th>
<th>Assets</th>
<th>Counts</th>
<th>Unit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CCSIT Building</td>
<td>Computer Sets</td>
<td>100</td>
<td>PCS</td>
</tr>
<tr>
<td>2</td>
<td>CCSIT Building</td>
<td>MAC PC</td>
<td>25</td>
<td>PCS</td>
</tr>
<tr>
<td>3</td>
<td>CCSIT Building</td>
<td>Mga Gwapo</td>
<td>Gamay Ra Me!</td>
<td>Way Labot Jorton (by: Ranel)</td>
</tr>
<tr>
<td>4</td>
<td>CCSIT Building</td>
<td>Mga Panget</td>
<td>Gamay Ra Sila!</td>
<td>Labot Si Jorton (by: Ranel)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<p>
<a href="https://leafletjs.com/" target="_blank">Leaflet ©</a
> | Developed by: darksidebug_09
</p>
</div>
</div>
</div>
<!--- scripts here -->
<!--- geojson data -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/new_bldg_data.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_boundary.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/road_network.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/track_oval.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_field.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/parking_lot.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/foot_path.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/bleacher.geojson"></script>
<!--- script -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/data_scripts.js"></script>
<!-- Bootstrap core JavaScript and JQuery-->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/js/jquery.min.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

creating a responsive form within NetSuite

custom forms within NetSuite require the use of field tags like NLFORM and NLCATEGORY, etc. However it's unclear to me how to incorporate these tags properly into the template of a responsive form so it works.
Here's what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<Title>General Contact Form</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
h1, p {
font-family: 'Lato', sans-serif;
}
</style>
</head>
<Body>
<div class="container">
<h1>
<center>Submit a Message</center>
</h1>
<form class="form-horizontal">
<NLFORM>
<br>
<fieldset>
<legend>How Can We Help You?</legend>
<div class="form-group">
<p class="control-label col-sm-2">Type of Inquiry*</p>
<div class="col-sm-10">
<NLCATEGORY>
</div>
</div>
<div class="form-group">
<p class="control-label col-sm-2">Subject*</p>
<div class="col-sm-10"><NLTITLE> </div></div>
<div class="form-group">
<p class="control-label col-sm-2">Message*</label>
<div class="col-sm-10"><NLINCOMINGMESSAGE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLFILE">File Upload</label>
<div class="col-sm-10"><NLFILE> </div></div>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="first-name">First Name*</label>
<div class="col-sm-10">
<NLFIRSTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for ="NLLASTNAME">Last Name*</label>
<div class="col-sm-10"><NLLASTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLEMAIL">E-mail*</label>
<div class="col-sm-10"><NLEMAIL> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLPHONE">Phone</label>
<div class="col-sm-10"><NLPHONE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLCOUNTRY">Country</label>
<div class="col-sm-10"><NLCOUNTRY> </div></div>
</fieldset>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit"> - or -
<input type="button" value="Reset" onclick="page_reset(); return false;"></div></div>
<NLSUBSIDIARY>
<br>
<p align=center>Fields marked with an<img src="http://shopping.na2.netsuite.com/core/media/media.nl?id=35211&c=4382721&h=2eef11083f182592e0bb">are required.</p>
</form>
</Body>
</HTML>
the form fields do respond to resizing the browser window, but NetSuite is not able to properly create a record using this particular form. can anyone see what I'm doing wrong here!?
here's the form URL: http://www.boxcomponents.com/support-form
NetSuite Field Tags are controlled from within the UI; so field width is fixed and doesn't accept percentages; there are also drop-down menus which have a fixed width, which is mildly annoying. I can't seem to get the form to respond properly without removing all of NetSuite's tags.

What you'll need to do is process the form with script when it opens. Add a script tag after the </form> tag to add and remove classes from the form elements.
Also this is redundant and you'll end up with some sort of broken form:
<form class="form-horizontal">
<NLFORM>
So for instance you'd just have:
<NLFORM>
...
</form>
<script>
jQuery(function($){
$("#main_form").addClass('form-horizontal');
});
</script>

HTML2Canvas unable convert div to image with large images

I am using HTML2CANVAS to capture Div as Image and save to database.
Its working fine with images of 1-2 kb and text.
but unable to capture multiple and large images suppose 200-300 kb.
Please help help me out if anyone has face this issue and has solution.
Here is my Code:
<div id="target">
<page size="A4">
<div id="wrapper" >
<div id="header">
<div class="text">
<span id="rent">This Space for rent/price</span>
<h1 id="propAdd">THIS SPACE FOR PROPERTY ADDRESS</h1>
<h1 id="Data">THIS SPACE FOR DATA</h1>
</div>
</div>
<h1 id="ad">
This Space For advert heading</h1>
<div id="content">
<div class="main">
<div id="dvPreview2">
<img src="images/main-image.jpg" width="550" height="355" />
</div>
<h1 id="DES">This Space for Property Description or FEATURES</h1>
<ul>
<li id="DES1">4 Bedrooms, 3 Bathrooms</li>
<li id="DES2">Ensuite has double shower & double vanity</li>
<li id="DES3">Massive open plan living with cathedral ceilings</li>
<li id="DES4">Resort-style pool deck area</li>
<li id="DES5">Gourmet kitchen with butlers pantry</li>
<li id="DES6">Fully ducted air-con</li>
<li id="DES7">Triple lock-up garage with remote</li>
<li id="DES8">Outside pets considered on application</li>
</ul>
</div>
<div class="sidebar">
<div id="dvPreview3">
<img src="images/sidebar-image-01.png" width="159" height="100" />
</div>
<div id="dvPreview4">
<img src="images/sidebar-image-02.png" width="159" height="100" />
</div>
<div id="dvPreview5">
<img src="images/sidebar-image-03.png" width="159" height="100" />
</div>
<p id="dvPreview1" >
<img src="images/agent-logo.png" style="width:80px;" /></p>
<p style="margin-top:0 !important;">
Phone: <span id="phone">+49 30 47373795</span><br />
E-mail: <span id="mail">Ject41#cuvox.de</span><br />
<span id="web">www.abc.in</span>
</p>
</div>
<div class="clear"></div>
<div class="slid-img">
<div id="dvPreview6" >
<img src="images/image-01.jpg" width="159" height="100" />
</div>
<div id="dvPreview7" >
<img src="images/image-02.jpg" width="159" height="100" />
</div>
<div id="dvPreview8" >
<img src="images/main-image.jpg" width="159" height="100" />
</div>
<div id="dvPreview9" >
<img src="images/sidebar-image-01.png" width="159" height="100" style="float:right; margin:0" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="affiliation-logo">
<ul>
<li><div id="dvPreview10" style="width:32px;"><img src="images/facebook-icon.png" width="32" /></div></li>
<li><div id="dvPreview11" style="width:32px;"><img src="images/twitter-icon.png" width="32" /></div></li>
<li><div id="dvPreview12" style="width:32px;"><img src="images/linkedin-icon.png" width="32" /></div></li>
<li><div id="dvPreview13" style="width:32px;"><img src="images/youtube-icon.png" width="32" /></div></li>
<li><div id="dvPreview14" style="width:32px;"><img src="images/google-plus-icon.png" width="32" /></div></li>
</ul>
</div>
<div class="clear"></div>
<div id="footer">
<div class="agent-section">
<%-- <div class="agent-name"></div>--%>
<span class="agent-name" style="float:left"> Disclaimer : </span>
<div id="DIS" style="max-width:550px; float:left; margin-left:10px; line-height:18px; font-size:14px;"></div>
</div>
<div class="clear"></div>
</div>
</div>
</page>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#add_button').click(function () {
html2canvas($('#target'), {
onrendered: function (canvas) {
var img = canvas.toDataURL()
img = img.replace('data:image/png;base64,', '');
//alert(img);
//window.open(img);
$.ajax({
type: 'POST',
url: 'Design1.aspx/UploadImage',
data: '{ "imageData" : "' + img + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
//alert('Image saved successfully !');
}
});
}
});
});
});
</script>

In file Html2Canvas.js on line 65
Change following line from
/* Highest positive signed 32-bit float value /
/maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
to as Below
maxInt = Number.MAX_VALUE,

trick.
set your tag with and height is double of the output image size.

Bootstrap form always showing horizontal scroll

I'm designing a system which uses all bootstrap controls. on every page, an horizontal scroll is displayed. however there seems to be no control that is causing this. I give you the example of one of my pages. I think I have something wrong in the head, but I can not find it.
<!DOCTYPE html>
<?error_reporting(0);?>
<? include_once "include/checkSession.inc"; ?>
<? include_once "include/conexion.inc"; ?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Clínica 25 de Mayo</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="styles/bootstrap_flatly.css"/>
<script type="text/javascript" src="include/jquery.js"></script>
<script type="text/javascript" src="include/bootstrap.min.js"></script>
<script type="text/javascript" src="include/bootstrap-datepicker.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="bienvenido.php?login=<?=$textLogin;?>">Clínica 25 de Mayo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Inicio</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Mis Turnos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Reservar Turno</li>
<li>Ver Turnos Reservados</li>
<li>Anular Turno</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Mi Cuenta<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Ingreso de mis Datos y/o de Otra persona.</li>
<li>Datos Propios</li>
<li>Cambiar Contraseña</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Cerrar Sesión</li>
</ul>
</div>
</div>
</nav>
<form class="form-horizontal" name="formPwd" method="post" action="contraseniaGuardar.php">
<h4 class="text-center text-primary">Complete el formulario para cambiar la contraseña de acceso al sistema del Usuario<br><b><?=$_SESSION["nombreUsr"]; ?> <?=$_SESSION["apellidoUsr"]; ?></b></h4>
<input type="hidden" name="login" value="<?=$textLogin;?>">
<h2 class="text-center text-primary">Ingrese su nueva contraseña</h2>
<div class="form-group">
<label class="col-sm-3 control-label">Contraseña anterior:</label>
<div class="col-sm-6">
<input class="form-control" type="password" name="textAnterior" size="35" maxlength="50">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Nueva contraseña:</label>
<div class="col-sm-6">
<input class="form-control" type="password" name="textNueva" size="35" maxlength="50">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Confirme la contraseña:</label>
<div class="col-sm-6">
<input class="form-control" type="password" name="textConfirma" size="35" maxlength="50">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<input type="button" value="Guardar" class="btn btn-lg btn-success btn-block" onClick="javascript:modificar();">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<input type="button" value="Cancelar" class="btn btn-lg btn-primary btn-block" onClick="javascript:cancelar();">
</div>
</div>
</form>
</body>

How to make children DIV inherit parent DIV height

I saw many similar questions asked before, but I couldn't one that matched what I'm looking for.
I would like the height of the red boxes to stretch 100%, essentially inheriting the parent row's height.
I tried fiddling with jquery commands for awhile, but I haven't had much luck. Below is the code. Thanks!
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js">
$(document).ready(function() {
$("div.grid_leftcol").css("height", $(this).parent().innerHeight());
//This syntax probably doesn't make any sense, but it might give you a sense of what I'm trying to do
$("div.grid_leftcol").css("height", $("div.grid_leftcol").parent().innerHeight());
//This one kind of works, but the height of the red boxes are all the same.
});
</script>
<style>
.grid_row {
border-bottom:1px solid #aaa
}
.grid_rightcol_rxrow div { display:inline-block}
.grid_rightcol_rxrow div.grid_commentbox { display:block }
</style>
</head>
<body>
<div id="container" style="height:485px">
<div class="grid_row" style="background-color:#dde2e7" id="testrow">
<div class="grid_leftcol" id="testcol" style="display:inline-block; width:225px; background-color:red; vertical-align:top">
<div>Variable height content</div>
</div>
<div class="grid_rightcol" style="display:inline-block;">
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 1a</div>
<div style="width:110px">(OC)</div>
<div>John</div>
</div>
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 1b</div>
<div style="width:110px">(OC)</div>
<div>Mary</div>
<div class="grid_commentbox" style="padding:3px 3px 3px 25px">This is where comment goes</div>
</div>
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 1c</div>
<div style="width:110px">(OC)</div>
<div>Larry</div>
</div>
</div>
</div>
<div class="grid_row" style="background-color:#dde2e7">
<div class="grid_leftcol" style="display:inline-block; width:225px; background-color:red; vertical-align:top">
<div>Variable height content<br>
Variable height content<br>
Variable height content</div>
</div>
<div class="grid_rightcol" style="display:inline-block;">
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 2a</div>
<div style="width:110px">(OC)</div>
<div>Jen</div>
</div>
</div>
</div>
<div class="grid_row" style="background-color:#dde2e7">
<div class="grid_leftcol" style="display:inline-block; width:225px; background-color:red; vertical-align:top">
<div>Variable height content</div>
</div>
<div class="grid_rightcol" style="display:inline-block;">
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 3a</div>
<div style="width:110px">(OC)</div>
<div>Geroge</div>
</div>
<div class="grid_rightcol_rxrow">
<div style="width:22px">
<input type="checkbox" name="baba" value="checkbox">
</div>
<div style="width:110px">Row 3b</div>
<div style="width:110px">(OC)</div>
<div>Robert</div>
</div>
</div>
</div>
</div>
</body>
</html>

If you can use a table (and even though I haven't coded one in ages), this looks like it would be a perfect candidate. I refactored your code http://jsfiddle.net/brianflanagan/4NXzg/ as an example.