ExtWide

About Fancytree 'wide' extension.

• Status: beta
• example
• Requires jQuery UI 1.9+

Stretch the selection bar to 100% of the container width.

This is done by stretching the title <span> accross the left <ul> limit. We then add a padding-left to the title in order to adjust for level indentation.
Every node span gets a fancytree-level-N class. The required css rules are dynamically generated as <style> tag in the header. A special rule disables the indentation while animations are active, because jQuery inserts temporary position:relative elements, that would break the layout.

NOTE The 'skin-win8-n' and 'skin-bootstrap-n' skins use the node <span> for highlighting, which also results in a wide selection bar, but with a left indentation per level. However these variants don't require - or even work with - the ext-wide plugin.

Options

• iconWidth, type: {string}, optional, default: guess from css (typically "16px")
  Width of one single icon, e.g. '1em' or '32px'. Used to calculate the title indentation.

• iconSpacing, type: {string}, optional, default: guess from css (typically "3px")
  Width of margin between two icons, or right icon and title. Used to calculate the title indentation.

• labelSpacing, type: {string}, optional, default: "3px"
  Left padding of label title.

• levelOfs, type: {string}, optional, default: guess from css (typically "16px")
  Indentation per level. Used to calculate the title indentation.

Events

(n.a.)

Methods

(n.a.)

Example

In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.wide.js:

  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>

  <link href="skin-win8/ui.fancytree.css" rel="stylesheet">
  <script src="js/jquery-ui-dependencies/jquery.fancytree.ui-deps.js"></script>
  <script src="js/jquery.fancytree.js"></script>
  <script src="js/jquery.fancytree.wide.js"></script>

$("#tree").fancytree({
  extensions: ["wide"],
  wide: {
    iconWidth: null,     // Adjust this if @fancy-icon-width != "16px"
    iconSpacing: null,   // Adjust this if @fancy-icon-spacing != "3px"
    labelSpacing: null,  // Adjust this if padding between icon and label != "3px"
    levelOfs: null       // Adjust this if ul padding != "16px"
  },
  ...
});


# Recipes

##### [Howto] ...