Intermittent issue with customized lookup sizing

Hello,
I have set up a new form using both of these:

https://plumsail.com/docs/forms-sp/how-to/lookup-filter.html
https://plumsail.com/docs/forms-sp/how-to/lookup-view.html

The second lookup includes an image so I have included that in the lookup results. Most of the time it works perfectly, and displays results like this:

But sometimes it will mess up the sizing and instead display like this:

collapsed

It seems to be a very intermittent bug. I have tried clearing the browsers cache, using different browsers, and it will mostly work fine, but maybe once in every 10 to 20 times it will render incorrectly. When this happens, I close the form, create a new one, and it will always work perfectly that second time (and a random number of times after that as well).

I haven't noticed any errors logged in the browsers console to indicate a problem. I have also tried removing all CSS in the form, and even simplifying the template var but none of them have had any effect.

It might be worth noting that this form is launched from another forms edit page in a list control.

Any ideas how I could go about fixing this?

Hello @nzguitarman,

Are you facing the same issue when opening the form from the SharePoint list directly?
Please share the code you are using on the form.

Opening the form directly from the list has the same result - first time I tried it was incorrect, then 5 times after it was fine with refreshes each time. Related JS is:

fd.spBeforeRender(function() {
var template = '';
template += '# if (data.Image) { # <img src="#= JSON.parse(data.Image).serverRelativeUrl #" width="50" height="50" class="lookup-image" /> # } #';
template += '<span class="lookup-col">';
template += '<p class="lookup-title"> #: data.Title # </p>';
template += '<p class="lookup-sizes"> #: data.Sizes # </p>';
template += '</span>';

fd.control('ItemLookup').widgetOptions = {
    template: template,
    height: 285,
    virtual: {
        itemHeight: 80
    },
    dataSource: {
        pageSize: 4
    }
} 

});

And the CSS:

.lookup2item{
height: 285px !important;
padding-left: 5px;
}

.lookup-col{
flex-direction: column;
margin-bottom: 1px;
padding-top: 3px;
margin-left: 1px;
}

.lookup-title{
margin-bottom: none;
padding: none;
margin-top: 2px;
margin-bottom: 0px;
font-size: 16px;
}

.lookup-sizes{
padding: none;
margin: 2px;
font-size: 12px;
}

.lookup-image{
margin: 4px;
}

Hello @nzguitarman,

Please try out this code:

fd.spRendered(function() {
    var template = '';
    template += '# if (data.Image) { # <img src="#= JSON.parse(data.Image).serverRelativeUrl #" width="50" height="50" class="lookup-image" /> # } #';
    template += '<span class="lookup-col">';
    template += '<p class="lookup-title"> #: data.Title # </p>';
    template += '<p class="lookup-sizes"> #: data.Sizes # </p>';
    template += '</span>';

    fd.control('ItemLookup').ready().then(function() {
            fd.control('ItemLookup').widgetOptions = {
                height: 400,
                virtual: {
                    itemHeight: 100
                },
                dataSource: {
                    pageSize: 36
                }
            }    

            fd._vue.$nextTick().then(function() {
                fd.control('ItemLookup').widgetOptions = {
                    template: template,
                }    
            });
    });
});
1 Like

Fantastic, that appears to be working consistently now, thank you very much for your help :grin:

1 Like