This layout is impossible?

I am building this layout. Remarkable things. The bottom left and right box are both aligned bottom left and bottom right of the orange container. The orange container varies in length depending on the amount of text in the multi-line label.

PROBLEMS:

(1) making the orange containing a DockLayout, host of the multiline to the top label and the other two labels to the left/down and bottom/right causes the labels from the bottom to print above the top of the page layout. This is because the minimum height of the orange box is exceeded (in some cases), and DockLayout has no property to expand, to avoid duplication.

(2) making the container a StackLayout, it works better, since the top label is obliged to no overlap of the two background labels. However, if the multiline label fill all the minimum height of the orange box (which occurs in some cases), despite the down/left, and bottom-right box is aligned vertically to the bottom, they are just below the multi-line label. StackLayout seems to ignore the two boxes at the bottom, vertical alignment for a reason any.

No idea as to how this design can be implemented?

There are several approaches I could think, but it seems to work very well.

Container {
    layout: DockLayout {}
    property int padding: 20
    background: Color.create("#ff7f27")
    horizontalAlignment: HorizontalAlignment.Fill
    leftPadding: padding
    rightPadding: padding
    topPadding: padding
    bottomPadding: padding
    minHeight: 300   // key parameter

    Container {
        bottomPadding: bottomArea.height // note link to bottom area
        Label {
            id: theLabel
            multiline: true
            text: "Bacon ipsum dolor sit..."
        }
    }

    Container {
        id: bottomArea
        property int height: 100  // key parameter to keep label from intruding
        layout: DockLayout {}
        verticalAlignment: VerticalAlignment.Bottom
        horizontalAlignment: HorizontalAlignment.Fill

        Container {
            background: Color.Black
            preferredWidth: 200
            preferredHeight: parent.height - 25
        }

        Container {
            horizontalAlignment: HorizontalAlignment.Right
            background: Color.Black
            preferredWidth: 200
            preferredHeight: parent.height - 25
        }
    }
}

Note several comments identify key parameters. You don't give enough details on what the boxes at the bottom were for me to do more than that, so they just height fixed containers for now.

Tags: BlackBerry Developers

