im using a CTabView to display some HighCharts graphics, but only the first tab gets rendered.
i see a blank tab for each of the other ones,
and sometimes i get javascript errors from HighCharts (tickPosition not defined)
is the javascript for HighCharts being published properly to the different views?
why would the first view work and not the other ones?
$this->widget('CTabView', array(
'tabs'=>array(
'tab1'=>array(
'title'=>'Contract Extensions per Group',
'view'=>'reportGroupExtensionsStack',
'data'=>array('model'=>$model),
),
'ta1'=>array(
'title'=>'Gender of Assistants',
'view'=>'reportGender',
'data'=>array('model'=>$model),
),
),
));
Highcharts doesn't work in hidden/not displayed containers.
Take a look: http://highslide.com/forum/viewtopic.php?f=10&t=10712
So possible solution is to render all chart or outside the containers, and move them to the specific tab when clicked, or when tab is clicked - then render chart.
Related
I have a set of multilevel data to be display using abovementioned component. Usually in PHP I simply iterate the data to display it as li but coming from web background, I just can't put it all together when using react-native. What is the right way to display a set of menu
FYI, I'm also using react-native-router-flux to manage the router.
If you want to build you own menu, you'll have to customize the renderRow of your ListView. If you take a look at RN's official doc on ListView here, it shows that you can specify a sectionID, for example.
You can then specify how each row renders.
renderRow: function (rowData, sectionID, rowID, highlightRow) => renderable
Takes a data entry from the data source and its ids and should return
a renderable component to be rendered as the row. By default the data
is exactly what was put into the data source, but it's also possible
to provide custom extractors. ListView can be notified when a row is
being highlighted by calling highlightRow(sectionID, rowID). This sets
a boolean value of adjacentRowHighlighted in renderSeparator, allowing
you to control the separators above and below the highlighted row. The
highlighted state of a row can be reset by calling highlightRow(null).
Another option is using open source modules built by the community.
The one closest to your needs I could find is : https://github.com/jaysoo/react-native-menu
I'm trying to include several tabs into an existing tab, it works but I have a display problem when I try to display the tab containing the nested tabs.
When I click on it, the content of all the children tabs are displayed instead of the first tab only.
Here is a link to check the problem:
http://www.bootply.com/3hWg0EDCmx
I can't find where I'm wrong.
Thanks
You have the wrong css class assigned to tab-memory and tab-activity. 'tab-io' should have the class "tab-pane fade in active", while the rest should have "tab-pane fade in".
Here is the link to the working code: http://www.bootply.com/3hWg0EDCmx#
I have a bootstrapped template with datatables.net, I'd like to use the same datatables grid (same functionality/data) within the page, and a modal popup that gets fired from within the same page somewhere.
How would I be able to duplicate the exact same grid without duplicating my code?
I'm trying to change the color of a tab in a tabpanel I have when my app goes online or offline. I have the online and offline events already setup but now I need to be able to change the color of the tab from these events.
How do I go about accessing an individual tab and setting it's CSS?
you could use ext component query to get the handle of the component and then add/remove class
Ext.ComponentQuery.query('yourselector')[0].addCls('yourclass')
You can get the individual tab from tabpanel by referring it as following inside the controller class (inside the refs):
myDesiredTab: '#myTabPanelId container[title=myDesiredTabTitle]'
and afterward you can try:
this.getMyDesiredTab().tab.setCls('myDesiredCssClass');
This idea hasn't been tested but might just work as the tabbar does have cls config and we have a way to access the individual tab.
I'm using SimpleForm and was able to create a list of radios. Is there a way that I can render them as buttons or images?
I did some search and tried this:
- f.collection_radio_buttons(:category, [['Male', 'icon_male'], ['Female', 'icon_female']], :first, :last) do |category|
= category.label { image_tag("/assets/icons/16x16/#{category.text}.png") + category.radio_button }
However, it still renders the radio icon, see below
Is there a way to render it as just images that's selectable or as buttons similar to Twitter Bootstrap button? http://twitter.github.com/bootstrap/javascript.html#buttons
Also, this requires me to specify the list of images in the view, I need it to be driven off the model, something like category.image_url
I ended up not using simple_form's radio element. I simply resorted to jQuery and a hidden input element.