• LeftColumn facet width

    By Fernando Levi 1 decade ago

    Hi,

    Is it possible to change the width of the LeftColumn facet, that is child of xe:applicationLayout?

    Regards

    Fernando

    • By script...

      By Philippe Riand 1 decade ago

      There isn't a direct attribute in the layout component, but you can do it using JavaScript when the page is loaded, by finding the dic and dynamically adding the style attribute

      • The node to apply the style has no id...

        By Fernando Levi 1 decade ago

        I tried your suggestion, and I finnaly got it to work.

        The trick was to get the node corresponding to the left facet  panel:

        <xp:panel xp:key="LeftColumn" id="panelLeftPane">

        and then get its grandparent, with:

         

        leftColumnName=&#39;#{id:panelLeftPane}&#39;;

var leftColumnObj=document.getElementById(leftColumnName);

leftColumnObj=leftColumnObj.parentNode;

leftColumnObj=leftColumnObj.parentNode;

leftColumnObj.style.width=&#39;150px&#39;;

        • Re: The node to apply the style has no id...

          By Lorcan McDonald 1 decade ago

          It shouldn't be necessary to use Javascript for this, the applicationLayout applies the class "lotusColLeft" to the column (this is a OneUI standard). So you should be able to set the width easily using a css rule similar to the following:

          .lotusColLeft{

              width: 150px;

          }

          If you have a particular reason to style the that the facet generates you might be able to use the following[1] to style only the direct child of the left column (this means it won't cascade further into the menu etc)

          .lotusMain .lotusColLeft > span{

              background: silver;

          }

          Typically we wouldn't recommend using HTML element IDs to set styling in XPages as they are supposed to be unique in an HTML document, which limits the reusability of Custom Controls or Dojo Dijits. Instead you should use unique class names, perhaps with a prefix specific to your project[2].

          You can use dojo.query() to select nodes from the page using the CSS selector syntax[3] which is often more convenient than using document.getElementById(), it's shorter to type at the very least! For instance to get a list of all the links in the banner just call dojo.query('.lotusBanner a'). This returns a nodelist which Dojo has extended with a lot of useful functionality[4].

           

          [1] Some older versions of Internet Explorer my not support the child selector.

          [2] We often use "xsp" in the XPages stylesheets.

          [3]For further reading on CSS selectors: http://www.w3.org/TR/CSS2/selector.html

          [4] http://dojotoolkit.org/api/1.6/dojo/NodeList