Calendar and Imagegallery breaking my layout

[ceoran]

I have this problem that for example Calendar doesn't fit on my webpage layout because it comes over it breaking the layout. Can I get it somehow that the Calendar's size is always the same and the events text sizes get smaller when there are lots of events so they all would fit to the Calendar?

Another problem is the Imagegallery. When I put lots of pictures on it, images doesn't fit to the layout and they come over it. I would want is so that I could scroll down my website when there are for example 400 images and they would be all in the layout. How can I do that?

[bass2u]

Hi ceoran ,

I have the same problem with the Calender. I would really like a max-width kind of property or a howto on limmiting the width.

Thanx in advance,

Bas

[Dr.CSS]

With out a link or some more info, like where in the page/HTML you put them or what the CSS looks like, we would just be guessing...

[calguy1000]

Please follow the forum rules when posting.

If you can't spend the time to provide context and examples with your post. Then why should we spend the time to reply?

[ceoran]

Okay, sorry about that. I tried to take a screenshot to express my problem.

[bass2u]

Sorry for the lack of information:

I have the same problem as ceoran, the calender is not bound by the content frame width.

I'm currently using the default Calender Example css and i have the following code on my Calender page:

{cms_module module='Calendar' table_id='big'}

The calender is loaded in "main" via the following template:

{* Change lang="en" to the language of your site *}



{sitename} - {title}
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}


{literal}



window.onload = function()
{
        menuSetting = {tl: false, tr: false, bl: {radius: 15}, br: {radius: 15}, antiAlias: true, autoPad: false}
        entrySetting = {tl: false, tr: false, bl: {radius: 15},br: {radius: 15}, antiAlias: true, autoPad: false}

        var menu = new curvyCorners(menuSetting, "menuItem");
        var entries = new curvyCorners(entrySetting, "entry");
        menu.applyCornersToAll();
        entries.applyCornersToAll();
}





function rollOver() {
  //change the colour
  element.className += (element.className?' ':'') + 'CSStoHighlight';
  //change display of child
  for( var x = 0; element.childNodes[x]; x++ ){
    if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].className += (element.childNodes[x].className?' ':'') + 'CSStoShow'; }
    if( element.childNodes[x].tagName == 'A' ) { element.childNodes[x].className += (element.childNodes[x].className?' ':'') + 'CSStoHighLink'; }
  }
}

function rollOff() {
  //change the colour
  element.className = element.className.replace(/ ?CSStoHighlight$/,'');
  //change display of child
  for( var x = 0; element.childNodes[x]; x++ ){
    if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].className = element.childNodes[x].className.replace(/ ?CSStoShow$/,''); }
    if( element.childNodes[x].tagName == 'A' ) { element.childNodes[x].className = element.childNodes[x].className.replace(/ ?CSStoHighLink$/,''); }
  }
}



=b){nw=b+"px";}if(w



#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}


{/literal}

{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" *}




{* The above JavaScript is required for CSSMenu to work in IE *}







    {* start accessibility skip links *}
   
      {anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}
      {anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}
   
    {* end accessibility skip links *}


   
    {* Horizontal ruler that is hidden for visual browsers by CSS *}


   {* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
   
{*









*}








         {*  {cms_selflink dir="start" text="$sitename"} *}
   

   {* End Header *}


   {* Start Search *}

          {search searchtext="" submit="Verstuur" resultpage="zoeken"}
 
   {* End Search *}


   {* Start Breadcrumbs *}
   
        {breadcrumbs starttext='Je bent hier' root='Home' delimiter='»'}
   {**}
   {* End Breadcrumbs *}


   {* Start Content (Navigation and Content columns) *}
   

      {* Start Navigation *}
     
      Menu
        {* menu boven alles *}
     
      {menu template='CBS De Wegwijzer - Menu sjabloon'}
       

   
     {* Start CBO Logo Test CurvyRound*}
        Stichting CBO
       
       
       
       
       
       

     
      {* End Navigation *}

      {* Start Content Area Test Nifty*}
     
{title}

{print showbutton=true class="true" script=true popup="true"}
         {content}
Laatst gewijzigd op: {modified_date format="%A %d %b 20%y om %T"}
     
         {* Start relational links *}


{anchor anchor='main' text='^ Top'}


            {cms_selflink dir="previous" label="Vorige pagina: "}

            {cms_selflink dir="next" label="Volgende pagina: "}
         
         {* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}

     {* *}
     
  {* End Content Area *}

{* End relational links *}

   
   {* End Content *}


{* end pagewrapper *}

   {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   
      {global_content name='footer'}
      {cms_module module="statistics"}
      
   {* End Footer  *}