Simple Solution for Conditional Rendering on Width

slick.

Good idea.

Agreed. Good idea. 

Thank you, Pat! I super appreciate your help. This code is populating the UI field when there is a resize event, but the UI field is empty on load until there is a resize event. For my use case, I need to capture the width on load without a resize event.

@Jeanguy_Vachon Disclaimer: I don’t know anything about java script. This seems to work to set the initial value and adjust as it resizes.

(function(skuid){ 
   var $ = skuid.$; 
   $(document.body).one('pageload',function(){ 
       var ADashUIOnly = skuid.$M('ADashUIOnly'), 
             row = ADashUIOnly.getFirstRow(); 
       ADashUIOnly.updateRow(row,'minWidth',$(window).width()),
       window.addEventListener("resize", setWidth); function setWidth(){ 
           ADashUIOnly.updateRow(row,'minWidth',$(window).width()); 
           } 
        }); 
     })(skuid);

Very cool.

I don’t know if this applies, but I discovered that if you’re trying to do dynamic sizing things on page load, if the page is long enough to cause an up/down slider to appear on the right side of the screen, the sizing seems take into account the page width before the slider appears, not after, and I can’t find any way to cause it to consider the width of the scrollbar if it appears.

To account for this, I just always show the vertical scrollbar no matter what:

/*Fix for top navigation bar resizing after a scrollbar is later loaded on the window that would cause navigation bar overlap on the page */
html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}