2011-04-15 10 views
5

Me gustaría crear un menú dijit que tenga una barra de desplazamiento vertical.Cómo poner una barra de desplazamiento vertical en un menú dijit

He intentado hacer esto:

pMenu = new dijit.Menu({ 
      templateString: '<div style="height: 75px; overflow-y: auto; overflow-x:hidden">' + dojo.cache("dijit", "templates/Menu.html") + '</div>' 
     }); 

Cuando hago eso, la barra de desplazamiento vertical aparece pero la anchura es pequeña (que no se expandió para dar cuenta de ancho de las barras de desplazamiento).

¿Hay una mejor manera de hacerlo? Yo quiero un atributo esencialmente maxHeight en dijit.menu

Respuesta

0

Esto es sólo una idea que le muestre cómo se puede detectar la presencia elemento de barra de desplazamiento:

<html> 
    <head> 
     <title>Detect Scrollbars Presence</title> 
     <script type="text/javascript"> 
      function verticalScrollBarExists(id) 
      { 
       var element = document.getElementById(id); 
       oldScrollTop = element.scrollTop; 
       element.scrollTop = 1; 
       if (element.scrollTop > 0) 
       { 
        element.scrollTop = oldScrollTop; 
        document.getElementById('scrollStatus').innerHTML = 'scroll bar visible'; 

        // increase element width 
        element.style.width = '310px'; 
       } 
       else 
       { 
        document.getElementById('scrollStatus').innerHTML = 'scroll bar not visible'; 

        // restore element width 
        element.style.width = '300px'; 
       } 
      } 

      function add() 
      { 
       var element = document.getElementById('testElement'); 
       element.innerHTML = element.innerHTML + ' Stuff'; 
      } 

      function remove() 
      { 
       var element = document.getElementById('testElement'); 
       element.innerHTML = element.innerHTML.substring(0, element.innerHTML.length - 6); 
      } 

      window.onload = function() 
      { 
       setInterval('verticalScrollBarExists("testElement")', 500); 
      }; 
     </script> 
     <style type="text/css"> 
      #testElement 
      { 
       width: 300px; 
       height: 40px; 
       background-color: blue; 
       color: white; 
       overflow: auto; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="testElement">Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff</div> 
     <div id="scrollStatus">Uninitialised</div> 
     <input type="button" onclick="add()" value="Add" /> 
     <input type="button" onclick="remove()" value="Remove" /> 
    </body> 
</html> 
Cuestiones relacionadas