Topic
  • 13 replies
  • Latest Post - ‏2017-05-05T20:13:57Z by Sunny.C
SystemAdmin
SystemAdmin
7615 Posts

Pinned topic Increase height attribute of tab area

‏2013-03-19T21:24:47Z |
Hello All,
I have the below script in the "view" event of the coach view. I'm trying to adjust the height of the tab but it doesn't work. However, width of the tab is working fine. Appreciate if anyone can give me pointers of how this can be achieved.

if( (element = dojo.query("*")).length > 0){
style = element[0].getElementsByTagName("div")[0].style;
style.width = "100%";
style.height = "70%";
}
Updated on 2013-03-20T15:19:05Z at 2013-03-20T15:19:05Z by SystemAdmin
  • kolban
    kolban
    3322 Posts

    Re: Increase height attribute of tab area

    ‏2013-03-20T01:13:45Z  
    Hi Henry,
    I think we will need some more context. You say that you have the supplied code in the "view" event of the Coach View. What coach view? Is this a Coach View you have written or are you trying to modify an existing Coach View? Please provide as much background as you can including the goal you are trying to achieve.

    Neil
  • makvell
    makvell
    269 Posts

    Re: Increase height attribute of tab area

    ‏2013-03-20T07:24:34Z  
    Hi!

    You can use next solution:

    1. Create you own Tabs view (just copy to your processapp or toolkit, that simple way :))
    2. On «load» event hadler fix line
    
    tabContainer = 
    
    new TabContainer(
    { style: 
    "height: 100%; width: 100%;", controllerWidget : 
    "_bpmBidiTabController"
    }, tcElement );
    

    to
    
    tabContainer = 
    
    new TabContainer(
    { doLayout: false, style: 
    "height: 100%; width: 100%;", controllerWidget : 
    "_bpmBidiTabController"
    }, tcElement );
    

    3. To inline CSS add next lines:
    
    .BPMTabControl 
    { height: 100%; width: 100%; 
    }
    


    Perhaps this is not the best solution, but it is better not invented out right now :)
  • SystemAdmin
    SystemAdmin
    7615 Posts

    Re: Increase height attribute of tab area

    ‏2013-03-20T12:11:44Z  
    • kolban
    • ‏2013-03-20T01:13:45Z
    Hi Henry,
    I think we will need some more context. You say that you have the supplied code in the "view" event of the Coach View. What coach view? Is this a Coach View you have written or are you trying to modify an existing Coach View? Please provide as much background as you can including the goal you are trying to achieve.

    Neil
    I have a created a custom coach view. This section of custom coach view is intended to be placed under a tab. Intention is to increase the height of the tab. I could able to increase the width but not height.
  • SystemAdmin
    SystemAdmin
    7615 Posts

    Re: Increase height attribute of tab area

    ‏2013-03-20T13:21:22Z  
    • makvell
    • ‏2013-03-20T07:24:34Z
    Hi!

    You can use next solution:

    1. Create you own Tabs view (just copy to your processapp or toolkit, that simple way :))
    2. On «load» event hadler fix line
    <pre class="jive-pre"> tabContainer = new TabContainer( { style: "height: 100%; width: 100%;", controllerWidget : "_bpmBidiTabController" }, tcElement ); </pre>
    to
    <pre class="jive-pre"> tabContainer = new TabContainer( { doLayout: false, style: "height: 100%; width: 100%;", controllerWidget : "_bpmBidiTabController" }, tcElement ); </pre>
    3. To inline CSS add next lines:
    <pre class="jive-pre"> .BPMTabControl { height: 100%; width: 100%; } </pre>

    Perhaps this is not the best solution, but it is better not invented out right now :)
    Hello,
    This increased the height way more that what I wanted. I'm not able to reduce the height by changing height %. I tried this in my code.

    tabContainer = new TabContainer({ doLayout: false, style: "height: 20%; width: 100%;", controllerWidget : "_bpmBidiTabController"}, tcElement );

    and in Inline CSS

    .BPMTabControl {
    height: 20%;
    width: 100%;
    }

    But it doesn't seem to change the height % at all.
  • kolban
    kolban
    3322 Posts

    Re: Increase height attribute of tab area

    ‏2013-03-20T14:21:29Z  
    Hello,
    This increased the height way more that what I wanted. I'm not able to reduce the height by changing height %. I tried this in my code.

    tabContainer = new TabContainer({ doLayout: false, style: "height: 20%; width: 100%;", controllerWidget : "_bpmBidiTabController"}, tcElement );

    and in Inline CSS

    .BPMTabControl {
    height: 20%;
    width: 100%;
    }

    But it doesn't seem to change the height % at all.
    I think that % sizings of the tab container won't work out of the box. My thinking is that the tab container is contained within a DIV and the DIV has no height. So 100% of zero is zero. You may have to set the height to a % and then set the height of the containing DIV to either a % or a fixed height.

    Neil
  • SystemAdmin
    SystemAdmin
    7615 Posts

    Re: Increase height attribute of tab area

    ‏2013-03-20T15:12:39Z  
    • kolban
    • ‏2013-03-20T14:21:29Z
    I think that % sizings of the tab container won't work out of the box. My thinking is that the tab container is contained within a DIV and the DIV has no height. So 100% of zero is zero. You may have to set the height to a % and then set the height of the containing DIV to either a % or a fixed height.

    Neil
    Neil,
    I just saw your post on this forum and solution you provided worked. Thanks again Neil for your input!!

    Steps:
    1. Copy Out of the Box Tabs Coach View to Custom Tabs Coach View
    2. Paste the below code in the Inline CSS

    div .BPMTabControl {
    width: 100%;
    height: 520px;
    }

    Thanks,
    Henry
  • SystemAdmin
    SystemAdmin
    7615 Posts

    Re: Increase height attribute of tab area

    ‏2013-03-20T15:14:22Z  
    Neil,
    I just saw your post on this forum and solution you provided worked. Thanks again Neil for your input!!

    Steps:
    1. Copy Out of the Box Tabs Coach View to Custom Tabs Coach View
    2. Paste the below code in the Inline CSS

    div .BPMTabControl {
    width: 100%;
    height: 520px;
    }

    Thanks,
    Henry
    Small Correction to the code

    div .BPMTabControl {
    width: 100%;
    height: 580px;
    }
  • SystemAdmin
    SystemAdmin
    7615 Posts

    Re: Increase height attribute of tab area

    ‏2013-03-20T15:16:34Z  
    Small Correction to the code

    div .BPMTabControl {
    width: 100%;
    height: 580px;
    }
    Sorry for multiple entries I just couldn't get the entire code pasted.
    "div .BPMTabControl {
    width: 100%;
    height: 580px;
    }"

    I hope this try works.
    Remove quotes while copying the code.
  • SystemAdmin
    SystemAdmin
    7615 Posts

    Re: Increase height attribute of tab area

    ‏2013-03-20T15:19:05Z  
    Sorry for multiple entries I just couldn't get the entire code pasted.
    "div .BPMTabControl {
    width: 100%;
    height: 580px;
    }"

    I hope this try works.
    Remove quotes while copying the code.
    Took a screen shot of the code.
  • tlano
    tlano
    21 Posts

    Re: Increase height attribute of tab area

    ‏2013-06-20T02:45:56Z  
    Neil,
    I just saw your post on this forum and solution you provided worked. Thanks again Neil for your input!!

    Steps:
    1. Copy Out of the Box Tabs Coach View to Custom Tabs Coach View
    2. Paste the below code in the Inline CSS

    div .BPMTabControl {
    width: 100%;
    height: 520px;
    }

    Thanks,
    Henry

    You can also try putting that code snippet in a Custom HTML block and drop it in your coach above the Tab view, this prevents the need to copy the whole Tab CV.

     

  • rdolas
    rdolas
    23 Posts

    Re: Increase height attribute of tab area

    ‏2013-10-18T22:22:26Z  

    Thanks Kolban and SystemAdmin! the solution works.

     

     

  • kolban
    kolban
    3322 Posts

    Re: Increase height attribute of tab area

    ‏2013-10-18T22:34:49Z  
    • rdolas
    • ‏2013-10-18T22:22:26Z

    Thanks Kolban and SystemAdmin! the solution works.

     

     

    Hi rdolas,

    More than welcome but I think "SystemAdmin" was a forum user that existed before the migration from an old Forum system to the new ... I don't think there is an actual user called "SystemAdmin" ... whomever that kind soul was is probably now lost in the mists of time :-)

    Neil

  • Sunny.C
    Sunny.C
    1 Post

    Re: Increase height attribute of tab area

    ‏2017-05-05T20:13:57Z  
    • kolban
    • ‏2013-10-18T22:34:49Z

    Hi rdolas,

    More than welcome but I think "SystemAdmin" was a forum user that existed before the migration from an old Forum system to the new ... I don't think there is an actual user called "SystemAdmin" ... whomever that kind soul was is probably now lost in the mists of time :-)

    Neil

    Hi All,

    I have a table control inside my tab control. My requirement is to auto adjust the height of the tab based on the number of records in table. 

    I have kept the height of table control as fixed for 25 records. So if there are less records in table, i need to dynamically reduce the height of tab. 
     

    This is required to remove empty spaces below the table if number of records are less. 

    I am using version 8.5.6 stock controls. Appreciate for any help. 

     

    Thanks 

    Sunny