# Text wrap problem using WrapPanel with Center alignment

**URL:** <https://forums.fusetools.com/t/text-wrap-problem-using-wrappanel-with-center-alignment/5348>\
**Category:** Bug Reports\
**Created:** [April 8, 2016, 9:57am UTC](https://forums.fusetools.com/t/text-wrap-problem-using-wrappanel-with-center-alignment/5348 "2016-04-08T09:57:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mircea](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@mircea](https://forums.fusetools.com/u/mircea)\
**Post date:** [April 8, 2016, 9:57am UTC](https://forums.fusetools.com/t/text-wrap-problem-using-wrappanel-with-center-alignment/5348/1 "2016-04-08T09:57:30Z")

</div>

I am trying to make a simple grid layout where the text (first name and last name) gets centered. [https://dl.dropboxusercontent.com/s/zydf2ge5m8qww8b/shot\_160408\_125232.jpg](https://dl.dropboxusercontent.com/s/zydf2ge5m8qww8b/shot_160408_125232.jpg)

I am using the WrapPanel with Alignment=“Center” and in my full app (not the demo file attached) I am only receiving the texts as separate properties and don’t know how to merge them. That is why I’m using 3 different text elements here.

The WrapPanel works nicely when the text is short but when the text is longer and wrapping comes into play, the layout breaks.

```auto
  <App>
  <JavaScript>
      var data = [
          {firstName: 'Leo', lastName: 'Huub'},
          {firstName: 'James', lastName: 'Holloway'},
          {firstName: 'Camille Jessica', lastName: 'Frazier'},
          {firstName: 'Manuela Pancho Consuela', lastName: 'Velacruz'}
      ];
      module.exports = {
          data: data
      };
  </JavaScript>
  <StackPanel>
      <Grid Columns="1,1,1*" Padding="10">
          <Each Items="{data}">
              <StackPanel Background="#ddd" Margin="5" Padding="5" Height="100" >
                  <WrapPanel Padding="5" Background="#8EBD8A" Alignment="Center" >
                      <Text Value="{firstName}" TextWrapping="Wrap" FontSize="13" Background="#D19D9D" />
                      <Text Value=" " FontSize="13"/>
                      <Text Value="{lastName}" TextWrapping="Wrap" FontSize="13" Background="#D15959" />
                  </WrapPanel>
              </StackPanel>
          </Each>
      </Grid>
  </StackPanel>
  </App>

```

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [April 8, 2016, 10:38am UTC](https://forums.fusetools.com/t/text-wrap-problem-using-wrappanel-with-center-alignment/5348/2 "2016-04-08T10:38:42Z")

</div>

I’m uncertain why you are using the `WrapPanel` here. The picture and the UX seem to agree with each other in this regrads (it appears to be doing the right thing).

If you’re trying to place the text on two lines then drop the `WrapPanel` and just use the `StackPanel`. If you want wrapped elements within the grid parts then drop the `StackPanel` and just use the `WrapPanel` -- it won’t be centered though.

If you’re trying to create a composite first/last-name field then create the string in JS and just use a single binding. We’re currently lacking a way to do compound string formatting at the UX level (it is a pending feature).

---

<div class="post-metadata">

**Author:** ![mircea](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@mircea](https://forums.fusetools.com/u/mircea)\
**Post date:** [April 8, 2016, 12:18pm UTC](https://forums.fusetools.com/t/text-wrap-problem-using-wrappanel-with-center-alignment/5348/3 "2016-04-08T12:18:17Z")

</div>

Look at the third box for example. Shouldn’t the text be centered?

Creating the string in JS is not do-able (that’s a separate issue reported here: [https://www.fusetools.com/community/forums/howto\_discussions/how\_to\_bindpass\_data\_to\_a\_child\_ui\_component](https://www.fusetools.com/community/forums/howto_discussions/how_to_bindpass_data_to_a_child_ui_component) )

Compound string formatting at the UX level sounds great (when it will arrive).

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [April 8, 2016, 12:26pm UTC](https://forums.fusetools.com/t/text-wrap-problem-using-wrappanel-with-center-alignment/5348/4 "2016-04-08T12:26:09Z")

</div>

The `Center` alignment is specified for the entire `WrapPanel`, so that itself will be centered, not the content inside of it.

On `StackPanle` however the `Alignment` also implies the default `ContentAlignment`, so it would work more like you expect there. I can add the feature request to add `ContentAlignment` support to `WrapPanel`.

We’re looking at several options for how to do string formatting and passing data around components. No estimate on when they will arrive yet though.

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [May 19, 2016, 6:44pm UTC](https://forums.fusetools.com/t/text-wrap-problem-using-wrappanel-with-center-alignment/5348/5 "2016-05-19T18:44:39Z")

</div>

+1 on the:

I can add the feature request to add ContentAlignment support to WrapPanel.

---

<div class="post-metadata">

**Author:** ![Elizabeth](https://avatars.discourse-cdn.com/v4/letter/e/34f0e0/32.png) [@Elizabeth](https://forums.fusetools.com/u/Elizabeth)\
**Post date:** [May 19, 2016, 9:45pm UTC](https://forums.fusetools.com/t/text-wrap-problem-using-wrappanel-with-center-alignment/5348/6 "2016-05-19T21:45:47Z")

</div>

+2

---

<div class="post-metadata">

**Author:** ![Francesco](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/francesco/32/781_2.png) [@Francesco](https://forums.fusetools.com/u/Francesco)\
**Post date:** [September 18, 2018, 1:28pm UTC](https://forums.fusetools.com/t/text-wrap-problem-using-wrappanel-with-center-alignment/5348/7 "2018-09-18T13:28:03Z")

</div>

+3 I need this function