1. Home
  2. Forum
  3. Angular - EJ 2
  4. removing the default line breaks upon clicking enterfor new line

removing the default line breaks upon clicking enterfor new line

HI Team,
The default RTE beheviour upon clicking of enter is it goes to new line with some top and bottom margin to mimic line breaks
SO is there a way to remove the current beheviour so as to not give spaces between rows of lines ?

Thanks,
Aditya

7 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team October 28, 2020 08:22 AM UTC

Hi Aditya, 
 
Greetings from Syncfusion support, 
 
We have validated your reported query. Yes, you can remove the spaced between the line using the CSS style margin-bottom for the Rich Text Editor contents. Check the below CSS style and sample for reference. 
 
CSS style:  
 
 
.e-richtexteditor .e-rte-content .e-content p { 
       margin-bottom: 0px; 
} 
 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


AM Aditya Murthy replied to Indrajith Srinivasan November 2, 2020 11:55 AM UTC

Hi Aditya, 
 
Greetings from Syncfusion support, 
 
We have validated your reported query. Yes, you can remove the spaced between the line using the CSS style margin-bottom for the Rich Text Editor contents. Check the below CSS style and sample for reference. 
 
CSS style:  
 
 
.e-richtexteditor .e-rte-content .e-content p { 
       margin-bottom: 0px; 
} 
 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


Hi Team,

Thanks for the input . This solution worked..

Regards,
Aditya

Marked as answer
RK Revanth Krishnan Syncfusion Team November 3, 2020 08:19 AM UTC

Hi Aditya, 
 
 
Good day to you. 
 
 
We are glad that the provided solution is working and the reported issue has been resolved. 
 
Regards, 
Revanth 


AM Aditya Murthy November 5, 2020 12:28 PM UTC

Hi Team ,
the issue is solved at UI level but when i send the content over the api i can still see the margin present hence resulting in a double line break
So in short this solution applies only on DOM level but when i bind it to a variable i can see the margin.
Please let me know a possible solution

IS Indrajith Srinivasan Syncfusion Team November 6, 2020 11:01 AM UTC

Hi Aditya, 
 
Good day to you, 
 
We have validated your reported query. The style suggested, will work only for the elements added in the Rich Text Editor. Can you please share us the following details, 
 
  • How you are saving the value in the variable and previewing it ?
  • Please let us know where you can see the margin ?
 
Regards, 
Indrajith 


AM Aditya Murthy November 6, 2020 01:18 PM UTC

HI ,
Thanks for the reply.

  • How you are saving the value in the variable and previewing it ? - im doing a ng model to a variable and upon click of a button i need to call api and update it to database. but when i copy paste the variable in a html file, i see the margins on top and bottom which i removed using custom css in editor.
  • Please let us know where you can see the margin ? - top and below

i have attached 2 files for your reference. Please refer the character 'f' typed in new line using enter. in editor its doesnt show any margins , but when i send it in api i see margins 

Regards,
Aditya

Attachment: screenshots_14f1e0c4.zip

IS Indrajith Srinivasan Syncfusion Team November 9, 2020 11:56 AM UTC

Hi Aditya, 
 
Thanks for the update, 
 
Based on the shared screenshots, the spaces generated are not the styles applied from the Rich Text Editor. It seems to be the default spaces, for the new line created using enter key action. Also, please let us know how are you getting the text value from Rich Text Editor and passing it to the Database ? 
 
Regards, 
Indrajith 


Loader.
Up arrow icon