1. #11
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,261
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      1  

    Default


    Put the class on the ul itself or change the rule to be like .myList ul.

    Look through web inspector and see why the rule is being applied/not applied. Add in the additional css you want at specific elements via the style attribute and see how you want to make things look.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  2. #12
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    Okay, I think that I have figured out how to solve the problem.

    I thank aconran for getting me on the right track.

    My css file in the Resources of this Sencha Architect 2 project has the following code:

    Code:
    .myList
    {
     
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 11px !important;
    }
     
    ul
    {
     list-style-type: disc !important;
     padding: 0px !important;
     margin: 0px !important;
    }
    ul li
    {
     padding-left: 30px !important; 
    }
    The code for the container and its label now have the following code:

    Code:
    xtype: 'container',
                                id: 'containerFootnoteAboutFatPercent',
                                margin: '10 0 0 0',
                                layout: {
                                    align: 'stretch',
                                    type: 'vbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        cls: 'myList',
                                        html: 'Maximum Fat %:<ul><br /><li>Beef 90s = 11%</li> <li>Beef 85s = 17%</li> <li>Beef 50s = 52%</li> <li>MST = 22%</li> <li>Pork 80s or Picnic = 30%</li> <li>Pork 50s = 60%</li> </ul><br />(Notify Supervisor, Process Control Manager, or QA if Fat % is above “Maximum Fat %”)',
                                        id: 'instructionFatPercent'
                                    }
                                ]

    Now when I publish within the Sencha project and then preview in the browser, there are shown the bullet points and the indentation. So I guess that my addition to the css file of the following code is what is working to show the bullet points and indentation/padding-left:

    Code:
    ul
    {
     list-style-type: disc !important;
     padding: 0px !important;
     margin: 0px !important;
    }
    ul li
    {
     padding-left: 30px !important; 
    }
    Thanks again to aconran for helping me with this and for getting me on the right track and in the right direction!

    Hviezdoslav Wed., 30-JAN-2013

  3. #13
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    Hi aconran,

    When I started my last reply you I did not see your reply. I guess that you posted your most recent reply when I was in the middle of typing my most recent reply.

    Yeah, that is what I think that I did. I put a class on the ul. I also though put a class on the ul li. My class on the ul li has the padding-left of 30 px whereas the class on the ul has padding of 0 px.

    Like I wrote in my most recent post, here is the code for the css file now:
    Code:
    .myList
    {
     
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 11px !important;
    }
     
    ul
    {
     list-style-type: disc !important;
     padding: 0px !important;
     margin: 0px !important;
    }
    ul li
    {
     padding-left: 30px !important; 
    }
    So the myList in the cls config of the label is just doing the font-family and font-size. If I understand correctly, the css file's ul class AND the css file's ul li class are the two classes that are causing the bullet points (the ul class) and that are causing the indentation (ul li class).

    Thanks again, aconran! You lead me in the right direction and I figured out finally how to show the indented bullet points in the label. I am thinking (though I very well could be wrong) that I needed the ul li class ALONG WITH the ul class. When I was not using any ul class or ul li class and when I was doing the list-style-type: disc and padding-left 20 px in the myList and using myList in the cls config of the label, it was not working. So I started to think about removing from myList the stuff about the padding-left and list-style-type and adding a new class for both ul and ul li.

    Anyway, it is working now.

    Hviezdoslav Wed., 30-JAN-2013

    The code for the label is currently the following:

    Code:
     {
                                xtype: 'container',
                                id: 'containerFootnoteAboutFatPercent',
                                margin: '10 0 0 0',
                                layout: {
                                    align: 'stretch',
                                    type: 'vbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        cls: 'myList',
                                        html: 'Maximum Fat %:<ul><br /><li>Beef 90s = 11%</li> <li>Beef 85s = 17%</li> <li>Beef 50s = 52%</li> <li>MST = 22%</li> <li>Pork 80s or Picnic = 30%</li> <li>Pork 50s = 60%</li> </ul><br />(Notify Supervisor, Process Control Manager, or QA if Fat % is above “Maximum Fat %”)',
                                        id: 'instructionFatPercent'
                                    }
                                ]
                            }
    Again, the code for the css file is currently the following:

    [CODE][.myList
    {

    font-family: arial,verdana,sans-serif, tahoma !important;
    font-size: 11px !important;
    }

    ul
    {
    list-style-type: disc !important;
    padding: 0px !important;
    margin: 0px !important;
    }
    ul li
    {
    padding-left: 30px !important;
    }

    /CODE]

  4. #14
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,261
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Great that it is working. You are going to have to make those ul and ul li rules a little more specific though or it will affect any place in Sencha Touch where we may use those elements for other things.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #15
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    Hi aconran,

    I am not using Sencha Touch but rather I'm using Sencha Architect 2.

    If I am using Sencha Architect 2, do I still need to make those ul and ul li rules more specific? If so, more specific in what way?

    In my ul li class, I do not want anything about the following as I would not be using any background image:

    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5 px;

    So I did not put any of this background stuff in my ul li class. I do not want to use any gif or jpeg file.

    I used the URL http://www.w3schools.com/css/css_list.asp as an example when I was coding in my css file for both the ul class and the ul li class. It says that for ul, I must set the list-style-type to none to remove the list item maker AND that I must set both the padding and margin to 0 px for cross-browser compatibility. So I did not add anything more to my ul class other than the list-style-type disc and padding 0px and margin. 0 px.

    For the ul li class, I just used the padding-left for 30 px.

    Do you know of anything specifically that I should add to my ul class and to my ul li class?

    Do you think that the ul class needs margin-left and margin-bottom and such, or is my margin 0px enough? Do I need to add padding-left or is my padding 0px in the ul class enough? Maybe I should add a list-style-position to the ul class, but I would need to decide whether to use the inside or outside list-style-position.

    aconran, for Sencha Architect 2 is it necessary to add anything more to both my ul class and ul li class, and if so do you have anything in mind that I should add?

    Thanks much,

    Hviezdoslav Wed., 30-JAN-2013

  6. #16
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    Actually, I was wrong when I posted yesterday about the bullet points showing. Yesterday I was just so happy that at least there was indentation.

    Yesterday I was using the following code for the ul and ul li class:
    Code:
    ul
     {
     list-style-type: disc !important;
     padding: 0px !important;
     margin: 0px !important;
     }
     ul li
     {
     padding-left: 30px !important;
     }
    Since the above code yesterday DOES show the indentation/padding-left but DOES NOT show the bullet points, I tried today the following code because I thought that if the padding-left is working in the ul li class then maybe the list-style-type disc will work in the ul li class:
    Code:
    ul
    {
     padding: 0px !important;
     margin: 0px !important;
    }
    ul li
    {
     list-style-type: disc !important;
     
     padding-left: 30px !important; 
    
     
    }
    But the code immediately above still does not show the bullet points.

    At least though the padding-left is working in the ul li class. It is strange though that the list-style-type disc is not working when it is in either the ul class or ul li class. I put the list-style-type disc in BOTH the ul and ul li class and still I do not get the bullet points.

    I am getting though the padding-left indentation from the ul li class.

    Thanks aconran for all of your help.

    Hviezdoslav Thurs., 31-JAN-2013

  7. #17
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    I changed the way I'm doing it so that I am affecting only my label.

    Now my css code is the following:

    Code:
    .myList ul
    {
      font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 11px !important;
     list-style-type: disc !important;
     padding: 0px !important;
     margin: 0px !important;
    }
     
    .myList ul li
    {
     padding-left: 30px !important; 
    }
    Now my code for the label is the following:

    Code:
     {
                                xtype: 'container',
                                id: 'containerFootnoteAboutFatPercent',
                                margin: '10 0 0 0',
                                layout: {
                                    align: 'stretch',
                                    type: 'vbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        cls: 'myList',
                                        html: '<ul>Maximum Fat %:<br /><li>Beef 90s = 11%</li> <li>Beef 85s = 17%</li> <li>Beef 50s = 52%</li> <li>MST = 22%</li> <li>Pork 80s or Picnic = 30%</li> <li>Pork 50s = 60%</li> (Notify Supervisor, Process Control Manager, or QA if Fat % is above “Maximum Fat %”)</ul>',
                                        id: 'instructionFatPercent'
                                    }
                                ]
                            },
    Still I do not see the bullet point symbols but the font size, font family, and the padding left are working in the browser.

    Hviezdoslav 31-JAN-2013
    Last edited by Hviezdoslav; 31 Jan 2013 at 7:18 AM. Reason: I messed up one of the CODE tags.

Thread Participants: 1