Naren
Naren

Naren

View Profile
  • 1
Contributor
Asked: 2021-09-28T07:57:56+05:30

Highlight Oracle Apex focus item label (Set Style)

  • 1

Hi I have a requirement to highlight the selected item or focused item label when there is a huge gap between the label and input box in a horizontal line bar items.

I would like to mix both css styles, otherwise i have to write code for each item such as on focus or lost focus. Please find sample css code below.

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {
background-color:#EFEAFC!important;
border-color:#926BFA!important;
}
.t-Form-label { font-weight:bold; font-size:11.5px; font-family: sans-serif; color:#132436;
text-transform: capiralize; /* Make text all uppercase */
}

apexcssoracle

    5 Answers

    1. Vinish

      Vinish

      View Profile
      Best Answer
      Enlightened

      Try the below jQuery code. Put this code in the Execute When Page load section, and this highlight the label with yellow color on focus:

      $('input').on('focus', function() {
$("#"+this.id+"_LABEL").css("background-color", "yellow");
}).on('blur', function() {
$("#"+this.id+"_LABEL").css("background-color", "white");
});
      • 0
    2. Naren

      Naren

      View Profile
      Contributor

      Was struggling to find this beautiful code from more than a week. It is working as expected and big million thanks to you Vinish.

      • 1
    4. Naren

      Naren

      View Profile
      Contributor
      This answer was edited.

      Hi Vinish,

      One last check on this requirement. If I want to highlight the next column "value" even though that item is Read Only, Is it possible?

      • 0
    5. Naren

      Naren

      View Profile
      Contributor

      I am using the below code, but somehow it is returning an error. In my case next item value is read only which needs to be highlighted.

      $('input').on('focus', function() {
           var self = $(this)
           , form = self.parents('form:eq(0)')
           , focusable
           , next       ;
           focusable = form.find('readOnly').filter(':readonly');
           next = focusable.eq(focusable.index(this)+1);
      $("#"+next.id).css("background-color", "#e2dcf5");
      }).on('blur', function() {
      $("#"+next.id).css("background-color", "white");
      });

      • 0
    7. Vinish

      Vinish

      View Profile
      Enlightened

      I think you will have to put some if conditions to determine the current item and the next. Below is an example:

      $('input').on('focus', function() {
$("#"+this.id+"_LABEL").css("background-color", "yellow");
if (this.id == "P1_YOURITEM") { 
   // then you know what is the next item
   $("#P1_READONLYITEM"+"_LABEL").css("background-color", "yellow");  
}
}).on('blur', function() {
$("#"+this.id+"_LABEL").css("background-color", "white");
$("#P1_READONLYITEM"+"_LABEL").css("background-color", "white"); 
});
      • 0

    You must login to add an answer.