Subject falls to next line when clicking on +x more

[Amos]

Hi

When there are more items than what the schedule can show, there's a small link with +x more.

Clicking on it opens a smaller popup with all the events of that day.

If the subject is too long, it falls to the next line.

if the popup was in the same length of the day's cell, it would fit. See attached.

[Balasubramanian Sattanathan]

Hi Amos, 

Greetings from Syncfusion Support. 

We have analyzed the reported problem “Subject falls to next line when clicking on +x more” at our side and checked it our side by preparing the sample based on that. Since the appointment subjects are displayed properly. 

Sample: https://codesandbox.io/s/vue-template-wwxe2?file=/src/App.vue 

Kindly try and refer the above sample and let us know the below details if our solution doesn’t help. 

• Replicate your problem in the above shared sample or
• Share a sample illustrating the problem which would help us to proceed further.

Regards, 

Balasubramanian S 

[Amos]

The problem is related to the template I'm using in order to remove the time, and show only the subject.

            eventSettings: {

                dataSource: this.eventsData,

                template: function(e) {

                    return {

                        template: eventTemplateVue,

                    };

                },

            },

var eventTemplateVue = Vue.component("eventTemplate", {

    template: `<div class='template-wrap'>

        <div style="margin-left: 10px" :style='{background:data.PrimaryColor}'>{{data.Subject}}</div></div>`,

    data() {

        return {

            data: {},

        };

    },

});

The above works but for long subjects I see the described problem. So the question is how can I simulate the ellipsis in the template.

Thanks

[Balasubramanian Sattanathan]

Hi Amos, 

 

Thanks for the update. 

We have checked your reported problem “The original issue is that all drag and drop, editing, cancel, etc are slow when the cards are collapsed.” at shared code snippet. We suggest you to use the below CSS. 

 

style="white-space: nowrap;"  

 

Sample: https://codesandbox.io/s/vue-template-uxo14 

 

Kindly try the above sample and let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[Amos]

That works in a sense that it's not wrapping but is there a way to make it ellipsis in the end ?

I tried

style="margin-left: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden"

but still the text went on and if it was long enough, a horizontal scrollbar appeared and the text is white on white.

Instead I prefer it to ellipsis in the end.

Thanks

[Balasubramanian Sattanathan]

Hi Amos, 

 

Thanks for the update.  

 

We have validated your reported scenario and modified our shared sample based on your requirement using the below CSS. 

style="margin-left: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden" 

 

<style> 

.e-more-event-content{ 

  overflow: hidden !important; 

} 

.e-appointment { 

  border-radius: 10px !important; 

} 

</style> 

 

Sample: https://codesandbox.io/s/vue-template-7m0z6

 

Kindly try the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[Amos]

Nothing really changed and now the vertical scrollbar is gone when there are too many items to show in the popup.

I changed it to overflow-x: hidden so now the vertical scrollbar is back but if the subject is too long, it is "eaten" by the white text over white background.

Isn't there a way to simply make it ellipsis in the end just like with the regular behavior?

[Balasubramanian Sattanathan]

Hi Amos, 

 

Thanks for the update. 

 

We have tried to understand your requirement at our side. But we are unable to understand it. Kindly share your use case scenario with required screenshot/video to proceed further. 

 

Regards, 

Balasubramanian S 

[Amos]

See this?

See the "day)" string falls to the next line? So instead, I want to see ellipsis, meanin x... (meaning ends with 3 dots).

Usually, the following css white-space: nowrap; text-overflow: ellipsis; overflow: hidden does the trick but not in this case.

Notice that when I don't use a template, it does that exactly, shows ... in the end of the subject of the event, but when using a template, like I do, it doesn't.

[Balasubramanian Sattanathan]

Hi Herman Maat, 

Thanks for your update. 

 

We have validated your reported problem “it does that exactly, shows ... in the end of the subject of the event, but when using a template, like I do, it doesn't” at our side and we suggest you to apply the below CSS to the appointment element, and then the appointment subject will be displayed as ellipsis(…) 

 

.e-appointment { 

  border-radius: 10px !important; 

  display: block !important; 

} 

 

Sample: https://codesandbox.io/s/vue-template-30kyd 

Please check the sample and let us know if this is helpful. 

Regards, 

Balasubramanian S 

[Amos]

That didn't help but I did the following

template: `<div style="margin-left: 5px; white-space: nowrap !important; text-overflow: ellipsis !important; overflow-x: hidden !important;">{{data.Subject}}</div>`,

and now it's ok, thanks

[Vengatesh Maniraj]

Hi Amos, 

Thanks for the update. 

We are happy that you have found the solution. 

Please get in touch with us if you need any further assistance. 

 

Regards, 

Vengatesh