Vertical tabs

Forums Dynamic Forms for SharePoint Vertical tabs

Tagged: ,

Viewing 9 reply threads
  • Author
    Posts
    • #26612
      John Garrido
      Participant

      I am trying to change the tabs to vertical aligned on the right of the form. I remember seeing a piece of code to accomplish this, but can’t seem to find it in the discussions. Curious if you could provide some direction on where I might have seen it.

    • #26642
      Alexander Bautz
      Keymaster

      I cannot remember having done this before, but I added a few lines of Custom CSS an some Custom JS.

      Custom CSS:

      li.tabBase{
          float:none!important;
      }
      #tabWrapper{
          float:right;
      }
      #part1{
          float:left;
      }

      Custom JS:

      jQuery("#tabWrapper").insertAfter(jQuery("#part1"));

      See if you can use it.

      Alexander

    • #26647
      John Garrido
      Participant

      Hi Alex. Worked perfectly. Thanks for the support.

    • #27519
      John Garrido
      Participant

      I noticed when I try to attach a document using the button in the ribbon the ribbon the tabs don’t hide like the form. I am assuming it has to do with moving the tabs from horizontal to vertical. Thoughts on correcting?

    • #27536
      Alexander Bautz
      Keymaster

      The code to show the tabs vertically moves the tabWrapper out of part1 and therefore it is not hidden when attaching a document. It’s not ideal, but you can use this snippet to sense when the part1 section is hidden and hide the tabWrapper as well:

      var tabWrapperHidden = false;
      setInterval(function(){
          if(document.getElementById("part1").style.display !== "none"){
              if(tabWrapperHidden){
                  tabWrapperHidden = false;
                  document.getElementById("tabWrapper").style.display = "block";
              }
          }else{
              if(!tabWrapperHidden){
                  tabWrapperHidden = true;
                  document.getElementById("tabWrapper").style.display = "none";
              }
          }
      },250);

      Alexander

    • #27548
      John Garrido
      Participant

      Thanks Alex! That works well enough. Appreciated the quick reply.

    • #27597
      Mike
      Participant

      Alex,

      This is a very nice solution for repositioning the tabs. I need to take it one step further and be able to choose which tabs (based on TabID I suppose) to position vertically. That will allow me to have a set of horizontal tabs for one audience and a set of vertical tabs for another audience (based on Permission Groups).

      Thanks for your help as always. DFFS is truly an awesome tool.
      Mike

    • #27610
      Alexander Bautz
      Keymaster

      I don’t have any example ready (and the above vertical modification is not 100% – it is only a quick example).

      I suggest you use code to build new tabs and replace the original one, then insert your extra tabs also using code. Just inspect the current tabs and replicate the ID, Class and attributes like this example.

      Original tab:

      <li id="dffs_tab_4" tabindex="4" class="tabBase tabUniqueID_Tab4" tabuniqueid="Tab4" onclick="spjs.dffs.do_toggleSelectedTab("4","TabClick")"><a title="" onclick="return false;" href="javascript:;" unselectable="on"><span class="tablabel" unselectable="on">Tab4</span></a></li>

      Example button that mimics the tab and selects tab index 4 on click:

      <input type="button" onclick="spjs.dffs.do_toggleSelectedTab('4','TabClick')" value="Tab4" />

      Please note that this is just a quick example to give you an idea and the highlighting of the selected tab / button will not work.

      Alexander

    • #27618
      Mike
      Participant

      I have tried several ways of implementing the above but to no avail. Do you have a little more time to flesh out where the code would go, etc? I can wait a few days. No rush.

      I was hoping your CSS and JS from above (which work quite well) could be adapted to reference a specific tabID. Is that not possible or advisable?

      Mike

    • #27654
      Alexander Bautz
      Keymaster

      Hi,
      Even though I showed an example of moving the tabs vertically I’m not sure it’s a good idea. To do it properly the page layout must be changed to a proper multi column layout and this will include moving the entire form and repositioning all items in the page – while struggling to override the built in SharePoint styles.

      You can of course use JavaScript to hide or move individual tabs and insert them wherever you want, but making this work OK will be a challenge.

      Alexander

Viewing 9 reply threads
  • You must be logged in to reply to this topic.