Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
5368
WebExplorerBar height 100%
posted

I am attempting to upgrade an UltraWebListbar to the WebExplorerBar.  Basically, this UltraWebListBar resides on the left side of the browser window, with height at 100%.  Each group contains a Template which contains other html.  This is used for selecting criteria for a report.

 

The UltraWebListBar honors the Height attribute, and is always sized to 100%.  The groups are stacked at the very top and very bottom of the page, with the selected group's content using all of the remaining available height.  It doesn't matter what the size of the actual content is, it honors the height, and displays scrollbars on the content as necessary.

 

For the life of me, I can't get the WebExplorerBar to behave the same way.  It seems to ignore the Height property altogether, and instead sizes itself vertically based on the content size.  Even with the height at 100%, the bottom group is half-way up the page, and the selected group is tightly compressed.  If I select a group that contains an item with a lot of content, it forces the bottom groups down below the bottom of the page so you have to scroll to see them.  I can't specify a item heights, because I can't predict what the browser size will be.  Besides, the item height ought to be irrelevant.  I can put a div in the template and use overflow to display scrollbars if necessary.

 

I really could use some guidance here.  How can I get the WebExplorerBar to honor its Height property, when it is set to 100%? 

I am running 12.2,20122.2075 of the Infragistics4.Web.v12.2.dll, however I am stuck on version 11.1.20111.2238 of the Misc and Shared libraries until I finish upgrading the legacy controls. I don't know which library the WebExplorerBar is in.

 

