[sonicvizParticipant]

It’s ok, I went with a Jqxmenu widget instead.

[sonicvizParticipant]

Hi Dimitar,

Yes, thanks I already did that.

My questions was related to Tab widget width, as that is needed to calculate the correct chart height to go with the selected aspect ratio.

[sonicvizParticipant]

Scratch the margin-left issue – found it.

Still curious about the tab width though.
I can get around it using 51degrees screen width detection etc but curious.

[sonicvizParticipant]

Hi Hristo,
Example is hard as the code is part of a wordpress plugin so it’s a mixed php/js flow.
Chart definitely does not show at 100% though, only at < 100%

[sonicvizParticipant]

Perhaps this is a bug?

To show the width has to be less than 100%

I got it to work with the following
$html .= “<div id=\”chartContainer3\” style=\”width:95%; height:400px\”></div>”;

but if I set either to 100% it doesn’t show at all

[sonicvizParticipant]

Charts are displaying inside a JQXTab widget set to 100%.
When I resize the browser or use mobile emulation mode the tab widget resizes correctly on the fly but the embedded chart does not.

Very frustrating!

[sonicvizParticipant]

On second thoughts, it’s actually a little trickier as user can use either wordpress menu or tabs. Is there a recommended way to do this?

[sonicvizParticipant]

Never mind, found you could do it with some shortcode param and a little php/js trickery

[sonicvizParticipant]

Hi Dimitar,

>>As a final suggestion, you can try using a <button></button>

That kind of worked. It’s blue now, but the value text disappears.

This is driving me nuts…;-/

Edit:

Okay I can get it to work now with:
jQuery(\”#compliance_button\”).jqxButton({ theme: \”darkblue\”, width: ‘150’, height: ’45’});
jQuery(\”#compliance_button\”).val(‘Save’);

Thanks for help!

[sonicvizParticipant]

It happens with type=”submit” or type = “button”. If I use another type=”jqxwidget” , for example, it gets blue theme applied but then the input allows you to overwrite the button text.

Something in 2013 theme with button/submit I think.

If I had an inline style overriding why would the exact same code work properly if I change theme?

[sonicvizParticipant]

Also, as mentioned, the button issue is only with twenty thirteen theme. It shows blue properly with other themes.

[sonicvizParticipant]

Hi Dimitar,

Here’s the generated code for the button.
All other widgets (calendar, dropdown, grid, charts) are working fine with theme…just not buttons

<input name=”measurement_button” type=”submit” id=”measurement_button” value=”Save Entry” role=”button” class=”jqx-rc-all jqx-rc-all-darkblue jqx-button jqx-button-darkblue jqx-widget jqx-widget-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue” aria-disabled=”false” style=”width: 150px; height: 45px;”>

I’m developing a plugin so your wordpress guide is not appropriate.
I load the JQWidgets following the wordpress recommendations for loading custom scripts and css ie: at the top of the page via

// adds jQWidgets scripts
function add_jqwidgets() {
    // registers jQWidgets JavaScript files
    $jqxwidgets_version = "3.8.2";
    
    // register jQWidgets CSS files
    wp_enqueue_style('jqx.base', plugins_url('/jqx/css/jqx.base.css', __FILE__), array(), $jqxwidgets_version, 'all');
    wp_enqueue_style('jqx.web', plugins_url('/jqx/css/jqx.web.css', __FILE__), array(), $jqxwidgets_version, 'all');
    wp_enqueue_style('jqx.darkblue', plugins_url('/jqx/css/jqx.darkblue.css', __FILE__), array(), $jqxwidgets_version, 'all');
    
    
    wp_enqueue_script('jqxcore', plugins_url('/jqx/js/jqxcore.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxvalidator', plugins_url('/jqx/js/jqxvalidator.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxtabs', plugins_url('/jqx/js/jqxtabs.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //Charts
    wp_enqueue_script('jqxchartcore', plugins_url('/jqx/js/jqxchart.core.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //wp_enqueue_script('jqxchart', plugins_url('/jqx/js/jqxchart.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxchartangeselector', plugins_url('/jqx/js/jqxchart.rangeselector.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxdraw', plugins_url('/jqx/js/jqxdraw.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //Dependancy: jqxcalendar needed for jqxdatetimeinput
    wp_enqueue_script('jqxcalendar', plugins_url('/jqx/js/jqxcalendar.js', __FILE__), array('jquery'), $jqxwidgets_version, false);    
    //wp_enqueue_script('jqxcombobox', plugins_url('/jqx/js/jqxcombobox.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxdatetimeinput', plugins_url('/jqx/js/jqxdatetimeinput.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //wp_enqueue_script('jqxnumberinput', plugins_url('/jqx/js/jqxnumberinput.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //wp_enqueue_script('jqxpanel', plugins_url('/jqx/js/jqxpanel.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxradiobutton', plugins_url('/jqx/js/jqxradiobutton.js', __FILE__), array('jquery'), $jqxwidgets_version, false);

    //DataTable
    wp_enqueue_script('jqxdata', plugins_url('/jqx/js/jqxdata.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxbuttons', plugins_url('/jqx/js/jqxbuttons.js', __FILE__), array('jquery'), $jqxwidgets_version, false);  
    wp_enqueue_script('jqxscrollbar', plugins_url('/jqx/js/jqxscrollbar.js', __FILE__), array('jquery'), $jqxwidgets_version, false);    
    wp_enqueue_script('jqxlistbox', plugins_url('/jqx/js/jqxlistbox.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxdropdownlist', plugins_url('/jqx/js/jqxdropdownlist.js', __FILE__), array('jquery'), $jqxwidgets_version, false);  
    wp_enqueue_script('jqxdatatable', plugins_url('/jqx/js/jqxdatatable.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    
    wp_enqueue_script('jqxnotification', plugins_url('/jqx/js/jqxnotification.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
  
    wp_enqueue_script('globalize', plugins_url('/jqx/js/globalize.js', __FILE__), array('jquery'), $jqxwidgets_version, false);

    //Custom initialise script for out plugin setup
    wp_enqueue_script('intializeWidgets', plugins_url('js/initializeWidgets.js', __FILE__), array('jquery'), BWT_CURRENT_VERSION);
}

[sonicvizParticipant]

Another issue with same button:

If I change it to type=’button’ the form input allows me to overtype the button text value, which is not expected button behavior

    $html .= "  <div>
                     <input type=\"submit\" name=\"compliance_button\" id=\"compliance_button\" value=\"" . __("Save", BWT_SLUG) . "\">
                </div>
		</form>

to 
    $html .= "  <div>
                     <input type=\"button\" name=\"compliance_button\" id=\"compliance_button\" value=\"" . __("Save", BWT_SLUG) . "\">
                </div>
		</form>

[sonicvizParticipant]

Hi,
Thanks. It only works partially, however.
Some elements under the div remain in place.

I’ll have to look for another solution I guess.

ty.

[sonicvizParticipant]

Hi,
Thanks for the link, but that centers tabs not the content within the tabs.

Are you seriously telling me you can’t center or locate content within tab panels?
Surely there must be a way without having to manually calculate widths and black magic.

That’s the whole point of css!

[Author]

Posts