Multi Select Object to have horizontal scroll bar

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

Danny Cheah

Hi David,

Is there a way to have a horizontal scroll bar for the MultiSelect object? My array item is quite long and it got truncated during runtime.

Dear user: please, note that this forum's thread refers to the previous generation of our DecSoft App Builder, which is still available, only for our customers, in their DecSoft customer area, under the "Releases" tab. You can get more information, download and try the current generation of the product here.

Thank you.

Best regards,

Danny Cheah

DecSoft

Hello Danny,

If I am not wrong the Select control never show a horizontal scroll, and, we can't force it using any CSS style. A possible workaround can be to place the Select inside a Container, made the Select as width as the larger item, and, set the Container's width to what we wanted, and then use the "overflow-x: auto" of the Container. You can see this approach in the below app sample:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.44">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 2</Name>
    <ShortName>New App 2</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-08-13T14:39:56.448</Created>
    <Modified>2019-08-13T14:44:49.926</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <Controls>
        <Control Role="1001">
          <Name>Container1</Name>
          <Top>48</Top>
          <Left>8</Left>
          <Width>296</Width>
          <Height>200</Height>
          <Style>overflow-x: auto; overflow-y: hidden; </Style>
          <Controls>
            <Control Role="20005">
              <Name>Select1</Name>
              <Top>0</Top>
              <Left>0</Left>
              <Width>472</Width>
              <Height>200</Height>
              <TabIndex>0</TabIndex>
              <Items>
                <![CDATA[111111111111111111111111111111111111111111111111111111
222222222222222222222222222222222222222222222222222222
333333333333333333333333333333333333333333333333333333
444444444444444444444444444444444444444444444444444444
555555555555555555555555555555555555555555555555555555
]]>
              </Items>
            </Control>
          </Controls>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.44 (6/24/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Another possible approach is to use a Menu control instead of a Select one, and use the "overflow-x" of the Menu:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.44">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-08-13T14:44:26.336</Created>
    <Modified>2019-08-13T14:47:39.418</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <Controls>
        <Control Role="6003">
          <Name>Menu1</Name>
          <Top>80</Top>
          <Left>16</Left>
          <Width>288</Width>
          <Height>176</Height>
          <Style>overflow-x: auto; </Style>
          <Items>
            <![CDATA[111111111111111111111111111111111111111111111111111111
222222222222222222222222222222222222222222222222222222
333333333333333333333333333333333333333333333333333333
444444444444444444444444444444444444444444444444444444
555555555555555555555555555555555555555555555555555555
]]>
          </Items>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.44 (6/24/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Another approach (probably the best to me) can be to use a HTML control, and, use our own HTML markup to show a list of "large items" in a way that don't get out of the screen, so we no need the horozintal scroll at all:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.44">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 2</Name>
    <ShortName>New App 2</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-08-13T14:49:34.638</Created>
    <Modified>2019-08-13T15:13:50.761</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
NewArray "[MyItemsList]"
ArrayPush "[MyItemsList]" "Nulla lobortis, nibh sit amet condimentum fringilla, dolor ex congue"
ArrayPush "[MyItemsList]" "diam, eget condimentum lectus velit non metus. lectus velit non metus. "
ArrayPush "[MyItemsList]" "sit amet vestibulum purus pharetra in. Sed odio ante, portaodio ante, porta"
ArrayPush "[MyItemsList]" "Sed odio ante, portaodio ante, porta sit amet vestibulum purus pharetra in."
ArrayPush "[MyItemsList]" " Sed odio ante, portaodio ante, sit amet vestibulum purus pharetra in."

StartJS
  $("#HtmlContent1").on('click', '.our-list-item', function() {
    var
      selectedItemIndex = $(this).data('index'),
      selectedItemText = window.App.RootScope.MyItemsList[selectedItemIndex];

    alert('You choose the item index: ' + selectedItemIndex + ' with the text "' + selectedItemText + '"');
  });
EndJS

]]>
      </ShowEvent>
      <Controls>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>32</Top>
          <Left>40</Left>
          <Width>240</Width>
          <Height>328</Height>
          <Style>overflow-y: auto; </Style>
          <Html>
            <![CDATA[   
<ul class="list-group">
 <li class="our-list-item list-group-item"
  ng-repeat="item in MyItemsList" data-index="{{$index}}">[item]</span></li>
</ul>]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.44 (6/24/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

P.S. In this last app sample, you must look at the view Show event, as well the HTML markup placed in the used HTML control.

Purchase one or more licenses of our products if they are useful to you!

Danny Cheah

Hi David, thank you for taking the time to help me. Unfortunately I need to have multi select. The last sample does not allow me to do multi select. Anyway, I'm currently looking at the checkbox object sample to see if I can use this instead.

Thanks

Thank you.

Best regards,

Danny Cheah

DecSoft

Hello Danny,

You are right: I forget that we are talking about a multiselect list... but it's ok, with a bit more work we can get something like that working:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.44">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 2</Name>
    <ShortName>New App 2</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-08-13T14:49:34.638</Created>
    <Modified>2019-08-13T17:46:51.322</Modified>
    <InlineCSS>
      <![CDATA[
.item-selected
{
  background-color: #fff3cd;
}]]>
    </InlineCSS>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
NewArray "[MyItemsList]"
ArrayPush "[MyItemsList]" "Nulla lobortis, nibh sit amet condimentum fringilla, dolor ex congue"
ArrayPush "[MyItemsList]" "diam, eget condimentum lectus velit non metus. lectus velit non metus. "
ArrayPush "[MyItemsList]" "sit amet vestibulum purus pharetra in. Sed odio ante, portaodio ante, porta"
ArrayPush "[MyItemsList]" "Sed odio ante, portaodio ante, porta sit amet vestibulum purus pharetra in."
ArrayPush "[MyItemsList]" " Sed odio ante, portaodio ante, sit amet vestibulum purus pharetra in."
ArrayPush "[MyItemsList]" "Sed aodio ante, pordtaodio ante, porta sit amet vestibulum purus pharetra in."
ArrayPush "[MyItemsList]" " Sed odio ante, portaodadio ante, sit amet vestibulum purus pharetra in."

NewArray "[SelectedItemsIndexes]"

StartJS
  $("#HtmlContent1").on('click', '.our-list-item', function() {

    var
      selectedItemIndex = $(this).data('index'),
      selectedItemText = window.App.RootScope.MyItemsList[selectedItemIndex];

    if ($(this).hasClass('item-selected')) {
      $(this).removeClass('item-selected')
    } else {
      $(this).addClass('item-selected');
    }

    window.App.RootScope.SelectedItemsIndexes = [];

    $('.our-list-item').each(function () {
      if ($(this).hasClass('item-selected')) {
        window.App.RootScope.SelectedItemsIndexes.push($(this).data('index'));
      }
    });
    
    $scope.$apply();

  });
EndJS

]]>
      </ShowEvent>
      <Controls>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>8</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>392</Height>
          <Style>overflow-y: auto; </Style>
          <Html>
            <![CDATA[   
<ul class="list-group">
 <li class="our-list-item list-group-item"
  ng-repeat="item in MyItemsList" data-index="{{$index}}">[item]</span></li>
</ul>]]>
          </Html>
        </Control>
        <Control Role="6001">
          <Name>HtmlContent2</Name>
          <Top>416</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>56</Height>
          <Style>overflow-y: auto; </Style>
          <Html>
            <![CDATA[   
<div class="alert alert-primary text-center" ng-show="SelectedItemsIndexes.length > 0">
 Selected indexes: [SelectedItemsIndexes]
</div>

<div class="alert alert-warning text-center" ng-show="SelectedItemsIndexes.length == 0">
 Select one or more items
</div>]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.44 (6/24/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

I add a bit more of Javascript and a new "item-selected" CSS class in the app "Inline CSS" option.

Purchase one or more licenses of our products if they are useful to you!

Danny Cheah

Hi David

I managed to get it done. Thank you very much.

Thank you.

Best regards,

Danny Cheah

DecSoft

You're welcome, Danny!

Purchase one or more licenses of our products if they are useful to you!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.