Problem with width 100%. issue #145

filiptepper · May 3, 2011 · 2a9f65f · 2a9f65f
1 parent 7abe9d2
commit 2a9f65f
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 0 deletions.
diff --git a/help/tests/css/issue145.css b/help/tests/css/issue145.css
@@ -0,0 +1,10 @@
+@CHARSET "UTF-8";
+
+#id1 { width: 500px; height: 50px; }
+
+#id2 { width: 100%; height: 10%; }
+
+#id3 { width: 100%; height: 10%; }
+.ifrm-id3 { width: 100%; height: 10%; }
+
+#id4 { width: 100%; height: 10%; }
diff --git a/help/tests/issue145.html b/help/tests/issue145.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
+<head>
+<title>Issue 145 Testcase - jWYSIWYG</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+<link rel="stylesheet" type="text/css" href="../lib/blueprint/screen.css" media="screen, projection"/>
+<link rel="stylesheet" type="text/css" href="../lib/blueprint/print.css" media="print"/>
+<!--[if lt IE 8]><link rel="stylesheet" href="../lib/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
+<link rel="stylesheet" type="text/css" href="../../jquery.wysiwyg.css"/>
+<link type="text/css" href="../lib/ui/jquery.ui.all.css" rel="stylesheet"/>
+<link rel="stylesheet" type="text/css" href="./css/issue145.css"/>
+<script type="text/javascript" src="../lib/jquery.js"></script>
+<script type="text/javascript" src="../../jquery.wysiwyg.js"></script>
+<script type="text/javascript" src="../lib/ui/jquery.ui.core.js"></script>
+<script type="text/javascript" src="../lib/ui/jquery.ui.widget.js"></script>
+<script type="text/javascript" src="../lib/ui/jquery.ui.mouse.js"></script>
+<script type="text/javascript" src="../lib/ui/jquery.ui.resizable.js"></script>
+<script type="text/javascript">
+(function ($) {
+	$(document).ready(function () {
+ 		$("#id1").wysiwyg({
+			controls: {
+				html: { visible: true }
+			}
+		});
+
+		$("#id2").wysiwyg({
+			iFrameClass: "",
+			controls: {
+				html: { visible: true }
+			}
+		});
+
+		$("#id3").wysiwyg({
+			iFrameClass: "ifrm-id3",
+			controls: {
+				html: { visible: true }
+			}
+		});
+
+		$("#btn1").click(function () {
+			if ("destroy" === this.value) {
+				$("#id1").wysiwyg("destroy");
+				this.value = "create";
+			} else {
+				$("#id1").wysiwyg({
+					controls: {
+						html: { visible: true }
+					}
+				});
+				this.value = "destroy";
+			}
+		});
+
+		$("#btn2").click(function () {
+			if ("destroy" === this.value) {
+				$("#id2").wysiwyg("destroy");
+				this.value = "create";
+			} else {
+				$("#id2").wysiwyg({
+					controls: {
+						html: { visible: true }
+					}
+				});
+				this.value = "destroy";
+			}
+		});
+
+		$("#btn3").click(function () {
+			if ("destroy" === this.value) {
+				$("#id3").wysiwyg("destroy");
+				this.value = "create";
+			} else {
+				$("#id3").wysiwyg({
+					controls: {
+						html: { visible: true }
+					}
+				});
+				this.value = "destroy";
+			}
+		});
+
+		$("#res").resizable({
+			alsoResize: null
+		});
+	});
+})(jQuery);
+</script>
+</head>
+
+<body><div class="container">
+<h1>jWYSIWYG</h1>
+<h2><a href="http://github.com/akzhan/jwysiwyg/issues/145">Issue 145</a>: Testcase</h2>
+
+<div id="res" style="border: 1px solid blue; width: 100%;">
+<textarea id="id1">width=500px, wysiwyg not stretched</textarea> <input type="button" value="destroy" id="btn1"/><br/>
+<textarea id="id2">width=100%, wysiwyg not stretched</textarea> <input type="button" value="destroy" id="btn2"/><br/>
+<textarea id="id3">width=100%, stretched, borders problem</textarea> <input type="button" value="destroy" id="btn3"/><br/>
+<textarea id="id4">width=100%, stretched</textarea><br/>
+</div>
+
+<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+
+</div></body>
+</html>