Multi Select Object to have horizontal scroll bar

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at our YouTube channel and subscribe to be notified about new videos!

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Take a look at some frequently asked questions about us and our products!

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!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.