BB10: Alignment QML issue labels

Hi guys,.

I have a little problem with QML labels.

I have a stack of LeftToRight layout container. Inside, I put two labels: "title:" and "my text". See figure 1.

In some cases, 'my text' might have a longer text ('my longer text' for example). When that happens, I want these labels to behave as in figure 2. I mean, it's 'my longer text' should come out of the screen on the right side.

The problem is that they behave as in figure 3. It's like 'my longer text' gets centered horizontally and then she rides ""title:"."

Any idea on how to solve this problem?

Thank you!

Hello
Try adding
layoutProperties: {StackLayoutProperties}
spaceQuota: 1
}

the second label.

Tags: BlackBerry Developers

Similar Questions

  • Alignment of the label fast?

    Hi all

    I want to align the prompt label and the guest in the coast to coast path, as explained in the link below.

    http://obiee101.blogspot.com/2009/04/OBIEE-prompts-putting-label-in-front_18.html

    I was able to achieve. But is it possible to increase the space between the label and the prompt?

    Thank you for your help in advance.

    Thank you
    Knani

    Change what you have this:

    Replace the 15px at some distance you want.

    Hope that's what you're after,

    J

  • HP F2480 - aligning not printing labels

    Hello

    my HP F2480 is a great little Office all in one, but I've never been able to print labels in word (office 2007). There seems to be a problem with the alignment and the tags do not match the model selected in word. It is strange, however, that sometimes when I come to print on a normal A4 sheet it works fine. So I guess that it may be the different thickness of the sheet of labels.

    In any case if someone has had this problem or could help me that would be great. ~

    see you soon,

    Jeremy

    HI - you might try defining the type of automatic paper of plain paper in the printer driver, printing of labels.  If it works fine on plain paper, it might have to do with the automatic paper sensor.

    Hope that helps

  • problems aligning ImageView and label

    Hello

    I have a container with LayoutOrientation.LeftToRight guidance.

    Inside I just an ImageView and etiquette. When I try to organize their

    that the icon and the text display on the same line, I have problems.

    Here's how it looks by default (without any filler etc.):

    (the container - green - perhaps a bit more space below)

    the 'text' is not visible on this image more).

    I think that all see you my problem. The picture starts to the right of the

    edge of the container (it is aligned with its upper part), so that there is a

    space between the label and the top edge of the container.

    I want the image and name appear seemingly on the same horizontal

    line. How can I achieve this?

    PS if I put the container topPadding to something, then the two components

    go down simultaneously and yet they will not appear on the same line.

    Thank you.

    I think I found the solution by setting verticalAlignment: VerticalAlignment.Center
    to the ImageView for example.

  • Vertical alignment of the label PanelLabelAndMessage

    By default, the left label is centered vertically. Can it be aligned on it? I think it's desirable design for most of the cases.

    Hello

    labelStyle value = "' vertical-align: top" for panelLabelAndMessage. "

    Kind regards

  • Alignment of the label

    I have four check boxes. The user wants to first on his own line and the other four on the next line. The first has a long label, the others have a single word labels. I can't have the second line of four to align directly under the label of the box above. Line up the labels themselves. I'll try to imitate below, although I realize that sometimes spaces do align well in this message box...

    That's what I want:

    This is the label for the first box X
    2 X 3 X 4 X 5 X


    That's what I have:
    This is the Label for the First Checkbox    X
                                                    two  X    three X    four X    five X
    or, with the label aligned to the left
    This is the Label for the First Checkbox    X
    two                                                  X    three X    four X    five X
    Thanks in advance,
    Alexandra

    I'll take a look at the "quick fix" you sent... Thank you!

    Does not work: applies only to the boxes in a single element.

    I'm assuming that these boxes are the first/only on a line? Otherwise I don't think it would be so difficult... but the layout of the APEX form engine has a particular quirk: the label for the first part of the line still occupies a cell of table in itself. We can't get anything other than this single label in there, and that's causing your problem.

    There are probably a number of ways to work around that. Because it's brands that are the cause of the problem, it must end with integrated labels.

    1. create your own labels in the Pre element for each item text:

    
    

    substituting P22_YN1 with the name of each element (see the label corresponding to the terminology models).

    2 remove the labels of items and the label template for each element of the value Label No.

    3. set the display properties for the first box:

    Start on a new line: Yes field: Yes

    and for others, to:

    Start on a new line: No. : No.

    4 set the message for the first item text box:


    This approach puts all checkboxes in a form table cell. It will also work with them in separate cells by changing start it on new line... The field of values, defining a ColSpan for the first and losing the < br / >.

    In this way don't play nice with the validation messages online. If this is a problem, then a different approach is called for. Creating mock objects at the beginning of lines...?

  • Alignment of the label to mobileiconitemrenderer

    I have a custom element rendered for a list in an application to run on android and finds it difficult to get the label ' ' to align in the Center.

    The code is;

    override public function set data(value:Object):void {}

    If (value! = null) { }

    Super.Data = value;

    setStyle("fontSize",18);

    If (value.assigned) { }

    Label = "[ASSIGNED YOU]."

    setStyle ("textAlign", "Center");

    }

    else {

    setStyle ("color", 0xFFFF00);

    Label = "[PRESS TO ACQUIRE]."

    }

    height = 150;

    iconWidth = 75;

    iconHeight = 75;

    iconFunction = getIcon;

    messageFunction = getMessage;

    }

    }

    The colors and the fontsize appear to work well, but the label remains aligned to the left. I also tried to set the alignment in the list that is the owner of the converter.   Any ideas?

    It looks like you use a preview version very soon.  MobileIconItemRenderer has been renamed to IconItemRenderer, and it seems to work for me, the final version of Flex 4.5:

    one

    two

    three

    override public function set data(value:Object):void {}

    Super.Data = value;

    If (! data)

    return;

    If (data == 'two') {}

    setStyle ("'textAlign","Center");

    }

    }

    ]]>

  • Text is not properly aligned in s:Label or s:RichText components

    If we set value text in MXML using the child tags component s:Label or s:RichText , then the text is not properly aligned, do you consider it a bug?

    Complete code list: http://gist.github.com/390552

    Part of the code example:

        <s:Label text="Sample text"/>    
        <s:Label>
            <s:text>
                Sample text
            </s:text>
        </s:Label>
        <s:RichText text="Sample text"/>
        <s:RichText>
            <s:text>
                Sample text
            </s:text>
        </s:RichText>
    
    

    Result:

    http://lh4.ggpht.com/_GZ4fe45doHc/S-E09gQUC6I/AAAAAAAAB6g/jtDrB0gLXtI/s800/text_gap.jpg

    Hello

    You should first establish what layout you use I guess you used a vertical arrangement. Then you have tabs in your editor so that they become part of the text string

    Example of text

    Example of text

    It behaves properly.
    David.
  • Alignment of the label question form

    In my current application, I have a lot of forms with each with sets of form elements, as follows:

    < mx:Form id = "theForm" >
    < mx:FormItem id = "formName" label = "" name: "width ="100% ">"
    < mx:TextInput id = "formNameText" text = 'Epsilon' / >
    < / mx:FormItem >
    < mx:FormItem id = "formDesc" label = "" name: "width ="100% ">"
    < mx:TextArea id = "formDescText" text = "Lorem sit amet ipsum dolar" / >
    < / mx:FormItem >
    < / mx:Form >

    Which is all very well, but by default the entire text of the label is displayed as well aligned. I would like to change this to left aligned, but I'm not finding a way. I tried on the shape and textAlign textAlign and horizontalAlign on the FormItem, without effect. I went through the reference language for FormItems and found the FormItemLabel object, which is supposed to support textAlign, but who, in CSS, did nothing. Y at - it a property somewhere that controls this, or I have no choice but to rebuild everything that elements in absolute position and empty the form?

    The only way for you to do is to create your own extension to FormItem class. Form and FormItem are deliberately rigid in this sense; That's the purpose of the form and align the labels in this way. The container form MXML, unlike an HTML form, has no special meaning beyond the page layout.

    If you don't want to extend the FormItem class, and then use the container for the grid (not DataGrid) and align objects as you want. Think of the grid as the equivalent in HTML format

    tag.

    If you have Flex Builder 2, make a grid in design mode will be much easier than hand coding it.

  • Center (bb10) vertically on the label text

    Hi guys!

    Is there a way to vertically Center the text on the label?

    Suppose you have a label with heithg = 200 and I want to Center vertically.

    Is this possible?

    I think that there is no such thing as a valign, or almost, but if you set the height of the label on the actual height of the text you can then focus on it vertically by applying equal and the margin down (if you use layoutData) or something like

    myLabel.y = (availableHeight - myLabel.height) / 2...

    Note that you can not get the height of the text until the label is rendered or less placed in the display list (otherwise, it returns 0)

    myLabel.validateNow();
    myLabel.height = myLabel.textHeight;
    

    My app: Get set - get up!   Get ready for the revolution snooze.

  • How access QML label creator no - QML C++ file

    Subject: C++ see the variable screen QML.

    Error: Don't know how to do it.

    Question: How do I access the QML file creator no - QML C++ labels?

    or,

    Not any related example or document API that I can read?

    Mini code:

    A C++ file to create QML

    ApplicationUI::ApplicationUI (bb::cascades:Application * app)
    : QObject (app)
    {
    QML = QmlDocument::create("asset:///main.qml").parent(this);

    root = qml-> createRootObject();
    App-> setScene (root);

    }

    Another C++ to show a QML screen variable.

    Sensor:ensor (bb::cascades:Application * app)
    : QObject (app)
    {

    VideoLabel = root->findChild ("videolabelname");
    VideoLabel-> setProperty ("text", "2");
    }

    Thank you for your attention,

    Thanks Pierre. I've read before, but not any idea for the issue.

    I found a useful sample code.

    https://developer.BlackBerry.com/Cascades/documentation/dev/integrating_cpp_qml/custom_control_tutor...

    I have a solution to access label creator non - C++ file QML QML made the sample.

    The key's value and setvalue().

    Mini code for the solution:

    CPP.

    int sensor: value()
    {
    Return m_iValue;
    }

    Sub Sensor::setValue (int i)
    {
    name is the same as an instruction HPP WRITE Q_PROPERTY
    m_iValue = i;
    issue of valueChanged (m_iValue);
    }

    HPP.

    Q_PROPERTY (int value READ WRITE setValue NOTIFY valueChanged)
    public:

    Sensor();
    Virtual ~ Sensor() {}
    QObject * videolabel;
    Q_INVOKABLE
    int value();
    void setValue (int i);

    signals:
    void valueChanged (int);

    private:
    int m_iValue;

    QML:

    Button {}
    ID: aButton
    text: _app.value
    onClicked: {}
    _APP.ValueChanged.connect (aButton.onValueChanged);
    _APP.value = _app.value + 1;
    }
    onValueChanged (val) {} function
    aButton.text = "new value:"+ val;»
    }
    }

  • The JTable when JPanel as TableCellRenderer using custom text alignment issues

    Hello

    I have some difficulty with the text alignment/border issues when you use a custom TableCellRenderer. I use a JPanel with GroupLayout (although I also tried others like FlowLayout), and I can't get the text of the label in the JPanel to align with other cells in the table. The text within my 'panel' cell is moved down. If I use the code of the DefaultTableCellRenderer allows you to set the border when the cell receives focus, the problem gets worse as the text moves when the new border is applied to the Group of experts on the selection of the cell. Here's a NBS to show:
    import java.awt.Color;
    import java.awt.Component;
    import java.awt.EventQueue;
    import javax.swing.GroupLayout;
    import javax.swing.JFrame;
    import javax.swing.JLabel;
    import javax.swing.JPanel;
    import javax.swing.JTable;
    import javax.swing.border.Border;
    import javax.swing.table.TableCellRenderer;
    import javax.swing.table.TableColumn;
    import sun.swing.DefaultLookup;
    
    public class TableCellPanelTest extends JFrame {
    
      private class PanelRenderer extends JPanel implements TableCellRenderer {
    
        private JLabel label = new JLabel();
    
        public PanelRenderer() {
          GroupLayout layout = new GroupLayout(this);
          layout.setHorizontalGroup(layout.createParallelGroup().addComponent(label));
          layout.setVerticalGroup(layout.createParallelGroup().addComponent(label));
          setLayout(layout);
        }
    
        public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
    
          if (isSelected) {
            setBackground(table.getSelectionBackground());
          } else {
            setBackground(table.getBackground());
          }
          
          // Border section taken from DefaultTableCellRenderer
          if (hasFocus) {
            Border border = null;
            if (isSelected) {
              border = DefaultLookup.getBorder(this, ui, "Table.focusSelectedCellHighlightBorder");
            }
            if (border == null) {
              border = DefaultLookup.getBorder(this, ui, "Table.focusCellHighlightBorder");
            }
            setBorder(border);
    
            if (!isSelected && table.isCellEditable(row, column)) {
              Color col;
              col = DefaultLookup.getColor(this, ui, "Table.focusCellForeground");
              if (col != null) {
                super.setForeground(col);
              }
              col = DefaultLookup.getColor(this, ui, "Table.focusCellBackground");
              if (col != null) {
                super.setBackground(col);
              }
            }
          } else {
            setBorder(null /*getNoFocusBorder()*/);
          }
    
          // Set up our label
          label.setText(value.toString());
          label.setFont(table.getFont());
    
          return this;
        }
      }
    
      public TableCellPanelTest() {
        JTable table = new JTable(new Integer[][]{{1, 2, 3}, {4, 5, 6}}, new String[]{"A", "B", "C"});
    
        // set up a custom renderer on the first column
        TableColumn firstColumn = table.getColumnModel().getColumn(0);
        firstColumn.setCellRenderer(new PanelRenderer());
    
        getContentPane().add(table);
        pack();
      }
    
      public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
    
          public void run() {
            new TableCellPanelTest().setVisible(true);
          }
        });
      }
    }
    There are essentially two issues:

    (1) when the first round, the text in the custom converter column is shifted down a little.
    (2) once a column cell is selected, it moves down still further.

    I'd appreciate any help to understand what is happening!

    Thank you!

    (1) LayoutManagers need to take into account the border if the label is placed at (1,1) while the labels just start at (0,0) of the cell Rect. The layout manager also tend not not to reduce the component less than their minimum size. Defining minimum size labels to (0,0) seems to have the same effect in your example. Do the same for the maximum size helps if you set the height of the largest JTable line. Maybe easier to use BorderLayout, which ignores min/max for the Center (and a height min/max for East/West, etc.).
    (2) DefaultTableCellRenderer uses a 1px border if the UI update borderless is null, you do not have.
    (3) include a setDefaultCloseOperation is a NBS please. I think that I have a test of hundreds of current programs: P.

  • Alignment of label and SimpleTextField

    Hi all

    Is there a built-in method to align all labels and values as the ObjectList control done automatically on 4.6? In other words, the label is left justified, but the field is right justified.  I find that given the difference between the field and its entry - while poor design of a full application size, it gives a much more aerodynamic look on a small screen.

    This is the default alignment:

    First Label: FirstFieldSecond Label: SecondFieldThird Label: ThirdField
    

    This is the alignment that I'd like to see

    First Label:               FirstField
    Second Label:             SecondField
    Third Label:               ThirdField
    

    The label is left-aligned, while the field is right-aligned and right-justified.

    I tried a simple solution by a LabelField (FIELD_LEFT) and a SimpleTextField (FIELD_RIGHT) to a HorizontalFieldManager, but the two fields are always to the left without the space between the two. My other thought is to extend FieldManager to explicitly place the fields - giving etiquette, the minimum size and maximum width SimpleTextField possible - but I still need to justify the text in this area which I was not able to make the right successfully.

    Alternatively and perhaps better to give a consistent experience across devices with larger screens, would be the alignment as

               First Label: FirstField          Second Label: SecondField           Third Label: ThirdField
    

    It's the label fields are right justified in the field wider label. and value fields are justified to the left in the same field.

    Ideas/suggestions? I'd appreciate also your comments on whether it's worth the practice - is acceptable default alignment for you?  Your users seems acceptable/usable without any major problems?  As to the incompatibility between the alignment of text and labels, vs objectlistfields fields (this is what bothers me the most..)?

    Thank you

    Marc

    Take a look at the UserListScreen in the example below.

    How to-backup and restore of small amounts of data using SyncItem
    Article number: DB-00092

    http://www.BlackBerry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/800332/800625/How_To _...

    Out of the box, she will achieve the results that match your third example.  For ages in the right-aligned sample, add the "LabelField.USE_ALL_WIDTH". Style DrawStyle.RIGHT"age LabelFields.  This is the alignment you want (your second example).

  • Access QML in C++ label

    Hello

    I wonder how I can access a label I have in a QML in C++ file. Previously, I had the main.qml label and was able to get that way:

    hand. QML

    property alias currTimeText: currTime.text
    

    c ++

    mRoot->setProperty("currTimeText", timeString);
    

    However, I restructured my qml so that the label is no longer inside main.qml. Now main.qml has a button that pushes a page in another qml file and contains my label. What makes the problem more complex. Note that in the c ++ code above mRoot is created from main.qml. Any help is appreciated!

    Thank you

    Gerry

    If you want to access an object of c ++ assign an object name

    Label{
        id:labelid
        objectName:"labelname"
        text: "text"
    }
    

    So from c ++

    You can find and access the object directly using

        mNavPane = qml->createRootObject();    Label *label = mNavePane->findChild("objectName");label->setText(labelText);
    
  • Align the text in a box of text (no label)

    Hi all

    I have a form that I want to use to allow visitors to communicate with us.  I don't want to use text labels because I want the text boxes to align all adjust to the right of the text.  I thought that I can accomplish this by doing 2 divs: 1 for text and 1 for the text boxes.  My problem is that I can't get the text and the text box to be centered between them.  They are not just ' line up properly.  Is there an easy way to do this?

    It's pretty easy,

    In my example, this rule would have just the text-align: right; changed obviously, for text-align: left;

    {Label
    color: #121212;
    float: left;
    font-size: 1.2em;
    make-weight: bold;
    padding-right: 10px;
    text-align: right;
    Width: 160px;
    }
    Martin

Maybe you are looking for