Issue with selector in grid editor in v4.0.3.2 Private Cloud

I've got another issue related to this type ahead.  I went into a transaction that already had a few related details. When I go into edit mode and attempt to add another item in the grid control, the type ahead position is off.  For some reason it is showing up a ways down the page.  

If someone could provide me with some css code to override the default behavior while this is getting fixed, I would really appreciate it.  I have a new customer that needs this functionality and I'd rather have them go live on the new UI if possible.

It looks like it is the AutoSuggestControl that has the issue.

Hi,

I tried this locally with both themes but couldn't reproduce the behavior.

Would it be possible for you to share a sample app ?

Mani.

Hi ,

I can reproduce your first issue. This looks like a  UI bug.. I found a workaround for your first issue. Add a script component to your page by going to "Design this Page" option add below style and see DropDown looks better now?.. I tested in all themes, looks better give a try..  However your second issue seems to be not reproducible ..

<style>

 .roundedSectionBorder [id^='suggestions']{

   background-color: #fff;

   background-clip: padding-box;

   border: 1px solid #ccc;

   border: 1px solid rgba(0,0,0,.15);

   border-radius: 4px;

   box-shadow: 0 6px 12px rgba(0,0,0,.175);

   z-index: 1000001;

   margin-top:-2px;

   margin-left:-3px;

   color:#000;

 }

</style>

Hope this helps,

Vimal.

I'll give that a shot, thank you.

For the second issue, I had one of our web developers take a look and see if he could help me.  He pinpointed the issue to the setting of the top value of the AutoSuggestControl. He said it looks like it doesn't take into account any scrolling when determining what to set as the top value.  To reproduce, make sure you have your grid control big enough that you have to vertically scroll.

This is the line of code he referenced in the source code that would need to be updated.

AutoSuggestControl.prototype.getTop=function(){var oNode=this.textbox;var iTop=0;while(oNode.tagName!="BODY"){iTop+=oNode.offsetTop;oNode=oNode.offsetParent;}

return iTop;};

Hi ,

I can reproduce your second issue as well.. It seems to be a bug at our side, we will fix it for our next release 4.0.5. I can give you some workaround . Place below style and script code in App Setting Header section.  This applies to entire App. You can find option from App Setting -> More Actions->  Header And Footer.. Add it in Header textarea. You can ignore my previous suggestion this takes care of both overlapping text and placement of Auto Suggestion. Please try out and let me know.

<style>

.roundedSectionBorder [id^='suggestions']{

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid #ccc;

  border: 1px solid rgba(0,0,0,.15);

  border-radius: 4px;

  box-shadow: 0 6px 12px rgba(0,0,0,.175);

  z-index: 1000001;

  margin-top:-2px;

  margin-left:-3px;

  color:#000;

  max-height:300px;

  overflow-y:auto;

}

</style>

<script>

try{

if(AutoSuggestControl){

  AutoSuggestControl.prototype.getTop = function ()  {

   if(!rbf_isNewUI()){

       var oNode = this.textbox;

       var iTop = 0;

       while(oNode.tagName != "BODY") {

           iTop += oNode.offsetTop;

           oNode = oNode.offsetParent;

       }

       return iTop;

   }else{

       var oNode = $(this.textbox);

       var layer = $(this.layer);

       var iTop = oNode.offset().top;

       var layerHieght = layer.height();

       var viewportHeight = $(window).height();

       var isOverflowing = (iTop + layerHieght > viewportHeight);

       if(isOverflowing){

           iTop = iTop - layerHieght - oNode.outerHeight();

       }

       return iTop;

   }

 };

}

}catch(ex){};

</script>

Hope this helps,

Vimal.

I added a bug for the same.. TP :28932 .. For tracking you can use this defect Id.

Thanks Vimal, that looks like it works perfectly!