This discussion is archived
2 Replies Latest reply: Mar 22, 2013 9:59 AM by wowl RSS

Resizeable Item

wowl Newbie
Currently Being Moderated
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
  • 1. Re: Resizeable Item
    VC Guru
    Currently Being Moderated
    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();
       });
  • 2. Re: Resizeable Item
    wowl Newbie
    Currently Being Moderated
    So close but so far, thanks it now works.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points