Fit to dropdown

Forms SharePoint Online
1

I have created a customize dropdown with the help of below documentation
https://plumsail.com/docs/forms-sp/how-to/lookup-view.html

It is all working well, except the description is a bit long in our case and will not fit in one line. Is there a way to wrap it to make it multi-line or something. we hare already reduced the font size but didnt fit in one line .

image
image890×267 26.5 KB

please see the code.

js

 var template = '';
    template += '# if (data.Image) { # <img src="#= data.Image.Url #" width="120" height="90" class="lookup-image" /> # } #';
    template += '<span class="lookup-col">';
    template += '<p class="lookup-title"> #: data.Title # </p>';
    template += '<p class="lookup-desc"> #: data.Category ? data.Category.Title : "" #';
   //  template += '<p class="lookup-desc"> #: data.TitleMain ? data.TitleMain.Title : "" #';
    template += '#: data.Description ? " - " + data.Description : "" #</p>';
  //  template += '<p class="lookup-desc"> #: data.Cost : "" #';
    template += '<p class="lookup-price"> #: data.Price ? "Approx. Cost : " + data.Price : "" # KWD </p>';
    template += '</span>';
    
    fd.field('Item').widgetOptions = {
        template: template,
        height: 400,
        virtual: {
            itemHeight: 100
        },
        dataSource: {
            pageSize: 16
        }
    }

css
.k-dropdown .k-dropdown-wrap .k-input{
height: auto !important;
}

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

.lookup-title{
margin-bottom: 3px;
font-size: 16px;
font-weight: bold;
}

.lookup-desc{
margin-bottom: 3px;
font-size: 12px;
word-wrap: break-word;
/* color: gray;*/
}

.lookup-price{
margin-bottom: 5px;
font-size: 15px;

}

.lookup-image{
margin: 5px;
}

2

any updates on the above please?

3

Dear @Rinu,
You just need to change CSS a little, like this:

.lookup-desc{
    white-space: pre-wrap;
    margin-bottom: 3px;
    font-size: 14px;
    /* color: gray;*/
}
1 Like
4

Thanks Nikita,
is there a way to make the alternative row colors on the dropwn?

5

Dear @Rinu,
Sure, try the following CSS:

.k-list-container ul.k-virtual-list li:nth-of-type(odd) {
    background: lightblue;
 }
1 Like