Parents
No Data
Reply
  • 5368
    Offline posted

    Here is sample code that illustrates the issue. 

     

    In the example on the left, all groups should always be visible, and scrollbars should be used if items are too large.

    In the example on the right, groups 2, 3, and 4 should be aligned to the bottom of the page, so that the control is sized to 100% of the height.

     

     

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>

    <!DOCTYPE html > <html> <head runat="server">     <title></title>     <style type="text/css">         html, body, form         {             width: 100%;             height: 100%;             margin: 0px;         }         .paneLeft         {             position: absolute;             left: 5px;             top: 5px;             width: 48%;             bottom: 5px;             border-color: black;             border-width: 1px;             border-style: dotted;         }         .paneRight         {             position: absolute;             width: 48%;             top: 5px;             right: 5px;             bottom: 5px;             border-color: black;             border-width: 1px;             border-style: dotted;         }     </style> </head> <body>     <form id="form1" runat="server">     <ig:WebScriptManager ID="WebScriptManager1" runat="server">     </ig:WebScriptManager>     <div class="paneLeft">         <ig:WebExplorerBar ID="WebExplorerBar1" runat="server" Width="250px" StyleSetName="IG"             Height="99%" GroupExpandBehavior="SingleExpanded" EnableSelection="true">             <Groups>                 <ig:ExplorerBarGroup Text="Group 1">                     <Items>                         <ig:ExplorerBarItem>                             <Template>                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec                                 ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue                                 ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum                                 vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas                                 et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate                                 dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante                                 placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus                                 risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit                                 venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus                                 magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue                                 eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum,                                 sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna                                 risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum,                                 leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris                                 id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin                                 sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus                                 at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing                                 lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit.                                 Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros,                                 bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum                                 dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non                                 lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero                                 blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non                                 ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros                                 purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue                                 ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in                                 sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum,                                 turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque                                 at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue                                 tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum                                 id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent                                 per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia                                 in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra                                 vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu                                 auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam                                 sed ipsum vel erat sodales suscipit.                             </Template>                         </ig:ExplorerBarItem>                     </Items>                 </ig:ExplorerBarGroup>                 <ig:ExplorerBarGroup Text="Group 2">                     <Items>                         <ig:ExplorerBarItem>                             <Template>                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec                                 ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue                                 ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum                                 vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas                                 et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate                                 dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante                                 placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus                                 risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit                                 venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus                                 magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue                                 eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum,                                 sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna                                 risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum,                                 leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris                                 id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin                                 sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus                                 at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing                                 lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit.                                 Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros,                                 bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum                                 dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non                                 lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero                                 blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non                                 ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros                                 purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue                                 ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in                                 sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum,                                 turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque                                 at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue                                 tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum                                 id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent                                 per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia                                 in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra                                 vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu                                 auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam                                 sed ipsum vel erat sodales suscipit.                             </Template>                         </ig:ExplorerBarItem>                     </Items>                 </ig:ExplorerBarGroup>                 <ig:ExplorerBarGroup Text="Group 3">                     <Items>                         <ig:ExplorerBarItem>                             <Template>                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec                                 ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue                                 ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum                                 vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas                                 et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate                                 dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante                                 placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus                                 risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit                                 venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus                                 magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue                                 eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum,                                 sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna                                 risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum,                                 leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris                                 id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin                                 sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus                                 at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing                                 lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit.                                 Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros,                                 bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum                                 dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non                                 lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero                                 blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non                                 ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros                                 purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue                                 ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in                                 sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum,                                 turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque                                 at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue                                 tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum                                 id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent                                 per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia                                 in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra                                 vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu                                 auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam                                 sed ipsum vel erat sodales suscipit.                             </Template>                         </ig:ExplorerBarItem>                     </Items>                 </ig:ExplorerBarGroup>                 <ig:ExplorerBarGroup Text="Group 4">                     <Items>                         <ig:ExplorerBarItem>                             <Template>                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec                                 ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue                                 ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum                                 vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas                                 et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate                                 dignissim. Proin pulvinar feugiat facilisis. Maecenas pulvinar justo commodo ante                                 placerat at rhoncus lectus iaculis. Nunc suscipit, est quis molestie pharetra, lacus                                 risus varius ligula, a volutpat purus mi a ligula. Fusce at diam odio. Aenean suscipit                                 venenatis orci, in condimentum enim mattis eu. Ut vel pellentesque ligula. Sed faucibus                                 magna a augue aliquam at venenatis nunc luctus. Nam felis augue, bibendum congue                                 eleifend sit amet, feugiat eu lacus. Vivamus porttitor, augue at convallis condimentum,                                 sapien mi auctor dolor, et laoreet orci purus sit amet elit. Pellentesque vel urna                                 risus, vitae ornare neque. Nulla facilisi. Donec luctus, augue et pulvinar dictum,                                 leo enim eleifend ante, vitae rutrum nibh nibh pretium libero. Praesent mattis mauris                                 id urna dictum faucibus. Maecenas dui lacus, iaculis in egestas et, sollicitudin                                 sit amet tellus. Donec sit amet odio et tellus vehicula elementum. In sed risus                                 at justo adipiscing pretium at nec dolor. Ut semper commodo nisi, at adipiscing                                 lacus ullamcorper tincidunt. In venenatis ante non est dapibus vel congue odio suscipit.                                 Aliquam mi leo, semper quis tristique eget, placerat eget urna. Nunc ante eros,                                 bibendum et blandit bibendum, auctor et elit. Vestibulum sodales, justo in elementum                                 dapibus, arcu neque porttitor dolor, nec luctus purus orci euismod erat. Etiam non                                 lacus est. Donec sodales volutpat elit in tincidunt. Maecenas sagittis feugiat libero                                 blandit eleifend. Pellentesque at placerat metus. Sed augue libero, pretium non                                 ultricies sed, egestas eget dui. Nam feugiat, ipsum eget mattis convallis, eros                                 purus sollicitudin elit, eget convallis sapien orci ac mi. Curabitur sagittis, augue                                 ac mattis tristique, augue quam sagittis nulla, sit amet rhoncus justo lacus in                                 sem. Curabitur volutpat ante augue, aliquam rhoncus lectus. Quisque condimentum,                                 turpis ac tristique faucibus, arcu purus venenatis velit, ac molestie dolor neque                                 at ante. Etiam pulvinar egestas mattis. Duis auctor pellentesque semper. Nam augue                                 tortor, lacinia vulputate dignissim eu, euismod non sem. Proin dui sem, bibendum                                 id varius vel, fringilla ut ante. Class aptent taciti sociosqu ad litora torquent                                 per conubia nostra, per inceptos himenaeos. Nunc interdum eros gravida sem lacinia                                 in sodales magna accumsan. Suspendisse euismod dolor augue. Maecenas aliquam viverra                                 vehicula. Aenean pharetra odio mattis elit rutrum pharetra. Nunc in leo id arcu                                 auctor sagittis sit amet ut eros. Duis sed lectus a elit vehicula hendrerit. Nullam                                 sed ipsum vel erat sodales suscipit.                             </Template>                         </ig:ExplorerBarItem>                     </Items>                 </ig:ExplorerBarGroup>             </Groups>         </ig:WebExplorerBar>     </div>     <div class="paneRight">         <ig:WebExplorerBar ID="WebExplorerBar2" runat="server" Width="250px" StyleSetName="IG"             Height="99%" GroupExpandBehavior="SingleExpanded" EnableSelection="true">             <Groups>                 <ig:ExplorerBarGroup Text="Group 1">                     <Items>                         <ig:ExplorerBarItem>                             <Template>                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec                                 ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue                                 ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum                                 vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas                                 et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate                                 dignissim.                             </Template>                         </ig:ExplorerBarItem>                     </Items>                 </ig:ExplorerBarGroup>                               <ig:ExplorerBarGroup Text="Group 2">                     <Items>                         <ig:ExplorerBarItem>                             <Template>                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec                                 ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue                                 ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum                                 vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas                                 et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate                                 dignissim.                             </Template>                         </ig:ExplorerBarItem>                     </Items>                 </ig:ExplorerBarGroup>                 <ig:ExplorerBarGroup Text="Group 3">                     <Items>                         <ig:ExplorerBarItem>                             <Template>                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec                                 ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue                                 ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum                                 vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas                                 et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate                                 dignissim.                             </Template>                         </ig:ExplorerBarItem>                     </Items>                 </ig:ExplorerBarGroup>                 <ig:ExplorerBarGroup Text="Group 4">                     <Items>                         <ig:ExplorerBarItem>                             <Template>                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mauris nec                                 ipsum dictum non tempus ipsum ultrices. Aliquam erat volutpat. Maecenas sed augue                                 ante. Phasellus ut urna quam, quis pellentesque diam. Cras pellentesque vestibulum                                 vulputate. Nunc erat nibh, aliquam vitae fringilla id, molestie eu ipsum. Maecenas                                 et mauris sem, non congue magna. Aliquam erat volutpat. In pellentesque vulputate                                 dignissim.                             </Template>                         </ig:ExplorerBarItem>                     </Items>                 </ig:ExplorerBarGroup>             </Groups>         </ig:WebExplorerBar>     </div>     </form> </body> </html>

     

     

Children