card title cuts off too early

[Amos]

Hi

Please see screenshot

When the user narrows down the screen, the card's title is cut off too early even though there is enough space for it.

It is cut off and ... (ellipsis) appears instead.

[Revanth Krishnan]

Hi Amos, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When the user narrows down the screen, the card's title is cut off too early even though there is enough space for it. It is cut off and ... (ellipsis) appears instead.” 

 

We tried to reproduce the issue from our side by rendering the card title with a longer text and ensured by narrowing the screen to reduce the card width, but we couldn’t reproduce the issue from our end. We have prepared a sample for your reference, 

 

Sample: https://stackblitz.com/edit/react-fmaa6w-k2ahs8?file=index.js 

 

We suspect that the issue may have occurred due to the template styles inside the card title may have caused the issue, so can you please ensure the issue once without the template styles? 

 

If the issue still occurs can you please share us with more following details, 

• The entire code snippet of the card rendered in the application.
• The exact package version of the component used in the application.
• If possible please share us with the issue reproducible code or please modify the shared sample with the issue reproducing steps.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

[Amos]

Hi there

the problem is me using the following css to put the card in the center of the screen.

Because .e-card .e-card-header css has width: inherit; the width of the header is half the card's width causing it to be cut off. Any idea how to overcome this without manually defining a new "width" property in the css? Maybe a better css to position the card in the center or forcing the header's width to be "full"?

Thanks

.screenCenter {
    position: relative;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
}

[Revanth Krishnan]

Hi Amos, 

 

 

Good day to you. 

 

 

We have further validated your query with the shared CSS styles and we tried to reproduce the issue with the CSS styles applied to the card, but we couldn’t reproduce the issue from our end. We have prepared a sample for your reference, 

 

Sample: https://stackblitz.com/edit/react-fmaa6w-pr3wch?file=index.js 

 

We suspect that the issue occurred because the CSS styles with the class name ‘screenCenter’ is added directly to the card element with class ‘e-card’. Can you please add a div element wrapped around the card element and then add the class ‘screenCenter’. 

 

Code Snippet: 

 

render() { 

  return ( 

    <div class="screenCenter"> 

      <div className="e-card" id="basic"> 

        <div className="e-card-header"> 

          <div className="e-card-header-caption"> 

            <div className="e-card-title"> 

              <div> 

                This is a card title with long text This is a card title with 

                long textThis is a card title with long textThis is a card 

                title with long textThis is a card title with long text 

              </div> 

            </div> 

          </div> 

        </div> 

        <div className="e-card-content"> 

          Communicating with Windows 10 and Other Apps, the second in a 

          five-part series written by Succinctly series author Matteo Pagani. 

          To download the complete white paper, and other papers in the 

          series, visit the White Paper section of Syncfusion’s Technology 

          Resource Portal. 

        </div> 

      </div> 

    </div> 

  ); 

} 

Note: The ‘.e-card’ class has CSS style width as ‘100%’. 

 

If the issue still occurs please share us with more following details, 

• The entire code snippet of the card rendered in the application.
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing code.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

[Amos]

Thanks! it worked!

[Revanth Krishnan]

Hi Amos, 

 

Thanks for the update. 

 

We are glad that the reported issue is resolved. Please let us know if you need any further assistance. 

 

Regards, 

Revanth