30 Jun 2013

Resizing of Search and Select dialog of LOV Components

Playing with skin selectors of ADF Faces LOV components I found a new selector announced in release notes for 11.1.1.7.0 and 11.1.2.4.0 versions. The -tr-stretch-search-dialog selector enables the feature of resizing LOV's search and select dialog, allowing users to interact with this dialog in more convenient way.   

By default the feature is disabled and in order to enable it the source code in the css file for the inputListOfValues component should look like this:

af|inputListOfValues{
             -tr-stretch-search-dialog: true;
           } 


And for the inputComboboxListOfValues it should look like this:

af|inputComboboxListOfValues{
             -tr-stretch-search-dialog: true;
           } 



The cool thing is that when end user is resizing the dialog, it is going to stretch its content as well:




The sample application for this post can be downloaded here. It requires JDeveloper 11.1.2.4.0.

That's it!


4 comments:

  1. Hello,

    Thanks for the solution !

    I have the same problem in adf 12.1.3, and your solution works !

    But do you know how we can increase the min-height of the query section ?

    ReplyDelete
  2. Play around with the selectors and you may find a correct solution. In general if you want to increase the minimum height and width, use the following snippet:

    af|inputListOfValues,
    af|inputComboboxListOfValues
    {
    -tr-stretch-search-dialog: true;
    }

    af|inputListOfValues::dialog af|dialog::content-center,
    af|inputComboboxListOfValues::dialog af|dialog::content-center
    {
    min-width:700px;
    min-height:500px;
    }

    Cheers
    Gopal

    ReplyDelete
  3. Thank you. This helped me to fix search dialog width issue in 12.1.3.

    ReplyDelete

Post Comment