Vertical alignment problem

Hello.

I'm really dense or something wrong with the way of working alignments.

I took the basic HelloWorld application and tried to simply align the text:

Page {
    Container {
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        Label {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            // Localized text with the dynamic translation and locale updates support
            text: qsTr("Hello World") + Retranslate.onLocaleOrLanguageChanged
            textStyle.base: SystemDefaults.TextStyles.BigText
        }
    }
}

So as far as I understand it, the container must snuggly fill available about heigth (vertical) and width (horizontal) space.

If the label should be centered in two dimensions as well. But when I run it, the label only centered horizontally, but not vertically.

I deceive you somewhere? I didn't I'd be able to get something wrong so fundamentally easy.

Looking forward to your answers.

Best regards

Wildcat

The default layout for a container is a StackLayout fixing things up and down. You can use the DockLayout to center the text like this:

Page {
    Container {
        layout: DockLayout {}
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        Label {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            // Localized text with the dynamic translation and locale updates support
            text: qsTr("Hello World") + Retranslate.onLocaleOrLanguageChanged
                textStyle.base: SystemDefaults.TextStyles.BigText
        }
    }
}

Tags: BlackBerry Developers

Similar Questions

  • Vertical alignment problems HP Photosmart D110a on A5 paper

    Hello, I would like to know if someone could help me with this question:

    I have problems of vertical alignment to print on A5 paper on the photosmart d110a.

    Printing of text will leave 10 cm from edge of paper even though I have no room to set up.

    I use Mac OS X 10.8.3 on a Mac Book Pro with the retina display.

    Clues?

    Thank you very much!

    Leandro

    I recommend you to install the driver of HP, if available for your version of Mac OS X. You will need to install the driver of AirPrint and sometimes the HP driver work better than AirPrint.
  • vertical alignment problem table

    Hello
    I wonder if someone can take a look at this page www.fitnessworld.ca/corplist.html and tell me what needs to be fixed to make the first column at the beginning of words at the top, aligned with the column next to it.
    If you have a solution, could you give the code in the right place?
    Thank you
    Text

    Vertical alignment is set to "default". This means that the text will start in the middle and work from top to bottom. If there is more text in columns one than the other, this is the result. Set the alignment of verticle at the Top for both and you are ready. You can do it in the property inspector.

    Andy

  • I have a problem with CSS vertical align. Help!

    This could be an easy fix, I don't know... but I've been customized style BC Photo Gallery and lightbox on this site that I'm doing for a photographer and I got a problem with the vertical alignment.

    I created my own .css document to replace styles Viewer by default in British Colombia, and now all I'm left with tries to Center vertically the lightbox image. I googled some methods and tried, but had no luck...

    http://michaellaphotography.BusinessCatalyst.com/Gallery-pages/weddings

    Check out the link, and when you click on any thumbnail, you'll see what I mean.

    I know I can't use filling methods, because I work with pictures in portrait and landscape.

    Thanks for your help!

    The light therapy device you use made for the creation of a larger full size of the image.  As a general rule, if you have a portrait image that is larger that the screen of the user enough scroll a little more.

    If you temporarily remove the CSS for "img #lightbox" on line 20 of myStyles.css you'll see how lightbox works in native mode. This should be good since the user wants to zoom and see a bigger picture when they click on it and it will be as big as possible on their screen.

    Once you see what I mean with the changes, I can tell you how to make sure the portrait images do not expand to full height and beyond the viewport. Rather than delete the CSS "img #lightbox" statement like I said before, this time change for:

    #lightbox img {}

    Width: auto;

    height: 100%;

    }

    This will ensure the images in the light therapy device take 100% of the height of the lightbox container and the width dimensionnera automatically to keep the proportion of the image. Landscape photos will be large and landscape photos will not be larger than the viewport.

  • Problem: The Page with the title bar, Vertical alignment Center does not work BB 10 keyboard (720 x 720)

    Hello

    I want centered vertically align something (for example, a label) on a page with the qml following, but it is not aligned properly on the keyboard BB (720 x 720), it aligns on the contrary always on top. It aligns not centered vertically as expected on BB 10 all touch (1280 x 768).

    import bb.cascades 1.0
    
    Page {
        titleBar: TitleBar {
            title: "Title"
        }
        Container {
            layout: DockLayout {
            }
            background: Color.create("#444444")
            verticalAlignment: VerticalAlignment.Fill
            Label {
                text: "label"
                verticalAlignment: VerticalAlignment.Center
            }
        }
    }
    

    I realize also realize that if I remove the title bar, and then it snaps as I want. Anyone have a solution this? Thank you.

    Try with this:

        titleBar: TitleBar {
            title: "Title"
            scrollBehavior: TitleBarScrollBehavior.Sticky
        }
    
  • Cascades - Vertical alignment does not work after you add a higher container

    Hi all

    I am facing a problem with vertical alignment... Trying to play and to imagine a way to transfer my apps to BB10, I wanted to create a page layout and Center my components in the center of the screen. I created the necessary containers and things, it worked, but then, my baggage was obviously only in the center of the screen too.

    So I decided to add a top-level container that would hold only the background. But then, my content is not centered (in the container for the child). I do not understand why and I don't know I'm missing something.

    Here is the structure:

    {Page}
    content: container}
         
    layout: {StackLayout}
    }
    background: Color.create ("#555555")
    {Of container
    layout: {StackLayout}
    }
    horizontalAlignment: HorizontalAlignment.Fill
    verticalAlignment: VerticalAlignment.Center / / DOES NOT WORK
                
    {Of container
    horizontalAlignment: HorizontalAlignment.Fill
    layout: {DockLayout}
    }
    {Label
    text: "save location".
    horizontalAlignment: HorizontalAlignment.Left
    verticalAlignment: VerticalAlignment.Center
    textStyle {}
    Base: tsd1.style
    }
    }
    ToggleButton {}
    horizontalAlignment: HorizontalAlignment.Right
    }
    }

    Anyone have any idea on this? Is there a simple way to have centered on the content with a background full screen? I tried a lot of different ways, but none gave me the result I wanted (except setting a padding but that is not as I wanted).

    Thank you

    Add an empty container with spaceQuota 1 down. It will take all of the remaining space.

    Container {
      layoutProperties: StackLayoutProperties {
        spaceQuota: 1
      }
    }
    

    If you want to Center controls, adds another container empty in front of them.

    Also try to play with preferredWidth: Infinity / preferredHeight: Infinity and modes of different adjustment (filling or Center).

  • Region alignment problems

    4.2.1

    THM: 2

    Hello world

    I had a question about the "new column" option when setting up of regions horizontally. I created an example here

    1. I am not able to reproduce here, but report 1 and 2 If the application has data with higher values, jumping around, I don't know how to respond, but basically, I tried to fix the width of the two reports as they do not horizontally expand depending on the length of column report. Is this possible?  I tried the following in the attributes of the region - style = ' width: 600px; float: center; Clear: none; "While this works, hardcode the origin of the problem in the second point.

    2. I want to center align the region 15 of html.  However, one thing I noticed is that if I set the width of the report 1 and 2 report of a coded hard and then region html 15 value behaves differently in different resolutions, on 1440, it is centered properly with all the elements in this center aligned, however, on a monitor resolution 1600 or 1910, it is pushed to the right side. When I hit the option to see the grid. I noticed there is another grid or column that is created on a higher resolution screen between report 1 and html region 15. This does not happen on a 1400 resolution screen. So the question is perhaps hardcode.

    Basic idea is to have all the three regions of fixed width such that they expand 'horizontal' and html region 15 is centered with everything centered.

    Thank you!

    ryansun wrote:

    I think that the best cases like you said that the two reports extend horizontally based on the resolution of the screen.

    Yes, I thought that was the easiest approach, and I set up in a new page in your demo application.

    I started by simplifying what was to get rid of everything that touched the spacing or available other than the layout region table. It was to drop or modify models of the region which introduce spacing through CSS margins, borders, or padding.

    Then, I created a region containing relatives and made the report and the regions sub-regions of the present button. All models of the region in theme 2 have CSS padding applied, so to avoid this problem, I added a model of area small to use for the container area (Model No. cannot be used because we need a selectable container for use as the target of CSS.)

    After that, it is simply to use CSS to develop the container and its content to the width full page and align the Center area, horizontally and vertically:

    /*
      All of the tab navigation enabled page templates in this theme include sidebars.
      These are not required here, so suppress them to eliminate unwanted padding
      artifacts from the layout.
    */
    td.tbl-sidebar {
      display: none;
    }
    /*
      Set the width of the parent region...
    */
    #container {
      width: 100%;
    }
    /*
      ...and its region layout to the width of the page, and eliminate table cell spacing
      from the region layout table.
    */
    #container .regionlayout {
      width: 100%;
      border-collapse: collapse;
    }
    /*
      Eliminate table cell padding from the region layout table.
    */
    #container .regionlayout>tbody>tr>td {
      padding: 0;
    }
    /*
      Set the width of the report cells on each side to 45% of the page width.
    */
    #container .regionlayout>tbody>tr>td:first-child,
    #container .regionlayout>tbody>tr>td:last-child  {
      width: 45%;
    }
    /*
      Set the width of the center button region to 10% of the page width.
    */
    #container .regionlayout>tbody>tr>td:nth-child(2)  {
      width: 10%;
    }
    /*
      Horizontally and vertically center the button region within the region layout cell.
    */
    #container .regionlayout>tbody>tr>td:nth-child(2)>table  {
      margin: 0 auto;
      vertical-align: middle;
    }
    /*
      Expand the width of the reports to the width of their container cells.
    */
    #container .regionlayout div[id$="_catch"]>table,
    #container .regionlayout .report-standard {
      width: 100%;
    }
    .report-standard td {
      vertical-align: top;
    }
    

    A number of things may need further work. As the parts of the report are now configured No. Template, no titles are displayed. If the securities are necessary, the best way to display will probably use another custom area template to avoid the fill applied to built-in ones. The white background and content minimum paging at the end of the relationship line affects the Visual Center in the vertical axis, causing the position of the region of middle button seem to be too low. This can be solved by removing the paging if reports don't require it, or style of the paging line to have the same background color as the rest of the report.

  • Lose the vertical alignment of the table during the conversion of the ditamap to book

    FrameMaker Version: 12.0.4.445 (later part of TCS5)

    1. I have a project structured, where several XML files have been grouped in a ditamap.
    2. For one of the XML files, I have a table, where I need to set the cell Vertical alignment of cells in the MIDDLE.
    3. So using Paragraph Designer > table cell, I have change the entries in the top in the Middle (the default values have been Top).
    4. With the ditamap pane selected, I'll then menu file > > Save Ditamap under
    5. I save ditamap as ' book with fm components 12.0 (* .book) "file type.
    6. In the resulting book, the XML files are now. FM files.

    However, at this point, when I open the. File of FM which has the table, the cell styles back to the TOP.

    I searched high and low for a similar problem. It's look like a bug to me, but can someone confirm?

    Thank you

    No, this is not a bug by itself. I bet that the alignment is lost before you generate the book. After you set the alignment and saving and closing the file... reopen and see if the alignment is still there... I bet it's gone. As a general rule, you cannot apply put in shape or properties to objects (elements) in a DITA file. This applies to font and paragraph properties as well as table set in shape and other types of development in the form. All you can do is create items and set attributes. Any parameter properties will usually be lost on file save.

    You would probably need to have a 'process of publication' (script any) you run your generated book and chapter files that would scan for an attribute that shows some properties must be set on the table. The @outputclass attribute is typically used for this kind of thing. I'm not aware of what anyone in default FrameMaker DITA, who put in place to manage this type of formatting of the tables.

    If this formatting that you try to apply is consistent for the whole table, it is possible that you will be able to do this by creating a new table format that has this set of default formatting. When you insert a table in a subject, the table format is assigned to the tgroup/@outputclass attribute and this is the form that is used when rendering the table. Just create a new table in the structured application model and put in place this format to have the properties you want. Then, when you insert the table, be sure to select this format. It can be hard to set this up, but it * should * work.

    However, if this does not work, or you need more refined formatting applied to the parts of the table, I produce a tool called DITA-FMx, which offers extended DITA creation and publication of the options for FrameMaker. It offers features that allow this type of table set shaped to be applied by setting the attribute @outputclass to a specific value on the line or cell. You can get more information on DITA-FMx here...

    http://leximation.com/DITA-FMX/

    Good luck!

    Scott Prentice

    Leximation, Inc..

    www.leximation.com

  • [JS] Real 'leader' of a paragraph with vertical alignment "justify".

    We have a problem reading the real 'leader' of a paragraph when on the textframe vertical alignment "justify" is applied and the attack has been implemented to 'auto '.

    It doesn't matter what attack is the result of this vertical justification, but the result of the 'text.leading' always is 'auto '.

    Do someone know another way to read the real, leading in pixels or other values?

    Or you would have to calculate it?

    myPara.lines [1] .baseline - myPara.lines [0] .baseline will give you the measured main in the second row.

  • Can someone Vertical align this (and perhaps fix the blocking)?

    Here's my problem:

    For the life of me I can not set the 'Add to Cart' button from Paypal.  I want it in the middle.  In Firefox, it looks perfect (well, almost perfect), but in IE it is not in the middle.  I tried to add ' vertical align: middle "in every possible position and adjust the padding and margin everywhere too... nothing works.  (Not to mention, it seems, slightly to the left as well horizontally, but I can live with that).  In addition, blocking worked perfect in Firefox and IE until I added the "add to cart".  Now, the 'blocking' is not quite right in Internet Explorer.  I would like to only it where when someone scrolls anywhere in the cell, the region becomes a darker gray.  I had this problem with the line-height of 250% until the "add to cart" button came and which becomes in Internet Explorer.  Now, I can increase this, but then the menu bar just keep getting bigger and bigger until it seems too big/too high.

    Can anyone help?

    Thank you very much.

    Here is the code:

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
    " < html xmlns =" http://www.w3.org/1999/xhtml ">
    < head >
    < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
    < title > Untitled Document < /title >


    < style type = "text/css" >

    {.horizontalmenubar}
    make-weight: bolder;
    text-align: center;
    border: 2px solid #000;

    }

    .horizontalmenubar td {}
    border-right: 2px solid #000;
    text-decoration: underline;
    background-color: #E5E5E5;
    color: #CA0000;
    line-height: 250%;
    }

    .horizontalmenubar a {}
    color: #CA0000;
    display: block;
    }

    .horizontalmenubar a: hover {}
    color: #CA0000;
    background-color: #B3B3B3
    }


    < / style >
    < / head >

    < body >


    < table width = "100%" border = "0" cellspacing = "0" cellpadding = "0" class = "horizontalmenubar" >
    < b >
    "< td width ="20% "> < a href ="... / index.html "> home < /a > < table >"
    "< td width ="20% "> < a href ="... / prod.html "> Products < /a > < table >"
    "< td width ="20% "> < a href ="... / faqs.html "> FAQS < /a > < table >"
    "< td width ="20% "> < a href ="... / contact_us.html "> contact us < /a > < /a > < table >"
    " < td width ="20% "> < target form = 'paypal' action = ' https://www.PayPal.com/cgi-bin/webscr "method ="post"> "
    < input type = "hidden" name = "cmd" value = "xxx" >
    < input type = "hidden" name = "hosted_button_id" value = "xxx" >
    " < input type ="image"src =" https://www.PayPal.com/en_US/i/BTN/btn_cart_SM.gif "border ="0"name ="submit"alt ="PayPal - the safer, easier way to pay online how!"> "
    < img alt = "" border = "0" src =" " https://www.PayPal.com/en_US/i/SCR/pixel.gif "width ="1"height ="1"> "
    < / make >

    < / make >

    < table >
    < /tr >
    < /table >


    < / body >
    < / html >

    The best idea is to post the page code in its entirety, or post a link to the live Webcam page - exactly to avoid such things.

    In any case, change this-

    method https://www.paypal.com/cgi-bin/webscr"="post">

    on this subject.

    method https://www.paypal.com/cgi-bin/webscr"="post"style =" "margin-top: 0;" > "

  • Text of label vertical alignment control

    Hi How can we vertical align the text of the label at the top... as there is no ownership for this

    Here is my code: -.

    < mx:Box textAlign = "left" id = "bxMain" height = "13" backgroundColor = "#f3f1ee" x = "80" y = "5" >
    < mx:Label color = 'black' id = 'lblDrawerName"fontWeight ="bold"textAlign ="left"fontSize ="11"width ="150"text ='{data. DrawerName} "x ="0"/ >
    < / mx:Box >

    the label is a box.the problem I m is the text of the label is cutting down... So I want to align on top.what I have to do is to do it within the height of the specified area is 13...

    other thing I can do is decrease the size of the font to 10, but if I do the helvetica font I said overall the app... not "BOLD" as 10 and less than 10 rest the fontweight property stops working

    What to do in this case...

    Thank you

    Hello

    Use the canvas instead of the box and put a negative value for the y of the Label

    
      
    
    
  • Vertical alignment of the text in a box with picture

    Hey guys,.

    I would like to know how vertically align you an icon and a piece of text so that they are both centered. The following CSS does not work:

    vertical-align: middle;

    For an example, please click here. You can see my problem in the download PDF with text read "Download Extended schools brochure".

    Thanks for your help

    ForensicBop wrote:
    > Hey guys,.
    >
    > I would like to know how vertically align you an icon and a piece of text so
    > they are both centered. The following CSS does not work:
    >
    > vertical-align: middle;
    >
    > For an example, please click on http://www.skytemedia.com/tester/index.htm. You
    > see my problem in the PDF download with the text following "Download extended
    > Schools book "."
    >
    > Thanks for your help
    >

    Hello

    try to remove the image of the markup and replace in your css for your
    mine...

    #download - menu a {}
    border: 1px solid RGB (204, 204, 204);
    Padding: 6px 6px 24 PX 2px;
    display: block;
    Background: url (.. / images/icons/pdf.gif) no-repeat left Center;
    }

    --
    Chin chin
    Sinclair

  • Div align problem

    Hello.

    Somone can see this code?
    Most likely, I used the tags div and span incorrectly.
    You will need to copy in Dreamweaver to see what it looks like and what I need.
    I try to get the "DOWNLOAD | PREVIEW text' to be aligned at the bottom of this area.

    < div style = "vertical-align: top of the text;" height: 100px; "> < img src =" "alt ="model 1"width ="150"height ="100"style =" width: 150px; "" float: left; "/ > < span style =" float: left; " Width: 300px; height: 100px; vertical-align: bottom; margin-left: 10px; ">
    < div style = "float: left;" vertical-align: top of the text; float: left; ' > This hg is a new salanon model as dasd as dasd as dasd as dasd as dasd as dasd as dasd as dasd as dasd < / div >
    < div style = "vertical-align: text-bottom;" float: left; Width: 200px; "> [DOWNLOAD] [PREVIEW] < / div >
    </span >
    < / div >

    Any ideas?
    Thank you.

    -Adrian.

    I misread your message. I see that you wanted only uppercase text in the lower part.
    There are always problems with your new code. You did pretty good but you
    can't float a div absolute positioning You don't need the
    Display: inline. Try this code...

    http://adrianTNT.com/products/templates/1/thumb.gif ".
    Width = "150" height = "100" / >

    This hg is a new salanon model as dasd as dasd as dasd as as
    DASD as dasd as
    [DOWNLOAD] [OVERVIEW]

    --
    Kind regards
    .. Trent Pastrana
    www.fourlevel.com

    "adrianTNT" wrote in message
    News:ebrlhb$k5b$1@forums. Macromedia.com...
    > Thank you. The exact code didn't work, but I managed to do something
    > absolute
    > position: absolute as you have written in this code.
    >
    > The code that worked:
    >
    "> http://adriantnt.com/products/templates/1/thumb.gif '.
    > width = "150" height = "100" / >
    >
    > This hg is a new model as dasd as dasd as dasd as salanon as
    > dasd
    > also as dasd as
    > [DOWNLOAD] [OVERVIEW]
    >

    >
    > Thanks again for your time.
    > Bye bye.
    >

  • Questions about css vertical-align

    given a list of the CSA page: Technologies of Mac OS X

    I do not understand vertical-align.  I will like to center the text in the vertical alignment.  I don't know what basis means, or intermediate. Where Ref base?  background of the characters or what?  I don't know how to work the percentages.

    In addition to all this lack of knowledge, 5% of the centers of communities Word for some reason I don't know.  'Contact support' appears to be centered for some reason any.

    with this css

          /* top line:
             Communities                Contact support */
          header#j-header nav#j-globalNav-bg {
              background-color: tan !important;
              margin-top: -15px !important;
             }
           /* Communities */
          div#body-apple header div#apple-site-title a {
            
              font-size: 20px !important;
              background-color: yellow !important;
              vertical-align: 5% !important;
             }
          /* Contact Support */
          div#body-apple header ul#contact-support-link a {background-color: pink !important;}
    
  • Left edges of printed lines moving in and out of vertical alignment, goes to the bottom of the page.

    I downloaded an upgrade HP suggested and just after, had a paper jam.   I have authorized, but then got the error message: cartridge stuck.

    I couldn't find the cartridges in a first time (they were caught completely to the left), then the belt to see if I could make it appear.  Nothing helped, and... uh - oh - guess that I would not do.

    Finally, I spotted the cartridges, slipped to them where they were supposed to be, and the printer worked.  Except now, descending by the offset of the page become for two and some lines (first part crushed), indentation of about an eighth of an inch of horizontal lines.  Then, on a half inch below the page lines come back to correct the record.  Then they go again shifted, which cycling through all the way to the bottom of the page.

    How, please, can I restore the vertical alignment?

    I have a MacBook Pro with OSX 10.7.5.   All my HP applications are dated 5 March 2012

    (I'd be happy to be notified when there is response, [edited by Moderator] Thank you)

    Hi dickns33,

    I'm glad to hear that you found someone else and it works. As for the former, although it is very nice and respectful to donate, make you a good point about someone buy it and be disappointed in the quality of printing. I think the best thing to do is to recycle.

    HP has recovered more than 2.3 billion pounds of products for reuse and recycling. HP helps to extend the life of THIS material through our programmes of refurbishment, reducing the environmental impacts and make it accessible to the largest equipment. We recycle products that are more suitable for re-use. - This presentation text and additional information are on the following Web page.   70 countries and territories around the world where we are collecting used products for resale and recycling.

    Thanks for the rest a loyal customer of HP and to hang in there all the way with me here on the HP Forums. If you need a helping hand, feel free to reconnect and reach out.

Maybe you are looking for

  • can I add common IDENTITY cards (driving permit, passport, etc.) to the wallet? How?

    can I add common IDENTITY cards (driving permit, passport, etc.) to the wallet?

  • Some suggestions for a hardware upgrade on P20 S203

    Hi, I upgraded my satellite P20 S203 because I now have a untimely budget of 500 euros.I would just have a few suggestions.First of all: it's crazy to think about changing the motherboard? And if it seems not too crazy, one of which (obviously to tos

  • How to convert an AVI file that contains several video clips?

    I have an AVI file that contains two clips of concurrent synchronised video a audio track. None of the players AVI or conversion services, I tried (Handbrake, VLC, online - Convert.com) will convert or export the two clips - only clips gets output, i

  • Webcam does not work on Satellite L650D

    Hi guysI have a big problem with the integrated webcam, but it allows first to present this notebook: * Satellite L650D-101 *.* Windows 7 64 bit *.* Athlon II P320 Dual-Core 2.10GHz** 4 GB of ram *.* Radeon HD 5145 *. Now it's pc to my girlfriend, an

  • DeskJet 3845 Windows 7 drivers

    I have a new Win7 machine and cannot load drivers for my DeskJet 3845.  I looked through the discussion forums and of course have tried this link http://support.hp.com/us-en/document/c01874792 Other people seem to have been able to solve this problem