Fix filter layout issue Codeinwp/visualizer-pro#348

Author: girishpanchal30

classes/Visualizer/Module.php

@@ -624,7 +624,7 @@ protected function get_inline_custom_css( $id, $settings ) {
 		}
 
 		$img_path = VISUALIZER_ABSURL . 'images';
-		$css     .= ".locker,.locker-loader{position:absolute;top:0;left:0;width:100%;height:100%}.locker{z-index:1000;opacity:.8;background-color:#fff;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}.locker-loader{z-index:1001;background:url($img_path/ajax-loader.gif) no-repeat center center}.dt-button{display:none!important}.visualizer-front-container.visualizer-lazy-render{content-visibility: auto;}";
+		$css     .= ".locker,.locker-loader{position:absolute;top:0;left:0;width:100%;height:100%}.locker{z-index:1000;opacity:.8;background-color:#fff;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}.locker-loader{z-index:1001;background:url($img_path/ajax-loader.gif) no-repeat center center}.dt-button{display:none!important}.visualizer-front-container.visualizer-lazy-render{content-visibility: auto;}.google-visualization-controls-categoryfilter label.google-visualization-controls-label {vertical-align: middle;}.google-visualization-controls-categoryfilter li.goog-inline-block {margin: 0 0.2em;}.google-visualization-controls-categoryfilter li {padding: 0 0.2em;}";
 		$css     .= '</style>';
 
 		$arguments = array( $css, $settings );

classes/Visualizer/Module/Admin.php

@@ -968,6 +968,13 @@ public function renderLibraryPage() {
 				$settings   = $arguments[1];
 			}
 
+			if ( isset( $settings['controls']['ui']['labelStacking'] ) ) {
+				unset( $settings['controls']['ui']['labelStacking'] );
+			}
+			if ( isset( $settings['controls']['ui']['orientation'] ) ) {
+				unset( $settings['controls']['ui']['orientation'] );
+			}
+
 			// add chart to the array
 			$charts[ $id ] = array(
 				'id'       => $chart->ID,

css/frame.css

@@ -19,10 +19,23 @@
 }
 #control_wrapper_canvas:not(:empty) {
 	margin: 15px 0 0 5px;
+	position: relative;
+	z-index: 1;
+}
+#control_wrapper_canvas:not(:empty) + #canvas .google-visualization-table {
+	top: 60px;
+}
+.vz-vertical .google-visualization-table {
+	left: 70px;
+}
+.google-visualization-controls-categoryfilter label.google-visualization-controls-label {
+	vertical-align: middle;
+}
+.google-visualization-controls-categoryfilter li.goog-inline-block {
+	margin: 0 0.2em;
 }
-#control_wrapper_canvas:not(:empty) + #canvas {
-	top: 55px;
-	left: 50px;
+.google-visualization-controls-categoryfilter li {
+	padding: 0 0.2em;
 }
 .goog-combobox input {
 	min-height: auto;

js/render-google.js

@@ -399,6 +399,7 @@ var chartWrapperError = [];
         });
 
         if ( withControlMode ) {
+           // alert( chart.is_library_page );
             // Create a control wrapper, passing some options.
             var controlWrapper = new gv.ControlWrapper( {
                 containerId: 'control_wrapper_' + id,
@@ -410,6 +411,16 @@ var chartWrapperError = [];
             render.setOptions(settings);
             chartWrapper.bind(controlWrapper, render);
             chartWrapper.draw(table);
+
+            gv.events.addListener(controlWrapper, 'ready', function ( err ) {
+                if ( 'vertical' === settings.controls.ui.orientation ) {
+                    if ( 'canvas' === id ) {
+                        jQuery( '#' + id ).addClass( 'vz-vertical' );
+                    }
+                } else {
+                    jQuery( '#' + id ).removeClass( 'vz-vertical' );
+                }
+            });
         } else {
             $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
             render.draw(table, settings);