Text wrap problem using WrapPanel with Center alignment

Bug Reports
1

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

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.

  <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>
2

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).

3

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 )

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

4

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.

5

+1 on the:

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

1 Like
6

+2

1 Like
7

+3 I need this function