Resizeable Item

Question

Hi,
Is it possible to make an lov item sizeable by the user in the same way you can resize a text area item. I've not been able to find an example on OTN.
I've tried using the jQuery example from here http://jqueryui.com/resizable/#default but with limited success.
What I've done is
- create a select list item with a height of 10
- set HTML Form Element Attributes to class="ui-widget-content"
- set HTML Table Cell Attributes to id="resizable"
- add the following to the page HTML Header
+<script src="http://code.jquery.com/jquery-1.9.1.js"></script>+
+<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>+
+<link rel="stylesheet" href="/resources/demos/style.css" />+
+<style>+
+#resizable { width: 150px; height: 150px; padding: 0.5em; }+
+#resizable h3 { text-align: center; margin: 0; }+
+</style>+
+<script>+
+$(function() {+
+$( "#resizable" ).resizable();+
+});+
+</script>+
Any ideas what I'm doing wrong, I've recreated it an example here.
http://apex.oracle.com/pls/apex/f?p=45978:1
Thanks in advance

Answer 1

wowl wrote:
Hi,
Is it possible to make an lov item sizeable by the user in the same way you can resize a text area item. I've not been able to find an example on OTN.
I've tried using the jQuery example from here http://jqueryui.com/resizable/#default but with limited success.
What I've done is
- create a select list item with a height of 10
- set HTML Form Element Attributes to class="ui-widget-content"
- set HTML Table Cell Attributes to id="resizable"
- add the following to the page HTML Header
+<script src="http://code.jquery.com/jquery-1.9.1.js"></script>+
+<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>+
+<link rel="stylesheet" href="/resources/demos/style.css" />+
+<style>+
+#resizable { width: 150px; height: 150px; padding: 0.5em; }+
+#resizable h3 { text-align: center; margin: 0; }+
+</style>+
+<script>+
+$(function() {+
+$( "#resizable" ).resizable();+
+});+
+</script>+
Any ideas what I'm doing wrong, I've recreated it an example here.
http://apex.oracle.com/pls/apex/f?p=45978:1
First you have to read this thread to understand how to use Jquery UI in APEX {thread:id=2514889}
Once you have corrected the script & link tags then amend your code to
   $(function() {
     $( "#P1_TEST" ).resizable();
   });