I recently had a client ask to have a given control that existed on a tab in the web client to size to fit the height of the window. This seems relatively easy until you realize that the height of the tab area changes based on how tall the detail view is and how many smart parts are added to the configurable “middle pane” area of the web client. I was able to figure this out by using client side scripting.
Using jQuery I was able to locate two components on the page.
1) The tab strip itself. This is identified with a class and does not contain an actual ID.
2) The bottom footer where the user, time and logout button shows. This does contain an ID.
To find the tab, which has just a class name, you can use this jquery snippet:
var tabpos = $('.tws-main-section').position().top;
This uses jQuery to get the element and then returns the vertical pixel location of the tab strip using the postion().top function.
We can do something similar to find the position of the bottom footer. Since this one does have an ID, we can use a slightly different jQuery search:
var footer = $('#MainFooter').position().top;
With those to coordinates we can then determine the height of the tab area available to us. The numbers that are returned are based on the tops of each element so we need to account for the actual space of the tabs, as well as the header area of the tab control itself. Something like this seems to work well:
var tabheight = footer-tabpos-200;
Finally with that height we can then set some other control’s height to match that. We can use jQuery to find our control by ID and then set the height with code like this (in our case the control is named QFTextBox):
$('#" + QFTextBox.ClientID + "').height(tabheight);
Since we will use this a couple of times lets make this code into a function. Putting it all together looks like so:
function sizeControl() {
var tabpos = $('.tws-main-section').position().top;
var footer = $('#MainFooter').position().top;
var tabheight = footer-tabpos-200;
$('#" + QFTextBox.ClientID + "').height(tabheight);
}
Now that we have functional client side code, we need to wire this up so that it runs. it is important to run for 2 events. When the tab is selected, and when the browser resizes.
The easiest way to handle running the code when the tab is selected is to use the dojo ready function. Since the tabs utilize dojo this will allow our code to run after the DOM has been loaded.
require(['dojo/ready'], function(ready){
ready(function(){
sizeControl();
});
});
To run the same code on the resize of the browser we can use the window.onresize event. To ensure this runs after the tab has been sized we will use the window.setTimeout function to delay for 300 milliseconds.
window.onresize = function () {
window.clearTimeout(resizeTimeoutId);
resizeTimeoutId = window.setTimeout('sizeControl();', 300);
};
Now all we need to do is wire this code up to our tab smart part and whenever the tab is viewed it will have the control within it sized to fit the available space.
