We Keep Coding

React.js infinitely add boxes and containers inside of any other containers

I'm a beginner at React and want to know how to implement this functionality:
At the beginning there is one main container with "Add" label. When I hover this label, two buttons appear: box and container. - that is what I have done. And what I should implement:
1. Each button should add corresponding item (box or container with label) to the parent container.
2. "Container" button should add container (with Add label) inside the parent container, so we can add a box or container inside of any other container which are located in the main container.
3. "Box" button should add box to the container where click was fired.
Question: So how do I create such buttons to manipulate components (and what components should I use) and how I should organize components in App.js?
I would be so happy if someone could help!

JS Tree customization in CSS styles

I am trying to create a tree structure list for one of my tasks. I am planning to use JS-TREE plugin for this purpose. Still the plugin comes with lot of features, I have to do few styling changes to match the given design.
This is the code pen link which I tried so for,
1. Change the plus-square with angle-down icon
2. Change the minus-square with angle-up icon
3. change the square-filled-grey icon(will come if any few of child nodes selected) with minus-square icon
4. Hover blue highlighting not needed
Any way to customize this? OR Any super hit plugins from your experience?

So, it looks like they're using a sprite map and changing the background position to select which icon appears
I was able to move this
.jstree-proton .jstree-anchor > .jstree-undetermined {
background-position: -38px -5px;
}
This satisfied #3. If you inspect any of the icons (jstree-icon class), you'll see a background assigned to 32.png. You'll have to change the positioning for icons that exist there. For the angle up and down you'll have to hide the background image they supplied and insert your own icons

Why don't you try to create a css file and overwrite the jstree class setting "!important" at the end of the rules you want to change? For me it worked because I needed to change the jstree-rename-input class like this.
.jstree-rename-input {
border: none !important;
width: 250px !important;
}
As far as i investigated, this is also the official answer provided by jsTree creator.

Bootstrap dropdown menu autowidth for inline form

I'm trying to build a Bootstrap dropdown button where the only dropdown option is a form field containing textual input accompanied by a button, such as:
+----------+---+
| (Button) | V |
+----------+---+-----------+
| [_<text input>_] | (Go!) |
+--------------------------+
Items in parenthesis are clickable buttons
Item in brackets is a text input field
The above ascii diagram shows the behaviour I would like if the dropdown toggle were clicked on
The Problem
I'm having considerable trouble getting the width of the dropdown to actually fit the form field. My attempts so far have them sort of matching up but not really; the form field is slightly larger than the bootstrap dropdown width which looks somewhat unpleasant.
Problem Reference: http://jsfiddle.net/3z44e5va/2/
I suspect that the auto-resizing capabilities of the Bootstrap dropdown don't apply to forms, but rather solely to list elements?
I'm ardently hoping that someone has tried to implement something similar and can shed some light on a recommended path forward.
Thank you in advance!

Just reset the row class's margin. Right now it has the default -15px for the margin-left and margin-top.
.row{
margin:0px;
}
http://jsfiddle.net/e4pxamho/

Overlapping tooltip in Extjs Grid

I have an issue that I’ve been trying to resolve. I’m very new to Sencha ExtJS. I’ve included image links to assist my explanation.
I have a Tooltip that displays “Double-click to Configure” when you move your MouseOver the header of a table which works fine.
Shown here: http://img227.imagevenue.com/img.php?image=952843717_Header_122_41lo.jpg
Also
I have a Tooltip that displays “Show Available Options” when you move your MouseOver the gear icon.
The problem is that the gear icon is within the header so when you mouseover the gear icon, the header tooltip also displays displays. Shown here
http://img157.imagevenue.com/img.php?image=952937141_Config_122_421lo.jpg
I really don’t know how EXTJS renders it’s grid but is there a way for me to place the gear icon outside of the header or not display the “Double-click to Configure” Tooltip when a user mouseovers the gear icon?
I’m Not sure where to look in the code I have a file uiconstant.js that creates all the UI constants in a Static class
UIElements:
{
SIMULATION_GRID: 'simulationgrid',
REPORT_SCHEDULER: 'reportscheduler',
BLENDED_BENCHMARK: 'blendedBenchmark',
BLENDED_BENCHMARK_GROUPINGS: 'blendedBenchmark_groupings',
DEFAULT_CONTAINER_LABEL: 'Click to configure container',
EDIT_CONFIGURE_CONTAINER_LABEL: 'Click to edit configuration',
DO_NOT_REQUEST_CONTENT_LABEL: 'Automatic calculation off for this dashboard.',
NO_RECORDS_FOUND: '<div class="no-records-found">No records found</div>',
CONTAINER_PANEL: 'containerPanel',
DoubleClickToConfigure: 'Double-click to Configure'
}
I also have a ContainerPanel.js File that Represents the custom panel for the container.
Not sure if I am looking in the correct files to make this change or update the grid
Ext.create('Ext.tip.ToolTip', {
target: header,
html: UiConstant.UIElements.DoubleClickToConfigure
});

Tooltip is supported for tools so you can configure the gear with a tooltip text. Now, header does not directly support tooltips - you handle it above by creating one and setting its header.
Let's try a bit different approach: tooltip on gear tool is de facto quicktip - only one instance of quicktip exists at a time.
To create quicktip for the header do this:
panel.getHeader().getEl().set({'data-qtip':'Your text here'});
Note: There shall always be an area around the gear tool where the tooltip changes - not sure if it is acceptable for your use case. Nevertheless, two tips shall not appear.

Bootstrap Style Builder color picker

I'm using this template
From the left menu, you can choose different colors for the layout.
The red color is the defaul. How do I get the blue color as default?
I checked the JS file that should control it, but I do not understand much
The file is jquery.wp.switcher.js
Can anyone give me a hand?
Thanks

add wp-theme-3 class to body to set blue as default, style switcher adds .wp-theme-1 (red) by default.
on jquery.wp.custom.js line 3 theme sets default color, you can change it too
bootstrap