Help links on header of Jewelry Box Theme

440
2
06-25-2018 10:57 AM
James_001
Occasional Contributor II

Hi,

I am trying to add the help and some other link (button) on the top of header of Jewelry Box theme of my WAB app. It is some thing similar to King County sample. This is the header controller html (widget.html) of my app, but some how it is not working.

div>
  <!-- solve the bug of style delay loading -->
  <div class="header-section jimu-float-leading" data-dojo-attach-point="headerNode">
    <a data-dojo-attach-point="logoLinkNode" target="_blank">
      <img class="logo jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="logoNode" data-dojo-attach-event="onload:_onLogoLoad">
    </a>
    <div class="titles jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="titlesNode">
      <div class="jimu-title jimu-float-leading" data-dojo-attach-point="titleNode"></div>
      <div class="jimu-subtitle jimu-float-leading jimu-leading-margin5" data-dojo-attach-point="subtitleNode"></div>
    </div>
    <div class="links jimu-float-leading jimu-leading-margin25" data-dojo-attach-point="linksNode">
      <div class="dynamic-section jimu-float-leading" data-dojo-attach-point="dynamicLinksNode">// Help added
<a href="http://abc.com" target="_blank" rel="noopener noreferrer" class="jimu-link jimu-align-leading jimu-leading-margin1" style="line-height: 40px;">• Online</a>
       <a href="http://myorg.com" target="_blank" rel="noopener noreferrer" class="jimu-link jimu-align-leading jimu-leading-margin1" style="line-height: 40px;">• Help</a> 
//Help end
</div>
      <div class="signin-section jimu-float-leading" data-dojo-attach-point="signInSectionNode">
        <a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSigninClick"
        data-dojo-attach-point="signinLinkNode">${nls.signin}</a>
        <a href="" target="_blank" class="jimu-link" data-dojo-attach-event="onclick:_onUserNameClick" data-dojo-attach-point="userNameLinkNode"></a>
        <a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSignoutClick" data-dojo-attach-point="signoutLinkNode">${nls.signout}</a>
      </div>
    </div>
  </div>
  <div class="container-section jimu-float-leading" data-dojo-attach-point="containerNode"></div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
2 Replies
Adri2cPérez_Beneito
Occasional Contributor

Hi!

Here an example (modification at the last div)

<div>
<!-- solve the bug of style delay loading -->
<div class="header-section jimu-float-leading" data-dojo-attach-point="headerNode">
<a data-dojo-attach-point="logoLinkNode" target="_blank">
<img class="logo jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="logoNode" data-dojo-attach-event="onload:_onLogoLoad">
</a>
<div class="titles jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="titlesNode">
<div class="jimu-title jimu-float-leading" data-dojo-attach-point="titleNode"></div>
<div class="jimu-subtitle jimu-float-leading jimu-leading-margin5" data-dojo-attach-point="subtitleNode"></div>
</div>
<div class="links jimu-float-leading jimu-leading-margin25" data-dojo-attach-point="linksNode">
<div class="dynamic-section jimu-float-leading" data-dojo-attach-point="dynamicLinksNode"></div>
<div class="signin-section jimu-float-leading" data-dojo-attach-point="signInSectionNode">
<a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSigninClick"
data-dojo-attach-point="signinLinkNode">${nls.signin}</a>
<a href="" target="_blank" class="jimu-link" data-dojo-attach-event="onclick:_onUserNameClick" data-dojo-attach-point="userNameLinkNode"></a>
<a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSignoutClick" data-dojo-attach-point="signoutLinkNode">${nls.signout}</a>
</div>
</div>
</div>
<div class="container-section jimu-float-leading" data-dojo-attach-point="containerNode">
  <a href="https://community.esri.com/" data-dojo-props="style: { position: 'absolute', left: '300px' }">Hyperlink</a>
</div>
</div>

Cheers

0 Kudos
James_001
Occasional Contributor II

Adri,

Thanks for your help! I added your proposed modified div, but some how as soon we change the screen size all the widgets behave funny, they are moving down to below the header controller and then stick back to again. Any help is appreciated!

Irfan

0 Kudos