# Modify text alignment of a ScrollableList in ControlP5 library

**URL:** <https://discourse.processing.org/t/modify-text-alignment-of-a-scrollablelist-in-controlp5-library/18835>\
**Category:** Libraries\
**Created:** [March 20, 2020, 11:57am UTC](https://discourse.processing.org/t/modify-text-alignment-of-a-scrollablelist-in-controlp5-library/18835 "2020-03-20T11:57:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![NaniAromix](https://avatars.discourse-cdn.com/v4/letter/n/848f3c/32.png) [@NaniAromix](https://discourse.processing.org/u/NaniAromix)\
**Post date:** [March 20, 2020, 11:57am UTC](https://discourse.processing.org/t/modify-text-alignment-of-a-scrollablelist-in-controlp5-library/18835/1 "2020-03-20T11:57:56Z")

</div>

I am trying to create a menu type list in my program, which when clicked reveals a drop down list of different screens to show next. This is how it looks at the moment:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/ff92aac1d711211aca2691967eef1feacfb92e14.png)

I have changed the font but can’t get to center the text in both the “MENU” bar and the other items in the list. Is there a way to do this that I am missing? I’ve been scrolling through the javadocs of the library but can’t seem to find it.

Thank you!

PS: Happy quarantine everyone. Stay safe.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 28, 2020, 5:45pm UTC](https://discourse.processing.org/t/modify-text-alignment-of-a-scrollablelist-in-controlp5-library/18835/2 "2020-03-28T17:45:06Z")

</div>

@NaniAromix – Were you able to resolve this issue?

---

<div class="post-metadata">

**Author:** ![NaniAromix](https://avatars.discourse-cdn.com/v4/letter/n/848f3c/32.png) [@NaniAromix](https://discourse.processing.org/u/NaniAromix)\
**Post date:** [March 31, 2020, 10:25am UTC](https://discourse.processing.org/t/modify-text-alignment-of-a-scrollablelist-in-controlp5-library/18835/3 "2020-03-31T10:25:26Z")

</div>

No, I still haven’t figured it out…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 31, 2020, 11:10pm UTC](https://discourse.processing.org/t/modify-text-alignment-of-a-scrollablelist-in-controlp5-library/18835/4 "2020-03-31T23:10:04Z")

</div>

Can you provide a minimal example of your code that exhibits the problem?

---

<div class="post-metadata">

**Author:** ![NaniAromix](https://avatars.discourse-cdn.com/v4/letter/n/848f3c/32.png) [@NaniAromix](https://discourse.processing.org/u/NaniAromix)\
**Post date:** [April 1, 2020, 10:39am UTC](https://discourse.processing.org/t/modify-text-alignment-of-a-scrollablelist-in-controlp5-library/18835/5 "2020-04-01T10:39:13Z")

</div>

Sure. This is the part of the code dedicated to the menu:

```auto
PFont pfont = createFont("Helvetica", 20, true);
ControlFont f = new ControlFont(pfont, 20);

cp5 = new ControlP5(this);
List windowList = Arrays.asList ("ALARMAS", "MOTORES", "LUCES Y AC", "PC PLOTTER", "MEDIA", "CAMARAS",);

...

 cp5.addScrollableList("MENU")
    .setPosition(1280-200, 0)
    .setSize(200, 400)
    .setBarHeight(50)
    .setItemHeight(30)
    .addItems(windowList)
    .setType(ScrollableList.DROPDOWN) // currently supported DROPDOWN and LIST
    .setFont(f)
    ;

```

My issue is that I can’t find a method that changes the alignment inside of the boxes of the scrollable list.

As a sidenote, is there any way to hace the dropdown list disappear when clicking outside of the actual list? As a way to hide it without having to click an actual item in the list. Also, is there a way to distinguish from the items and the top bar? My idea is to have the text in them in different sizes, so the top bar has a bigger size font than the items in the list.

Thank you!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 1, 2020, 3:25pm UTC](https://discourse.processing.org/t/modify-text-alignment-of-a-scrollablelist-in-controlp5-library/18835/6 "2020-04-01T15:25:26Z")

</div>

Hi Nani – any chance you could make that a minimal sketch? This broken snippet requires substantial work for someone to help you test / investigate – they need to add the java.util imports, move createFont to setup, guess the size of your screen (!!) etc. An MCVE would really help people help you.

I don’t know of a magic setting that isn’t in the CP5 docs – but if it isn’t there, there might be workarounds.

---

<div class="post-metadata">

**Author:** ![NaniAromix](https://avatars.discourse-cdn.com/v4/letter/n/848f3c/32.png) [@NaniAromix](https://discourse.processing.org/u/NaniAromix)\
**Post date:** [April 1, 2020, 4:04pm UTC](https://discourse.processing.org/t/modify-text-alignment-of-a-scrollablelist-in-controlp5-library/18835/7 "2020-04-01T16:04:44Z")

</div>

Of course. Thanks for the heads up, I’ll keep that in mind from now on. Here it is:

```auto
import controlP5.*;
import java.util.*;

ControlP5 cp5;

void setup() {
   size(1280, 1024);
   
  PFont pfont = createFont("Arial Bold", 20, true);
  ControlFont f = new ControlFont(pfont, 20);

  cp5 = new ControlP5(this);
  List windowList = Arrays.asList("WINDOW1", "WINDOW2", "WINDOW3");

  cp5.addScrollableList("MENU")
    .setPosition(1280-200, 0)
    .setSize(200, 400)
    .setBarHeight(50)
    .setItemHeight(30)
    .addItems(windowList)
    .setType(ScrollableList.DROPDOWN) // currently supported DROPDOWN and LIST
    .setFont(f)
    ;
}

void draw() {
  background(150);
}

```