Results 1 to 5 of 5

Thread: Two Centering Problems with Carousel

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    32

    Default Two Centering Problems with Carousel

    Hello Mavens,

    Have you encountered any problems centering items/divs on Carousel panels?

    Were you able to fix them?

    Here's three screenshots of trials which illustrate the problems:

    In this trial, the panel's item: is centered because the cls: is styled (as shown in the code, below). However--regardless of the CSS's text-align assignment--the text is, at best, partially centered:



    In this test, the panel has a cls: and a div. The cls: is styled exactly as the example above...however it is not centered. Nor is the text within the item:



    The third (of three) trials applies the same CSS style to a div (the item: is not styled). Ah ha! The text is centered within the div...however the div is not centered in the carousel's panel.



    Now--in a consolidated, simplified form to foster your easy readability--here's the code for the three tests (all as one HTML file) used to generate the screenshots above.

    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Centering Problems Example</title>
            <!-- Sencha Touch CSS -->
            <link rel="stylesheet" href="../lib/touch/resources/css/sencha-touch.css" type="text/css">
    
            <style type="text/css">
    
                .styled{
                    color: black;
                    margin: 30px 15px 30px 15px;
                    padding: 6px 6px 6px 6px;
                    -webkit-border-radius: 10px;
                    border: 1px dotted grey;
                    text-align: center;
                    font-family: "Verdana", sans-serif;
                    font-size: medium;
                }
    
            </style>
    
            <!-- Sencha Touch JS -->
            <script type="text/javascript" src="../lib/touch/sencha-touch-debug.js"></script>
    
            <!-- Application JS -->
            <script type="text/javascript" >
    
                new Ext.Application({
                    name: 'cntrtst',
    
                    launch: function() {
                        var carousel = new Ext.Carousel({
                            fullscreen: true,
                            id: 'mp',
                            layout: {
                                type: 'card',
                                align: 'stretch'
                            },
                            cardSwitchAnimation: 'slide',
                            items: [
                                {
                                    cls: 'styled',
                                    html: '<h1>Page One.</h1><br />Hello Mobile World.<br /><br />This panel uses a cls: config option.<br /><br />It does not have a div tag.<br /><br />Feel free to swipe away...</p>'
                                },
                                {
                                    cls: 'styled',
                                    html: '<div><p>Page Two.<br /><br />This panel has a cls: config option and an empty div tag.<br /><br />The div does not have a class.</p></div>'
                                },
                                {
                                    html: '<div class="styled"><p>Page Three.<br /><br />This panel does not have a cls: config option.<br /><br />It does have a styled div.</p></div>'
                                },
                            ]
                        });
                        carousel.setActiveItem(0);
                    }
    
                });
    
            </script>
        </head>
        <body>
            <!-- Nothing in BODY -->
        </body>
    </html>
    Anyone have any concrete suggestions regarding how to:

    1. Center the items in the Carousel panel?
    2. Actually center the text?

    Many thanks...

    Plane Wryter

  2. #2
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862

    Default

    The thing causing your problem is the margin in the CSS. If you try it in safari using the web inspector, you can see how it's screwing up the right margin. I think this is due to the Sencha Touch engine not being able to take this margin into account when it applies the layout. Fiddle with that and you'll see what I mean.

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    32

    Default

    Thanks; jep.

    When the margin: is removed from the CSS, the panel items/divs do center...however, they run the full width of the available viewport. (And, only the div occupies the appropriate vertical space...the other two trials occupy the entire vertical viewport.) Is there another way to create a margin effect without confusing ST?

    Many, many thanks for the help.

    Best regards,

    Plane Wryter

  4. #4
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862

    Default

    I played with it and had good luck with using padding. For example:

    Code:
    var carousel = new Ext.Carousel({
      padding:20,
    That gave me 20 pixels of padding around the outside of the rounded border. On the other hand, padding used on the actual card items themselves gave padding on the inside of the border:

    Code:
      items: [
          {
            padding:50,
              cls: 'styled',
    I think that's what you want. Good luck!

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    32

    Default

    Yea, jep!

    You rock...and you roll!

    Your clever suggestion worked...and, once you suggested it...makes perfect sense. Since the panels are contained within the Carousel; setting the Carousel's padding property (as distinct from a panel's margin) property is a great solution.

    Thank you very much for your thoughtful and authoritative suggestion.

    Much appreciated.

    Best,

    Plane Wryter

Similar Threads

  1. 'Pulse' like interface - carousel in carousel
    By TrentMav in forum Sencha Touch 1.x: Examples and Showcases
    Replies: 5
    Last Post: 10 Feb 2012, 1:59 AM
  2. my Problems on carousel
    By treeben in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 8 Nov 2010, 10:59 PM
  3. [OPEN] [FIXED-110] Carousel indicator breaks down after changing carousel content.
    By Mphasize in forum Sencha Touch 1.x: Bugs
    Replies: 6
    Last Post: 1 Jul 2010, 11:41 AM
  4. Centering a form
    By chriskumar in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 23 Jun 2009, 7:56 AM
  5. Centering element
    By steelaz in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 2 Feb 2009, 9:04 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •