card title cuts off too early

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.


5 Replies 1 reply marked as answer

RK Revanth Krishnan Syncfusion Team April 19, 2021 12:05 PM UTC

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, 
 
 
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 



AM Amos April 20, 2021 09:50 PM UTC

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%;
}


RK Revanth Krishnan Syncfusion Team April 21, 2021 07:16 AM UTC

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, 
 
 
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 


Marked as answer

AM Amos April 21, 2021 04:25 PM UTC

Thanks! it worked!


RK Revanth Krishnan Syncfusion Team April 22, 2021 03:24 AM UTC

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 


Loader.
Up arrow icon