Timeline error when changing style

[impakt42]

Hello,

I've just made a first integration of the Apollo content,
when arriving on my timeline page, it is rendered correctly,
but when i change the style (using the provided menuButton or the topbar-themeswitcher),
then my timeline disappear (and no error on console)



any idea ?

i suppose there might be some kind of conflict between Apollo & timeline divs or styles...!?!?!?

any help welcomed

thx


i42

[huseyinT]

Could you send your code or sample code ?

[impakt42]

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
                
    <ui:define name="title">Campaign Page</ui:define>

    <ui:define name="content">	

		<p:layout style="min-width:600px;min-height:650px;">
    			
			<p:layoutUnit id="miscLayoutUnit"  position="west" size="1000" minSize="1000" maxSize="1100">
			</p:layoutUnit>
				
			<p:layoutUnit id="timelineLayoutUnit" position="center" size="500" minSize="500" maxSize="700" >
				<p:timeline id="timeline" value="#{campaignController.modelTimeLine}" eventMargin="10" eventMarginAxis="0" showNavigation="true" showButtonNew="false" axisOnTop="true" stackEvents="false" />

				<style type="text/css">
	
				    div.timeline-frame 
				    {  
				        border-color: #5D99C3;  
				        border-radius: 5px;  
				    }  
	 
				    div.timeline-axis 
				    {  
				        border-color: #5D99C3;  
				        background-color: #5D99C3;  
				        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5D99C3', endColorstr='#3A6DA0') alpha(opacity = 100);  
				        background: -webkit-gradient(linear, left top, left bottom, from(#5D99C3), to(#3A6DA0));  
				        background: -moz-linear-gradient(top,  #5D99C3,  #3A6DA0);  
				        -khtml-opacity: 1;  
				        -moz-opacity: 1;  
				        opacity: 1;  
				    }  
	 
				    div.timeline-groups-axis 
				    {  
				        border-color: #5D99C3;  
				    }  
	 
	    			div.timeline-groups-axis-onleft 
	    			{  
				        border-style: none solid none none;  
				    }  
	 
	    			div.timeline-axis-text 
	    			{  
				        color: white;  
				    }  
	 
	    			div.timeline-event 
	    			{  
				        color: white !important;  
				        border-radius: 5px !important;  
				    }  
	 
	    			div.timeline-event-content 
	    			{  
				        padding: 5px;  
				        text-shadow: none;  
				    }  
	
				    div.campaignRunning 
				    {  
				        background: DarkSeaGreen none !important;    
				        border-color: #136e13 !important;     
				        height: 37px;  
				    }  
	
				    div.campaignDone 
				    {  
				        background: LightSteelBlue none !important;    
				        border-color: #136e13 !important;     
				        height: 37px;  
				    }
				    
				    div.campaignToCome 
				    {  
				        background: DarkCyan none !important;    
				        border-color: #136e13 !important;     
				        height: 37px;  
				    }  
				      
				    div.timeline-event-selected 
				    {  
				        background: #BECEFE none !important;  
				        border-color: #97B0F8 !important;  
				    }  
				    
				    .done 		{background: LightSteelBlue !important ;}
				    .running 	{background: DarkSeaGreen  	!important ;}
				    .toCome 	{background: DarkCyan   	!important ;}
	
					.ui-layout-unit-content{background: white; border-color: white; border: 0px none; overflow: auto; }
					
					.ui-layout-pane-north.ui-widget-content{border: 0;}
	 				.ui-layout-pane-south.ui-widget-content{border: 0;}
	 				.ui-layout-pane-east.ui-widget-content{border: 0;}
					.ui-layout-pane-west.ui-widget-content{border: 0;}
	 				.ui-layout-pane-center.ui-widget-content{border: 0;}
					
				</style>
				
			</p:layoutUnit>
		</p:layout>



	</ui:define>
	 
</ui:composition>

[impakt42]

Problem comes from the <p:layout & <p:layoutUnit, if not present, changing style is not altering the timeline, if present, timeline disappears...

[cagatay.civici]

I strongly suggest dropping p:layout, as Apollo is a fully featured layout itself, p:layout is deprecated in favor of CSS based modern layouts.