Scrolling in input form

ep

Hello,

I have a long input form to enter new data or to edit data: http://tinyurl.com/goyjxsb , and I would like to use the mouse wheel to scroll vertically. A scrollbar at the side of the popup window would also be helpful.

Is there a simple method to realize this?

Thanks,
Eberhard

allan

Hi Eberhard,

Editor should do that automatically - for example use this page and resize your browser window to be quite small vertically.

The interesting thing about your screenshot is that there is no header or footer in the form. Have you customised Editor at all?

Regards,
Allan

ep

Hm, maybe I do something wrong? I didn't modify Editor in any way. Here my Editor related code.

  editor = new $.fn.dataTable.Editor( {
    ajax: '/online-erfassung/$jahr/show-table.php',
    table: '#klappedit',

    fields: [
      { label: 'Publ.-Typ', name: 'TYP' },
      { label: '1. Verfasser', name: '_100_1_a' },
      { label: 'Titel', name: '_245_1_a' },
      { label: 'Untertitel', name: '_245_1_b' },
      { label: 'Herausgeber/Vorwort Vorlageform', name: '_700_1_a' }, 
      { label: '1. Typ', name: '_700_1_4' }, // in Vorlageform
      { label: '1. Hrsg. ID', name: '_700_1_9'  }, 
      { label: '2. beteiligte Person', name: '_700_2_a' },     // weitere Verfasser
      { label: '2. beteiligte Person Typ', name: '_700_2_4' }, 
      { label: '2. beteiligte Person ID', name: '_700_2_9' },

      { label: "Verfasser",
                name: "mehrpersonen",
                type: "select",
                options: [ "Weniger", "Mehr" ],
                def: "Weniger"
      },

      { label: '3. beteiligte Person', name: '_700_3_a'  },     // Beteiligte Personen

...

      { label: '5. beteiligte Person', name: '_700_5_a'  }, 
      { label: '5. beteiligte Person Typ', name: '_700_5_4'  }, 
     
...

      { label: '19. beteiligte Person Typ', name: '_700_19_4'  }, 
      { label: '19. beteiligte Person ID', name: '_700_19_9'  },

...

      { label: '1. Übergeordnete Einheit, ausgeschrieben', name: '773_1_t'  },
      { label: '1. Übergeordnete Einheit, KLAPPID', name: '773_1_w'  },
      { label: '1. Übergeordnete Einheit, ISSN der Zeitschrift', name: '773_1_x'  },

      { label: "Übergeordnete Einheit",
                name: "mehrueg",
                type: "select",
                options: [ "Weniger", "Mehr" ],
                def: "Weniger"
      },

      { label: '2. Übergeordnete Einheit abgek. mit Heft oder Datum', name: '773_2_a'  },
      { label: '2. Übergeordnete Einheit in früherer Klapp-Ausgabe Nr.', name: '773_2_g'  },

...

     { label: 'Anmerkung', name: '_500_1_a'  },

      { label: 'Systemstelle, letzte', name: '_654_1_a' },
      { label: 'Systemstelle, erste', name: '_654_1_b' },
      { label: 'Systemstelle Identnummer', name: '_654_1_c' },

      { label: "Systemstellen",
                name: "mehrsysst",
                type: "select",
                options: [ "Weniger", "Mehr" ],
                def: "Weniger"
      },

      { label: 'Systemstelle, letzte', name: '_654_2_a' },
      { label: 'Systemstelle, erste', name: '_654_2_b' },
      { label: 'Systemstelle Identnummer', name: '_654_2_c' },

... 

     { label: 'Systemstelle Identnummer', name: '_654_5_c' },

      { label: 'Sachregister', name: '_650_1_a' },
      { label: 'Sachregister Identnummer', name: '_650_1_9' },
      { label: 'Sachregister', name: '_650_2_a' },
      { label: 'Sachregister Identnummer', name: '_650_2_9' },

      { label: "Sachregister",
                name: "mehrsach",
                type: "select",
                options: [ "Weniger", "Mehr" ],
                def: "Weniger"
      },

      { label: 'Sachregister', name: '_650_3_a' },
      { label: 'Sachregister Identnummer', name: '_650_3_9' },
      { label: 'Sachregister', name: '_650_4_a' },
      { label: 'Sachregister Identnummer', name: '_650_4_9' },
      { label: 'Sachregister', name: '_650_5_a' },
      { label: 'Sachregister Identnummer', name: '_650_5_9' },

...

      { label: 'Sachregister', name: '_650_14_a' },
      { label: 'Sachregister Identnummer', name: '_650_14_9' },
      { label: 'Sachregister', name: '_650_15_a' },
      { label: 'Sachregister Identnummer', name: '_650_15_9' },

      { label: '1. Rezension', name: '_510_1_a' },
      { label: '2. Rezension', name: '_510_2_a' },

      { label: "Rezensionen",
                name: "mehrrez",
                type: "select",
                options: [ "Weniger", "Mehr" ],
                def: "Weniger"
      },

      { label: '3. Rezension', name: '_510_3_a' },

...

      { label: '10. Rezension', name: '_510_10_a' },

      { label: 'Rezensionsartikel', name: '_520_1_a' }
    ]
  } );

  editor.dependent( 'mehrpersonen', function ( val ) {
    return val === 'Weniger' ?
      { hide: [ '_700_3_a', '_700_3_4', '_700_3_9', '_700_4_a', '_700_4_4', '_700_4_9', '_700_5_a', '_700_5_4', '_700_5_9', '_700_6_a', '_700_6_4', '_700_6_9', '_700_7_a', '_700_7_4', '_700_7_9', '_700_8_a', '_700_8_4', '_700_8_9', '_700_9_a', '_700_9_4', '_700_9_9', '_700_10_a', '_700_10_4', '_700_10_9', '_700_11_a', '_700_11_4', '_700_11_9', '_700_12_a', '_700_12_4', '_700_12_9', '_700_13_a', '_700_13_4', '_700_13_9', '_700_14_a', '_700_14_4', '_700_14_9', '_700_15_a', '_700_15_4', '_700_15_9', '_700_16_a', '_700_16_4', '_700_16_9', '_700_17_a', '_700_17_4', '_700_17_9', '_700_18_a', '_700_18_4', '_700_18_9', '_700_19_a', '_700_19_4', '_700_19_9', '_700_20_a', '_700_20_4', '_700_20_9' ]} : 
      { show: [ '_700_3_a', '_700_3_4', '_700_3_9', '_700_4_a', '_700_4_4', '_700_4_9', '_700_5_a', '_700_5_4', '_700_5_9', '_700_6_a', '_700_6_4', '_700_6_9', '_700_7_a', '_700_7_4', '_700_7_9', '_700_8_a', '_700_8_4', '_700_8_9', '_700_9_a', '_700_9_4', '_700_9_9', '_700_10_a', '_700_10_4', '_700_10_9', '_700_11_a', '_700_11_4', '_700_11_9', '_700_12_a', '_700_12_4', '_700_12_9', '_700_13_a', '_700_13_4', '_700_13_9', '_700_14_a', '_700_14_4', '_700_14_9', '_700_15_a', '_700_15_4', '_700_15_9', '_700_16_a', '_700_16_4', '_700_16_9', '_700_17_a', '_700_17_4', '_700_17_9', '_700_18_a', '_700_18_4', '_700_18_9', '_700_19_a', '_700_19_4', '_700_19_9', '_700_20_a', '_700_20_4', '_700_20_9' ]}; 
  });

  editor.dependent( 'mehrueg', function ( val ) {
    return val === 'Weniger' ?
      { hide: [ '773_2_a', '773_2_g', '773_2_t', '773_2_w', '773_2_x', '773_3_a', '773_3_g', '773_3_t', '773_3_w', '773_3_x' ]} :
      { show: [ '773_2_a', '773_2_g', '773_2_t', '773_2_w', '773_2_x', '773_3_a', '773_3_g', '773_3_t', '773_3_w', '773_3_x' ]};
  });

  editor.dependent( 'mehrsysst', function ( val ) {
    return val === 'Weniger' ?
      { hide: [ '_654_2_a', '_654_2_b', '_654_2_c', '_654_3_a', '_654_3_b', '_654_3_c', '_654_4_a', '_654_4_b', '_654_4_c', '_654_5_a', '_654_5_b', '_654_5_c' ]} :
      { show: [ '_654_2_a', '_654_2_b', '_654_2_c', '_654_3_a', '_654_3_b', '_654_3_c', '_654_4_a', '_654_4_b', '_654_4_c', '_654_5_a', '_654_5_b', '_654_5_c' ]};
  });

  editor.dependent( 'mehrsach', function ( val ) {
    return val === 'Weniger' ?
      { hide: [ '_650_3_a', '_650_3_9', '_650_4_a', '_650_4_9', '_650_5_a', '_650_5_9', '_650_6_a', '_650_6_9', '_650_7_a', '_650_7_9', '_650_8_a', '_650_8_9', '_650_9_a', '_650_9_9', '_650_10_a', '_650_10_9', '_650_11_a', '_650_11_9', '_650_12_a', '_650_12_9', '_650_13_a', '_650_13_9', '_650_14_a', '_650_14_9', '_650_15_a', '_650_15_9' ]} :
      { show: [ '_650_3_a', '_650_3_9', '_650_4_a', '_650_4_9', '_650_5_a', '_650_5_9', '_650_6_a', '_650_6_9', '_650_7_a', '_650_7_9', '_650_8_a', '_650_8_9', '_650_9_a', '_650_9_9', '_650_10_a', '_650_10_9', '_650_11_a', '_650_11_9', '_650_12_a', '_650_12_9', '_650_13_a', '_650_13_9', '_650_14_a', '_650_14_9', '_650_15_a', '_650_15_9' ]};
  });

  editor.dependent( 'mehrrez', function ( val ) {
    return val === 'Weniger' ?
      { hide: [ '_510_3_a', '_510_4_a', '_510_5_a', '_510_6_a', '_510_7_a', '_510_8_a', '_510_9_a', '_510_10_a' ]} : 
      { show: [ '_510_3_a', '_510_4_a', '_510_5_a', '_510_6_a', '_510_7_a', '_510_8_a', '_510_9_a', '_510_10_a' ]};
  });

ep

I finally found the solution: I unnecessarily loaded these css files:

'.../DataTables-1.10.11/extensions/Buttons/css/buttons.foundation.css',
'.../datatables/Editor-PHP-1.5.5/css/editor.jqueryui.css',
'.../ss/foundation.min.css',
'.../css/dataTables.foundation.min.css'

So my conclusion is: Never load unnecessary css style files.

Thanks,
Eberhard

allan

Ah! That would do it. I couldn't figure out why it was partly styled. In fact it was overly styled :-).

Thanks for posting back with your findings.

Allan