Similar Questions

  • How can I make this layout.

    I need to make this layout using horizontal area manager. Can someone help me with this...

    HFM with use_all_width, red background.
    LabelField with paddings properly set and covered with paint method to change the font to white color.

  • Someone had this problem? Impossible to find missing media... photoshop CS6 extended... windows

    Someone had this problem? Impossible to find missing media... photoshop CS6 extended... windows

    Hey, I figured it out... Thanks for responding. I think it had something to do with the videos on an external device.

  • How to make this layout in blackberry

    This screenshot have three editfield I want to do this type of blackberry screen. In the editfield, he should have # in starting and * at the end and it should not be removed on back press.

    The best way to do it is to have the entire field as a HorizontalFieldManager.  This will contain 3 fields, a LabelField to display the ' # ', an EditField and an another LabelField to display the *.

    For the two LabelFields that you will replace object to set the color you want, and then call the super.paint ().

    The trick is the EditField, which, by default, will have plenty of space, it is given.  You should limit its width to make room for the * at the end.  The best way to do this is to replace the sublayout() in the HFM and actually ask the fields yourself.  Here are two KB articles that will help you to do this:

    http://supportforums.BlackBerry.com/T5/Java-development/create-a-custom-layout-manager-for-a-screen/...

    http://supportforums.BlackBerry.com/T5/Java-development/how-to-extend-Manager/Ta-p/446749

    There are other ways to do it, but I think this approach is more flexible.

    Good luck.

  • What is the best way to get this layout of the chapter?

    I have a document which is now a large flow of pages.

    However, there are "chapters, in this 'book'. A 'chapter' actually starts on the right page. But I want the left page to participate in the design of the spread of the beginning 'chapter '. This means that left before the start page real "chapter" is reserved in control of layout and all "chapter" before that would end on a left page, needs a right-hand page empty inserted, after which the left page of the early-'chapter' spread follows.

    Now, I can do the pages on the left of the start "chapter" start a section and to correct even a page number. That it is positioned on the left side. But when I add pages from the previous section, this means I have to change the page numbers of the beginning of all the sections that follow hand.

    Are there not a better way to do this? Somehow I don't have to worry about the numbering of the pages myself while still getting the page before the "chapter" included in the section of this "chapter"?

    (I write "chapter" because these aren't chpaters Id in an Id book, but a few sections in a single document Id).

    If the previous "chapter ends with a page of pairs (left hand), you add two pages, if it ends on the right add you a..

    Another way to do this automatically is to set an Option to keep on the paragraph style that you use for the first paragraph on the page at beginning of chapter, then it will start the section on the next odd-numbered page.

  • How can I achieve this layout? DIV inside div tags

    Hello world
    I m beginner in web design. I am trying to create a layout like this
    http://ImageShack.us/photo/my-images/717/layoutproblem.jpg/

    But I m having difficulties to give the position,height, float and display the properties for the divs.
    Please note that there are the borders of the image on the left and right side of the div content and bottommargin.

    Thanks in advance.

    Two divs, two wide explicit and both floated left for the gallery and details.  Space them margins.

    Follow that with a single div width of the container for technical details and possibly the content.  No required positioning.  I'm not even sure that a wrapper is required because you can give the body tag with a width in CSS and use left/right auto margins to center the content.

    Why wouldn't work?

  • I hate this new menu, impossible to find the story or how to save my old firefox back to bookmarks toolbarwant

    I took weeks to find the 'Search' function to search for words on the page, I want option back to the old firefox

    If you double- click on the star it works as it was, as far as I can see.

    As does, right-click > bookmark this page.

    Amendment I made changes as long as I have probably not by default in this respect. I certainly don't have the Blue Star I've seen references to the.

  • I really don't like the new version of Firefox, when they go to restore? The idea of this layout is worse than the error Vista mircosofts.

    It is not that I don't like the change, in fact I love it. However, the open tabs and new Windows Open should return to the original format. Of course, there's a fancy transition but it is more annoying than enjoyable. I never complain about things like that, in fact this will be my first ever complaint about a browser, Explorer, I stop, and looks like I'll do it again until they have change the format of this upgrade. I do not used and I refuse to everything everyone I know feels the same way.

    What you don't like in Firefox 4 on how open tabs, windows and?

    You can cancel a large number of these changes either by activating / disabling or changing the prefs on the topic: config page or via extensions.

    You can right click on the orange Firefox button to open the menu of the toolbar or use (F10) view > toolbars.

    • Click on the entry in the Menu bar to make the menus visible bar.
    • Click "Tabs at the top" to remove the check mark and place the tab to its original position bar just above the browser window.
  • So, basically I just want to complain about windows 7 built in game "hearts", I don't like this layout of games under windows 7, they are too widely all over the screen! Microsoft should make an option to change the layout of cards the same as it was in w

    Well, as I mentioned above, layout of cards that bothers me in game of hearts of windows 7.

    http://input.Microsoft.com will accept suggestions for 7 soon.

    Messages rating helps other users

    Mark L. Ferguson MS - MVP

  • Noob or not this layout stuff is BROKEN!

    If you run this simple example, you will see that the Web remains centered only until MAX width and height are achieved, and then it is is more preserved in the center of the window?  How is it and why do even those things so SIMPLE are so DIFFICULT to achieve?

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx"
                backgroundColor="#CCCCCC"
                maxWidth="640" maxHeight="480"
                >
         <mx:Canvas id="mainCanvas" x="0" y="0" 
                 height="{(this.width / (4/3))}" 
              width="{(this.height * (4/3))}" 
              backgroundColor="white"
              horizontalCenter="0" verticalCenter="0"
              />
    </s:Application>
    

    you already managed to focus your canvas havn't you?

    It works fine for me

    
    
            
                
            
            
    
    

    or are you talking about centering in the middle with a maximum resolution of 640 x 480?

    in this case, why not put the app to w & h 100%, place a cloth in there with these dimensions max and then place your scaling of the canvas.

    or if you do not want to use another canvas, you could intercept the height & width so that they cannot exceed a certain size by monitoring the resize event

    
    
        
            
        
    
        
             480)
                        mainCanvas.height = 480
    
                    if(mainCanvas.width > 640)
                        mainCanvas.width = 640
                }
            ]]>
        
    
        
    
    
    

    You can even create your own custom canvas that does this on the Set accessor of the height and width, allowing you to reuse in any project you want without having to recode.

  • Helps the checkbox column layout

    Here's what I need to accomplish:
    I need to display a long list(50-200) of boxes w / labels in the form of multiple columns.  They should be sorted alphabetically down and across all columns. If scrolling is required, then it should only scroll vertically.  Something like the image below.

    What I tried was to use a TileList component with an itemRenderer checkbox.  It works very well for 1 column and scrolls vertically very well.  It works very well for 3 columns, but when it scrolls it scrolls horizontally and I need to scroll vertically.  I have attached my code.
    I noticed one thing is when you define '= vertical direction' for a component TileList list sorted vertically but horizontally scrolls.  If we leave it as default (= horizontal direction), then sort horizontally, it scrolls vertically.  I need to sort vertically and scroll vertically.  I tried to set the VerticallyScollPolicy and HorizontalScrollPolicy but just cut the data instead of changing the direction of travel.
    I guess my second question is that if this feature is impossible with a TileList component, then which component would be a better option.
    Thanks in advance for taking the time to answer my questions.


    checkboxlist.jpg



    <? XML version = "1.0" encoding = "utf-8"? >
    " < = xmlns:mx mx:Application ' http://www.Adobe.com/2006/MXML "
    xmlns:CSC = "" com.facl.uaf.Common.Shared.widget. * ""
    Layout = "vertical".
    verticalAlign = "top".
    horizontalAlign = "center".
    backgroundGradientColors = "[0x000000, 0 x 323232]."
    paddingTop = "20".
    paddingBottom = "20" >

    < mx:ArrayCollection id = 'collection' >
    < mx:Object label = "Alameda" / >
    < mx:Object label = "Alpine" / >
    < mx:Object label = "Amador" / >
    < mx:Object label = "Butte" / >
    < mx:Object label = "Calaveras" / >
    < mx:Object label = "Del Norte" / >
    < mx:Object label = "El Dorado" / >
    < mx:Object label = "Fresno" / >
    < mx:Object label = "Kern" / >
    < mx:Object label = 'Los Angeles' / >
    < mx:Object label = "Orange" / >
    < mx:Object label = "Place" / >
    < mx:Object label = "Plumas" / >
    < mx:Object label = "Riverside" / >
    < mx:Object label = "Sacramento" / >

    < mx:Object label = "San Diego" / >
    < mx:Object label = "San Francisco" / >
    < mx:Object label = "Santa Barbara" / >
    < mx:Object label = "Santa Clara" / >
    < mx:Object label = "Santa Cruz" / >
    < / mx:ArrayCollection >

    " < = xmlns:mx mx:TileList ' http://www.Adobe.com/2006/MXML "
    Color = "#323232".
    textAlign = "left".
    paddingLeft = "20".
    itemRenderer = "mx.controls.CheckBox"
    verticalScrollPolicy = "auto".
    themeColor = "#FFFFFF."

    dataProvider = "{collection}."
    columnCount = '3 '.
    width = "500".
    Height = "100".
    direction = "vertical" >
    < / mx:TileList >

    < / mx:Application >

    A list like the TileList class made a number of important things.  It creates enough converters to fill the visible part, so you don't end up allocate tons of memory for thousands of pieces of data, and there a selection model where you can select one or more items of data, and he draws a reversal and selection of background color on the entire rendering engine.

    What should you?  If this is not the case, a VBox with 3 HBoxes with 1/3 of the checkboxes in each HBox is all you need.  You can use a Repeater to generate checkboxes or just add it in a loop.

    Alex Harui

    Flex SDK Developer

    Adobe Systems Inc..

    Blog: http://blogs.adobe.com/aharui

  • Impossible to reset firefox.

    Hello

    My PC is Windows 9 and firefox. Reformatted 2 months ago.

    Unable to save certain Web pages for the last two days, I had the usual 'reset firefox' when I have this kind of problems. But this time he would not be released to zero. I get the message:

    "Well, it's embarrassing.

    Firefox has struggle to recover your windows and tabs. This is usually caused by a recently opened web page.

    You can try:

       Removing one or more tabs that you think may be causing the problem
       Starting an entirely new browsing session"
    

    No Web page was opened at this time. Impossible also to update firefox.

    Help, please.

    Thank you

    Hope you are getting better. Run the full installer. If this is the problem,
    large. If not, we'll go from there.

  • Impossible to navigate to and select the menu buttons during playback of DVD on TV

    I use DVD Studio Pro 4.2.1 on iMac OS 10.6.8 (using old BONES of FCP 6.0.6).

    I have two DVD players for my TV and a Sony DVP-NS57P-GE GE1105P.

    For the video I created, I have two buttons on the main menu 1, 'Play' and 'Chapters' which goes to menu 2 with my links 7 chapters. This perfect mode DVDSP simulate all the works by clicking on these buttons, but I can not click on these buttons of menu 1 with one of my remotes for DVD player when viewing on TV. Movies usually have a menu with buttons like play, scenes, etc. that I can navigate to with my remote.

    Remote controls work fine, I can use its buttons to move to the previous or next chapter while the video plays and the Sony has a strange menu page of access to the chapters but it would be awkward and should not be necessary. I just want someone to be able to navigate on my menu page 1 and select the link to chapters. Not really concerned about "play" button since someone can click play on the remote control.

    So, I apparently need to change a few settings DVDSP. What I'm missing here? Google it and I tried manual DVDSP, but no luck.

    Thank you very much.

    Jim

    No function edit posts, so I have to put this in a response, I guess. This layout of the forum is so bad, was so much better several years ago. It's looking like my post does not get a response for a reason, but in the cases where it does, I need to update.

    It seems that I am able to navigate to these buttons, I just couldn't see that because the 'Selected' colors, I put to them do not work. I have all the colors of the selection state set for Normal, selected and active. When I use my DVD in my sell order DVD or mode DVDSP simulate with button style control remotely to this topic, when I browse to the top, bottom, left or right, nothing to change the color of links, so there is no way of knowing when I am on a link (I have 9 on a single page) and you want to select and then press ENTER.

    I've hunted throughout the manual, google, YouTube and cannot find the answer to this problem.

  • Impossible to get websites to use respective SSL certificates

    Mac OS 10.10.5

    Server 5.0.15

    I have a question where the default web site ("Server (SSL) Web site" ") is in conflict with the SSL certificates for my three other SSL sites.

    The configuration of my website (Note: server IP is 192.168.1.100)

    • Web Server SSL (all IP addresses) site - cert for domain1.com (work)
    • Domain1.com (192.168.1.10) SSL - cert for domain1.com (work)
    • Domain2.com (192.168.1.20) SSL - cert for domain2.com (cert draws for domain1.com, invalid identity)
    • Domain3.com (192.168.1.30) SSL - cert to domain3.com (cert draws for domain1.com, invalid identity)

    My DNS records:

    • Primary area - Domain1.com
      • A: Domain1.com 192.168.1.10
      • NS: Domain1.com
    • Primary area - Domain2.com
      • A: Domain2.com 192.168.1.20
      • NS: Domain2.com
    • Primary area - Domain3.com
      • A: Domain3.com 192.168.1.30
      • NS: Domain3.com
    • Reverse zone - 1.168.192
      • PTR: 192.168.1.10 Domain1.com
      • PTR: 192.168.1.20 Domain2.com
      • PTR: 192.168.1.30 Domain3.com
      • NS: Domain1.com
      • NS: Domain2.com
      • NS: Domain3.com
    • Reverse zone - 100.1.168.192.in - addr.arpa
      • PTR: 192.168.1.100 server.domain1.com
      • NS: server.domain1.com

    Whatever the cert is selected for the default Web site apply to all SSL Web sites. The only way I can force everyone to use their respective certificates is to set the IP address of the Web site to be the same as the IP of the server (in this example 192.168.1.100). It works, but which prevents the work Profile Manager.

    I'm 99% sure that I have my DNS configured correctly (right now all a records point to 192.168.1.100 as a temporary solution), but I'm willing to take another look, if someone has a suggestion clearly and concisely. Ideally, each DomainX.com would have an IP de.10.20 et.30.

    So how can I do all three Web sites use different IP addresses AND their respective certificates? Is this possible?

    (I appreciate any suggestion at this stage. This question is impossible to find an answer anywhere on the internet after about 9 months of research).

    Solution for someone who comes looking for this problem!

    After talking to the Apple Enterprise support:

    The site services will assuming that you only have one certificate for all Web sites. Unless you want to really roll up your sleeves and get down and dirty with the Apache configuration files, you must have a valid certificate for all areas, you use AND give each site its own IP address.

    When configure you your certificate, the host name must look like this:

    Server.Domain1.com (this is the name of your common)

    *. Domain1.com

    *. Domain2.com, etc..

    I used a StartCom certificate class 2 IV SSL ($ 59 / year).

    Then, assuming you know how to import a verified certificate, use it for all services that need and all the websites you want course (why wouldn't you use https, anyway?)

  • I have a picture that I need to print to a certain size (45x35mm). How can I do this?

    Printer preferences is no help here - are all that I can choose different paper sizes

    Select the photo in Photos, enter ⌘P, and then click the custom layout.

    In this layout, enter the width and height of the picture.

Maybe you are looking for

  • iPad looks terrible trolling with Safari 2

    My air Ipad 2 late so bad while I am browsing with Safari, that actually I can't do my work. I heard blocker content can cause the problem, but I've already disabled and the problem still exists. But even with content Blocker should work like all oth

  • HP ENVY 5646: Wireless ID on printer

    Why, when I check the summary wireless on my envy of 5646 it identifies the hostname as "Lesleys-iPad"? Is it a security issue that I have to correct, and if so, how?

  • M4: Regulation of the CPU power and fan - tablet is running hot and noisy

    My M4 is running hot and and the frequent active noisy fan in the normal power setting. This allows to improve some during the definition of the maximum energy saving options: battery life. But still the fan starts running and short relatively freque

  • Retrieve the data from the old hard drive IDE

    I have an old netbook HP TC 4200. I want to retrieve data from it. So I would like to know the details of the envelope required for the hard drive.

  • My 7 d Mark II sharpness

    Hello guys,. I bought a 7 d Mark Ii last year and started learning photography since then. However in comparison to these photos on the 7 d Mark ii synthesis or video items, I always get sense mine are less strong than they. By sharp, I mean when the