improved styleability of joystick

nicegui/elements/joystick.js

@@ -1,10 +1,11 @@
 Vue.component("joystick", {
   template: `
-    <div data-nicegui='joystick' v-bind:id="jp_props.id" style="background-color:AliceBlue;position:relative;width:10em;height:10em" :style="jp_props.style"></div>
+    <div data-nicegui='joystick' v-bind:id="jp_props.id" :class="jp_props.classes" :style="jp_props.style"></div>
     `,
   mounted() {
     const joystick = nipplejs.create({
       zone: document.getElementById(this.$props.jp_props.id),
+      dynamicPage: true,
       ...this.$props.jp_props.options,
     });
     joystick.on("start", () => {

nicegui/elements/joystick.py

@@ -19,6 +19,7 @@ class JoystickView(CustomView):
         self.on_start = on_start
         self.on_move = on_move
         self.on_end = on_end
+        self.style = 'position:relative;'
         self.allowed_events = ['onStart', 'onMove', 'onEnd']
         self.initialize(temp=False,
                         onStart=self.handle_start,