function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rahavan Arumugam AlameluRahavan Arumugam Alamelu 

how to split the value of output text in multiple lines

Hi

am populatig the value from the wrapper class list ito the column in pageblock table. It works perfectly if the comment field !SD.syscomment has less characters. 

The table is breaking and causig mis-alignment in the div if the comment has long values. Below is the code. please advise how to break the long comments into multiple lines within the outputtext
  
<div id="syshoverPanel" style="width: 300px;height: auto;position: fixed;background-color: #FFFFFF;overflow-y: auto;border: 1px solid #C8C8C8;border-radius: 2px;z-index:9999;display:none;">
                                                                <apex:outputpanel >
                                                                <apex:pageblock id="sysdetailpb">
                                                                    
                                                                        <apex:pageblocktable value="{!SystemDetails}" var="SD" style="color:#555;">
                                                                            <apex:column Style="text-align:right;">
                                                                                <apex:outputText value="{!SD.sysNumber}:"></apex:outputText><br/>
                                                                                <apex:outputtext value="Comments:" style="font-weight:bold"> </apex:outputtext><br/>
                                                                                <apex:outputText value="Entitlement Number:" style="font-weight:bold"> </apex:outputText><br/>
                                                                                <apex:outputText value="Manufacturer:" style="font-weight:bold"></apex:outputText><br/>
                                                                                <apex:outputText value="Manufacturer Ref:" style="font-weight:bold"></apex:outputText><br/>
                                                                                <apex:outputText value="Reseller:" style="font-weight:bold"></apex:outputText><br/>
                                                                                <apex:outputText value="MSP:" style="font-weight:bold"></apex:outputText><br/>
                                                                                <apex:outputText value="L1 Support Provider:" style="font-weight:bold"></apex:outputText>
                                                                            </apex:column>
                                                                             <apex:column >
                                                                                <apex:outputText value="{!SD.sysAccName}"></apex:outputtext><br/>
                                                                                <apex:outputText value="{!SD.syscomment}"> </apex:outputText><br/>
                                                                                <apex:outputText value="{!SD.sysEntId}"> </apex:outputText><br/>
                                                                                <apex:outputText value="{!SD.sysMFG}"> </apex:outputText><br/>
                                                                                <apex:outputText value="{!SD.sysMFGRef}"> </apex:outputText><br/>
                                                                                <apex:outputText value="{!SD.sysreseller}"> </apex:outputText><br/>
                                                                                <apex:outputText value="{!SD.MSP}"> </apex:outputText><br/>
                                                                                <apex:outputText value="{!SD.sysSuppBy}"> </apex:outputText><br/>
                                                                              </apex:column>   
                                                                        </apex:pageblocktable>
                                                                        
                                                                    </apex:pageblock>

 
Best Answer chosen by Rahavan Arumugam Alamelu
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
Thank You Pradeep. Can you give some code to fit my scenario.. so that I can try to create the table. Thanks

All Answers

pradeep kumar yadavpradeep kumar yadav
You can use standard slds css by adding  
<header>
    <apex:slds/>
</header>

and use standard css :'' .slds-scope .slds-truncate'' style

or you can write your own css  
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

 
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
ARe you saying to write own class for styling of specific outputtext value="{!SD.syscomment}"> </apex:outputText><br/>??
 
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
Tried it.. I don't want the overflow to happen. If the commet is long, want to split it and display in multiple lines. Please see screennshot of what am gettig after applying the styles. User-added image
pradeep kumar yadavpradeep kumar yadav
Use max-width: 300px on div,
Use text-overflow: ellipsis; and white-space: pre-wrap; css on outputText and escape="false" attribute on outputText.
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
Thank You

The ccomments are gettig displayed in multiple lines now.. But it causes the mis-alignment in the div again...
The labels such as comments:, Entitlement: are getting misaligned...Have attached the screenshots with proper aligment(when displayig short comment value) and when we display long value.

Please advise.
User-added imageUser-added image
pradeep kumar yadavpradeep kumar yadav
You can use html <table> attribute and <td> <tr> and also use repeat for table creation,
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
Thank You Pradeep. Can you give some code to fit my scenario.. so that I can try to create the table. Thanks
This was selected as the best answer
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
Thanks Pradeep..Able to fix the issue following ur suggestion... Need another help... Currently popup postion is determined through clientX and clientY by using mousemove(function(event){ }    But the need is to copy the values in the popup. What happens now is whenever i move the mouse, the pop dialog keeps moving, as it set the top, left stying of popup based on clientx and client y values. Kindly advise how to achive on copying the values in the popup by selecting them. 

Thanks
pradeep kumar yadavpradeep kumar yadav
You can pass this in javascript function populate the value for this to pop up.
You have to write common function
function abc(obj,isShow) {
if(isShow) {
    $(obj).parent().next().children().text(msg);
   $(obj).parent().next().show();

    }
else
      $(obj).parent().next().hide();
 }

html-onmouseover="abc(this, true)"
html-onmouseout="abc(this, false)"
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
Thanks PRadeep. To try to undrestand your answer am placing my javascirpt and visualforce code here which handles the popup when hovering over the command link

Javascirpt: 
var j = jQuery.noConflict();
     j(window).load(function(){
     j('[id=Enterprisetab1]').mousemove(function(event){
     var x=event.clientX;
     var y=event.clientY;
     var syspanel=document.getElementById('syshoverPanel');
     syspanel.style.top=y+'px';
     syspanel.style.left=(x+20)+'px';
     
     });
     });
     
     function systemhover(systemid)
     {
      window.setTimeout(function(){document.getElementById('syshoverPanel').style.display = 'block'},2500);
      SystemVal(systemid);
     }
     
     function systemhoverhide()
     {
      document.getElementById('syshoverPanel').style.display = 'none';
     }

through below am calling mouseover action 
<apex:CommandLink styleClass="sysStyle" onclick="clearURLParam();" html-data-placement="right" action="{!BindDetailsGridFromSystem}" onmouseover="systemhover('{!entSys.sysId}');" onmouseout="systemhoverhide();" status="pleasewait">

action function which gets invoked via javascirpt function
  
<apex:actionFunction action="{!DisplaySystemDetails}" status="syspoploading" name="SystemVal" rerender="sysdetailpb">
               <apex:param name="systemid" value="" assignTo="{!systemid}"/> </apex:actionFunction>
               </apex:form>
the contents gets displayed in 'syshoverPanel' which is a adiv when  hovering over command link. What i want now is the ability to hover over the popup(syshoverpanel) and copy the details over there. Please advise how i can apply your solution here. 

thanks
 
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
Hi Pradeep, 

Can you please help me on this. 

Thanks
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
Can anyone please help me on this question..
Rahavan Arumugam AlameluRahavan Arumugam Alamelu
HI Pradeep, 

Can you please assit me on this requirement. I need urgent help.

Thanks