Mod to XML GST.

common/lib/xmodule/xmodule/gst_module.py

@@ -69,8 +69,7 @@ class GraphicalSliderToolModule(XModule):
         Simple variant: slider and plot controls are not inside any tag.
         """
         #substitute plot
-        plot_div = '<div class="' + self.html_class + '_plot" id="' + self.html_id + '_plot" \
-        style="width: 600px; height: 600px; padding: 0px; position: relative;">This is plot</div>'
+        plot_div = '<div class="' + self.html_class + '_plot" id="' + self.html_id + '_plot"></div>'
         html_string = html_string.replace('$plot$', plot_div)
 
         # substitute sliders if we have them
@@ -81,7 +80,7 @@ class GraphicalSliderToolModule(XModule):
             vars = [x['@var'] for x in sliders]
 
             slider_div = '<span class="{element_class}_slider" id="{element_id}_slider_{var}" \
-            data-var="{var}"></span>'
+            data-var="{var}" data-el_width="120"></span>'
 
             for var in vars:
                 html_string = re.sub(r'\$slider\s+' + var + r'\$',
@@ -98,7 +97,7 @@ class GraphicalSliderToolModule(XModule):
             vars = [x['@var'] for x in inputs]
 
             input_div = '<span class="{element_class}_input" id="{element_id}_input_{var}" \
-            data-var="{var}"></span>'
+            data-var="{var}" data-el_width="60"></span>'
 
             for var in vars:
                 html_string = re.sub(r'\$input\s+' + var + r'\$',

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js

@@ -124,8 +124,8 @@ define('Inputs', [], function () {
                 'text-align': 'left',
                 'outline': 'none',
                 'cursor': 'text',
-                'height': '15px',
-                'width': '50px'
+                'height': '15px'
+                // 'width': '50px'
             });
 
             // And finally, publish the text input element to the page.

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/sliders.js

@@ -164,7 +164,15 @@ define('Sliders', [], function () {
             }
 
             // Set the defined width to the slider.
-            sliderEl.width(sliderWidth);
+            // sliderEl.width(sliderWidth);
+
+            console.log('[Before]');
+            console.log('sliderEl.width: ' + sliderEl.width());
+
+            sliderEl.width(spanEl.data('el_width'));
+
+            console.log('[After]');
+            console.log('sliderEl.width: ' + sliderEl.width());
 
             // And make sure that it gets added to the page as an
             // 'inline-block' element. This will allow for the insertion of the