2 Replies Latest reply: Mar 22, 2013 11:59 AM by wowl RSS

    Resizeable Item

    wowl
      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
          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
            So close but so far, thanks it now works.