UI elements placement inside sideview multiplexer

[sridamg]

I have two charts within a multiplexer module. When rendered, charts are placed one after another vertically for each element. I want to place the charts side by side (not vertically one after another) for each iteration. Please help !!

[sideview]

the easiest way is to use custom CSS to give the charts a constant width and to float the charts alongside eachother.

If your view name is my_view (ie the XML file for the view is my_view.xml), then your custom CSS might look like:

.splView-my_view div.JSChart {
float:left;
clear:none;
width:400px;
}

If you're multiplexing just the chart module and hidden modules, this will make all the charts the same width, and cause them to float alongside eachother - so that there are as many in a single row as will fit.

On the other hand if you are multiplexing other visible modules as well, like if you're multiplexing an HTML module as a dynamic header along with your JSChart module then things will get a little more complicated CSS-wise.

[sridamg]

There should be one row for each iteration of the multiplexer. Each row will contain three items - 1) HTML module, 2) One pie chart. 3) Another pie chart.
Also we are not using any custom JS/CSS at this point. Could you please suggest any other option if you have.