#StackBounty: #jquery #css #fancytree No connectors nor icons visible for jQuery FancyTree

Bounty: 250

I’m trying to implement a web-based folder browser using the FancyTree jquery plugin. After some teething problems, I have it working quite well. The only problem is that FancyTree doesn’t display any connector lines or icons. Strictly text only, with + and – icons for expand and collapse, respectively. I had imagined such a file-system oriented plugin to have default icons for e.g. closed and open folder, etc. so I have not yet specified custom icons, but the connector lines bother me more.

I cobbled together my FancyTree source from its GitHub repo, and my source folder looks as follows. This is from cherry-picking the source, because the dist folder for FancyTree is a bit sparse:

enter image description here

This is how I reference the styles and scripts. Dev only for brevity:

<link rel="stylesheet" href="~/css/site.css" />

<link href="~/lib/fancytree/jquery-ui.css" rel="stylesheet" />
<link href="~/lib/fancytree/jquery-ui.structure.css" rel="stylesheet" />
<link href="~/lib/fancytree/jquery-ui.theme.css" rel="stylesheet" />
<link href="~/lib/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" />

The extra styles came with my minimmal custom download for jQuery UI, a dependency of FancyTree. Script:

http://~/lib/jquery/dist/jquery.js
http://~/lib/bootstrap/dist/js/bootstrap.js
http://~/lib/fancytree/jquery-ui.js
http://~/lib/fancytree/jquery.fancytree-all.js

I’m only imagining a missing or wrong images location, but surely this should use glyphicons style icons. I have not specified any custom icons, but expected defaults. If I can get custom icons working then my real concern is the missing connector lines.

BREAKING:
If I force connectrors to show according to this this SO answer, by adding a class as soon as the tree is initiated:

$(".fancytree-container").addClass("fancytree-connectors");

I get vertical portions of connectors all over, but nothing visible on the horizontal.
, just the text, often far indented and less readable than a tree with lines.


Get this bounty!!!

#StackBounty: #jquery #css #twitter-bootstrap #twitter-bootstrap-3 How can I keep a row of a button and text from wrapping using multic…

Bounty: 50

I have a series of rows consisting of a button and text, like so:

[Button] [Text]
[Button] [Text]
[Button] [Text]
...

When I apply the multicol class, they eventually wrap around, like so:

[Button] [Text]   [Button] [Text]
[Button] [Text]   ....

Unfortunately, in many cases, the button or the text gets broken in half when going into the next column. Using “display: inline-block” makes my buttons and text vary in size on different screen resolutions, and makes them spaced strangely.

What is the best way to keep the [Button] [Text] combination from breaking in the column, while keeping each [Button] [Text] combination equally spaced, and looking the same?

<

div class=”snippet”>

<

div class=”snippet-code”>

.multicol {
  column-count:2;
  -moz-column-count:2;
  -webkit-column-count:2;
}
  <!-- Imagine 20-25 of these in a row -->
  
(VARYING-LENGTH DESCRIPTIONS HERE)
</div> </div>