1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    matthewsowders is on a distinguished road

      0  

    Default Two lines of text centered in a large button

    Two lines of text centered in a large button


    I am trying to create a large button that will have two lines of centered text. I have attached an image of how it is rendered in ie8 (it works in chrome, but not ie). The element has text-align:center at runtime so I cannot understand why the text is showing up left aligned.

    Here is the config I am using:
    Code:
    {
      iconCls:'layerManagerIcon',
      iconAlign: 'top',
      rowspan: 3, 
      scale: 'large',
      text:'Layer<br/>Manager'
    }
    Attached Images

  2. #2
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Location
    Antwerp, Belgium
    Posts
    164
    Vote Rating
    2
    walldorff is on a distinguished road

      0  

    Default


    You probably could add text-align: center; to your css class layerManagerIcon.
    And <br/> is <br />
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    matthewsowders is on a distinguished road

      0  

    Default


    Thanks for your help, but the suggestion did not work. Looking at the runtime attributes of the button tag, ext-all.css already set the text-align to center, but I also applied it directly to .layerManagerIcon, and tried using '!important', but all with no luck.

    Edit: This is really weird. If I copy the html generated for the button, starting from the table and paste it into a static html file with the links to the css files, the button looks correct. Any pointers on where I might look for the cause of this would be appreciated.

  4. #4
    Ext User
    Join Date
    Feb 2008
    Posts
    8
    Vote Rating
    0
    jrpqwerty is on a distinguished road

      0  

    Default use table in ie8

    use table in ie8


    came across the same problem only in ie8,
    ff, chrome ok

    very bad fix, but fudging with css for 10 minutes would not center the text in the button

    so for others if they hit this thread

    PHP Code:
    text:'<table><tr><td align=center>Reports for<br />DRS</td></tr></table>'
    but i think i've missed something

    meh

  5. #5
    Sencha User lukefowell89's Avatar
    Join Date
    Nov 2010
    Location
    Dorset, UK
    Posts
    262
    Vote Rating
    1
    lukefowell89 is on a distinguished road

      0  

    Default


    Maybe use '\n' for a newline? Havent tested it
    My Web Design, Development & Internet Marketing Blog: http://www.aztec-online.com
    Read My Review of the latest Ext JS Framework:Ext JS 4 Review

Similar Threads

  1. Two lines text in a button
    By liquidsnake in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 14 Feb 2010, 7:40 AM
  2. [FIXED] Button not centered in a form panel
    By zaccret in forum Ext GWT: Bugs (1.x)
    Replies: 2
    Last Post: 23 May 2008, 4:19 AM
  3. Centered text in TextArea
    By jjoss in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 7 Jan 2008, 7:19 PM
  4. large respose text
    By hsy541 in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 14 Aug 2007, 12:18 PM

Thread Participants: 3

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi