1. #1
    Ext User
    Join Date
    Nov 2010
    Posts
    43
    Vote Rating
    0
    wellsbr01 is on a distinguished road

      0  

    Default Unable to override .x-html ul

    Unable to override .x-html ul


    Hi,

    I have a template in a panel as below, and I'm trying to override the ul default styling, but I can't get rid off it. I just want a plain old ul list-style-type: none.

    Any clues? Have done this a lot in another safari app without pains.

    retObj = new Ext.Panel({
    bodyPadding:'0',
    margin:'0',
    tpl: ['<ul style="list-style-type: none">',
    '<tpl for=".">',
    '<li class="listButton">',
    '<a id="{id}" href="javascript:main.conectar(this.id)"><span class="listLabel">{lbl}</span></a>',
    '</li>',
    '</tpl>',
    '</ul>'],
    scroll: true,
    styleHtmlContent: true,
    listeners: {
    beforerender: function (pan) {
    console.log(lista);
    pan.update(lista);
    }
    }
    });
    Wellington Lacerda
    Spiritus Mundi Ltd

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi,
    Have you already tried to set

    PHP Code:
    styleHtmlContentfalse
    in your panel config?

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    The problem is that the LI elements get a list-style-type:circle applied to them by default. When you only override it for the UL, it doesn't override it for the individual LIs.

    The way I figured this out was simply to right-click on an LI in the rendered page in Safari and click Inspect Element. There you can see all the styles being applied to it. It will show you the source (from class or style) of each setting as well. It makes it very easy to tell what is finally being applied and where it's coming from.

  4. #4
    Ext User
    Join Date
    Nov 2010
    Posts
    43
    Vote Rating
    0
    wellsbr01 is on a distinguished road

      0  

    Default


    Ciao Andrea,

    But if I set styleHtmlContent: false won't it ignore my css??

    Cheers,
    Wellington Lacerda
    Spiritus Mundi Ltd

  5. #5
    Ext User
    Join Date
    Nov 2010
    Posts
    43
    Vote Rating
    0
    wellsbr01 is on a distinguished road

      0  

    Default


    Hey jep,

    I'll give it a try. In fact, I was using it at the ul level only.

    Cheers,
    Wellington Lacerda
    Spiritus Mundi Ltd

  6. #6
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by wellsbr01 View Post
    Ciao Andrea,

    But if I set styleHtmlContent: false won't it ignore my css??

    Cheers,
    Ciao
    The panel config styleHtmlContent doesn't makes your panel ignore or consider your own css, but, if set to true, the panel will apply the class 'x-html' as default base class of every dom nodes in your panel html.
    See this config as "I want / I don't want apply default Sencha HTML style".
    So set this config to false and see what happen .

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  7. #7
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    So set this config to false and see what happen .
    FYI, I tried that and it didn't help. The LIs still get circles from this bit of sencha-touch-debug.css:

    Code:
    .x-html ul li {
        list-style-type: circle
    }

  8. #8
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by jep View Post
    FYI, I tried that and it didn't help. The LIs still get circles from this bit of sencha-touch-debug.css:

    Code:
    .x-html ul li {
        list-style-type: circle
    }
    It works for me!
    Try this simple code in a new page

    PHP Code:
    Ext.setup({
        
    onReady: function() {
           new 
    Ext.Panel({
              
    bodyPadding:'0',
              
    margin:'0',
              
    fullscreentrue,
              
    html'<ul style="list-style-type: none">' +
                        
    '<li>Element 1</li>' +
                        
    '<li>Element 2</li>' +
                     
    '</ul>',
              
    scrolltrue,
              
    styleHtmlContenttrue
           
    }); 
        }
    }); 
    Try to switch styleHtmlContent from true to false and you will see the list cicles disappears.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  9. #9
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Oh, duh. I didn't see that the original example already had a styleHtmlContent set, so mine was getting ignored.

    Still, I think the better fix will probably be just to override the LI style, as otherwise you lose a lot of the other Sencha Touch styles and have to re-apply them.

  10. #10
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by jep View Post
    Oh, duh. I didn't see that the original example already had a styleHtmlContent set, so mine was getting ignored.

    Still, I think the better fix will probably be just to override the LI style, as otherwise you lose a lot of the other Sencha Touch styles and have to re-apply them.
    Glad it helps .

    Hovever I don't agree with you.
    If you want to set a custom style using the

    PHP Code:
    styleHtmlContenttrue 
    you can set another config param

    PHP Code:
    styleHtmlCls'myCustomClass' 
    In this way myCustomClass will be used to style the panel html replacing the default x-html class.
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


Similar Threads

  1. [2.1.3] Unable to use html entities in validaton error text of Fields
    By CrizztlCoder in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 5 Aug 2010, 2:38 AM
  2. Unable to override method
    By R.J in forum Ext.nd for Notes/Domino
    Replies: 5
    Last Post: 2 Feb 2010, 6:44 PM
  3. [2.0.1] Unable to override Ext.Ajax.defaultHeaders
    By patspam in forum Ext 2.x: Bugs
    Replies: 3
    Last Post: 7 Feb 2008, 4:05 PM

Thread Participants: 2

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