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

      0  

    Default html config property not showing the bullet points and their indentation

    html config property not showing the bullet points and their indentation


    Greetings,

    For the first time I am using for a Ext.forrm.Label the html config property. The bullet point tags in the html that I am entering into the html config property are not showing the indentation and bullet points in the browser when I preview the Sencha app.

    At the URL http://www.quackit.com/html_5/tags/html_pre_tag.cfm, the same html that I am entering into the html config property is working and there is indentation for the bullet points and the symbols for the bullet points show.

    Here is all of my present code:

    Code:
    Ext.define('MyApp.view.MyViewport', {
        extend: 'Ext.container.Viewport',
     
        autoScroll: true,
     
        initComponent: function() {
            var me = this;
     
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'form',
                        id: 'theComboForm',
                        itemId: 'theComboForm',
                        autoScroll: false,
                        bodyPadding: 10,
                        title: '',
                        listeners: {
                            afterrender: {
                                fn: me.onFormAfterRender,
                                scope: me
                            }
                        },
                        items: [
                            {
                                xtype: 'container',
                                id: 'containerFirstLabel',
                                layout: {
                                    align: 'stretch',
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        cls: 'myLabelAtTopOfPage ',
                                        style: 'font: normal 14px arial color="#000066"',
                                        text: 'Enter the data for a combo box.'
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                id: 'containerFootnoteAboutComboTemp',
                                margin: '20 0 0 0 ',
                                layout: {
                                    align: 'stretch',
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        flex: 1,
                                        cls: 'For_Footnote_Labels',
                                        id: 'instructionComboTemp',
                                        text: 'Notify QA to determine disposition if any combo is not below 40 degrees.'
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                id: 'containerFootnoteAboutSlaughterAndBoneDate',
                                margin: '10 0 0 0',
                                layout: {
                                    align: 'stretch',
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        cls: 'For_Footnote_Labels',
                                        id: 'instructionSlaughterAndBoneDate',
                                        text: 'Poultry is Slaughter Date and Red Meat is Bone Date.'
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                id: 'containerFootnoteAboutFatPercent',
                                margin: '10 0 0 0',
                                layout: {
                                    align: 'stretch',
                                    type: 'vbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        flex: 1,
                                        cls: 'For_Footnote_Labels',
                                        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',
                                        text: ''
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                id: 'containerDataInputControls',
                                margin: '20 0 0 0',
                                layout: {
                                    align: 'stretch',
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'numberfield',
                                        id: 'paramBilledWeight',
                                        width: 160,
                                        name: 'paramBilledWeight',
                                        fieldLabel: 'Billed Weight',
                                        labelClsExtra: 'Labels_for_controls',
                                        labelWidth: 80,
                                        allowBlank: false,
                                        enforceMaxLength: true,
                                        maxLength: 10,
                                        minLength: 1,
                                        hideTrigger: true,
                                        allowDecimals: false,
                                        autoStripChars: true,
                                        maxValue: 2147483647,
                                        minValue: 1
                                    },
                                    {
                                        xtype: 'numberfield',
                                        margin: '0 0 0 20',
                                        width: 160,
                                        name: 'paramGrossWeight',
                                        fieldLabel: 'Gross Weight',
                                        labelClsExtra: 'Labels_for_controls',
                                        labelWidth: 80,
                                        allowBlank: false,
                                        enforceMaxLength: true,
                                        maxLength: 10,
                                        minLength: 1,
                                        hideTrigger: true,
                                        allowDecimals: false,
                                        autoStripChars: true,
                                        maxValue: 2147483647,
                                        minValue: 1
                                    },
                                    {
                                        xtype: 'numberfield',
                                        flex: 1,
                                        id: 'paramTare',
                                        margin: '0 0 0 20',
                                        maxWidth: 110,
                                        name: 'paramTare',
                                        fieldLabel: 'Tare',
                                        labelClsExtra: 'Labels_for_controls',
                                        labelWidth: 30,
                                        allowBlank: false,
                                        enforceMaxLength: true,
                                        maxLength: 10,
                                        minLength: 1,
                                        hideTrigger: true,
                                        allowDecimals: false,
                                        autoStripChars: true,
                                        maxValue: 2147483647,
                                        minValue: 1
                                    },
                                    {
                                        xtype: 'combobox',
                                        flex: 1,
                                        margin: '0 0 0 20',
                                        maxWidth: 240,
                                        fieldLabel: 'Material (check each combo)',
                                        labelClsExtra: 'Labels_for_controls',
                                        labelWidth: 165,
                                        allowBlank: false,
                                        matchFieldWidth: false,
                                        autoSelect: false,
                                        displayField: 'materialAbbreviation',
                                        forceSelection: true,
                                        queryMode: 'local',
                                        store: 'comboMaterialStore',
                                        typeAhead: true,
                                        valueField: 'materialPK'
                                    },
                                    {
                                        xtype: 'numberfield',
                                        margin: '0 0 0 30',
                                        width: 100,
                                        name: 'paramFatPercent',
                                        fieldLabel: 'Fat %',
                                        labelClsExtra: 'Labels_for_controls',
                                        labelWidth: 40,
                                        allowBlank: false,
                                        selectOnFocus: true,
                                        hideTrigger: true,
                                        autoStripChars: true,
                                        maxValue: 100,
                                        minValue: 0
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
     
            me.callParent(arguments);
        },
     
        onFormAfterRender: function(abstractcomponent, options) {
            Ext.getCmp('paramBilledWeight').focus('', 10);
            //Ext.getCmp('paramSlaughterOrBoneDate').setMaxValue(Ext.util.Format.date(new Date(), 'm/d/Y'));
        }
     
    });
    So when I enter the following html code into the html config property of the label named instructionFatPercent, the indentation and bullet points do not show in the browser when I preview the Sencha app:

    Code:
    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 %”)
    Yet if I enter that same html code in the Source Code textbox at the URL http://www.quackit.com/html_5/tags/html_pre_tag.cfm, the indentation and bullet points do show in this web page’s Result textbox.

    Does anybody have any suggestions? Am I doing something wrong? The break tags in the html code that I am entering seem to work in the browser when I preview the Sencha app. The <ul><li></li></ul> tags though do not seem to work in the browser.

    I am using Sencha Architect 2.

    Thanks in advance for your consideration of my question. I am trying to get the bullet point symbols and the indentation of the bullet points to show in this label in the browser when I preview the Sencha app.

    Hviezdoslav Wed., 30-JAN-2013
    Last edited by Hviezdoslav; 30 Jan 2013 at 8:16 AM. Reason: Additional Info

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

      0  

    Default


    I want to add this additional information just in case it is relevant.

    In the label with the id instructionFatPercent, the label that I am trying to enter the html code in the html config property to have indented bullet points shown in the browser, I also have in the cls config property the value For_Footnote_Labels and the following is the code for the CSS_for_Labels.css file that is in the Sencha project:

    Code:
    .myLabelAtTopOfPage
    {
     color: #2272a7 !important;
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 14px !important;
     font-weight: bold !important;
    }
    .Labels_for_controls
    {
     color: #2272a7 !important;
     font-size: 12px !important;
    }
    .For_Footnote_Labels
    {
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 11px !important;
    }
    I mention this just in case it is of any importance to my problem.

    Thanks again for considering this thread of mine.

    Hviezdoslav Wednesday 30-JAN-2013

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

      0  

    Default


    I tried using the tags for html in the code that I am putting into the html config property of the label with the id instructionFatPercent like the following, but when previewing the Sencha app in the browser the bullet point symbols are not showing still and there is no indentation showing for the bullet points:

    Code:
    <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 %”)</html>
    I thought that maybe I needed to provide the opening and closing html tags, but I guess that this does not solve my problem.

    Hviezdoslav Wed., Jan. 30, 2013

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

      0  

    Default


    I was using the following code for the label and the html config property:

    Code:
        {
                                        xtype: 'label',
                                        flex: 1,
                                        cls: 'For_Footnote_Labels',
                                        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',
                                        text: ''
                                    }
                                ]
    I see the documentation for the html config property about how if text is specified it will take precedence and the value in the html config property will be ignored. So since I noticed that I had the empty string in the text config property, I changed the code to the following just in case it will work:

    Code:
     items: [
                                    {
                                        xtype: 'label',
                                        cls: 'For_Footnote_Labels',
                                        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'
                                    }
                                ]
    Still though in the browser the bullet point symbols are not shown and the bullet points have no indentation.

    I know that I am not using Sencha Touch, but at the URL http://docs.sencha.com/touch/2-0/#!/api/Ext.Label I found the following code example:

    Code:
    Ext.Viewport.add({
        xtype: 'label',
        html: 'My label!'
    });
    I see in the example for Sencha Touch that just plain text was entered into the html config property.

    In Sencha Architect 2, the text config property is for plain text. Shouldn't I be able to enter html tags into the html config property? It seems that my html break tags are working when previewing in the browser, so is Sencha for some reason having problems with my <ul><li> opening and closing tags?

    Thanks much,

    Hviezdoslav
    Wed., 30-JAN-2013

  5. #5
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,198
    Vote Rating
    120
    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


    The problem is that Sencha Touch relies on a technique called "resetting the css". We reset all of the default browser padding/margin/etc to zero so that it is consistent among browsers. You will have to add in your own CSS classes and styles to put in the bullet points and indentation (using standard css).

    This technique terminology was originally coined by Eric Meyers in 2007.
    http://meyerweb.com/eric/tools/css/reset/
    http://meyerweb.com/eric/thoughts/20...set-reasoning/
    Aaron Conran
    @aconran
    Sencha Architect Development Team

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

      0  

    Default


    Thanks much, aconran. I'll look at those links and try to figure out how to do it.

    Hviezdoslav 30-JAN-2013 Wednesday

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

      0  

    Default


    aconran, could you please advise? I read the two links but am unsure how to proceed within the Sencha app.

    I have now in the Resources of this Sencha app a css file with the following code:

    Code:
    .myLabelAtTopOfPage
    {
     color: #2272a7 !important;
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 14px !important;
     font-weight: bold !important;
    }
    .Labels_for_controls
    {
     color: #2272a7 !important;
     font-size: 12px !important;
    }
    .For_Footnote_Labels
    {
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 11px !important;
    }
    
    .ToResetCSS
    {
       /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
       */
       html, body, div, span, applet, object, iframe,
       h1, h2, h3, h4, h5, h6, p, blockquote, pre,
       a, abbr, acronym, address, big, cite, code,
       del, dfn, em, img, ins, kbd, q, s, samp,
       small, strike, strong, sub, sup, tt, var,
       b, u, i, center,
       dl, dt, dd, ol, ul, li,
       fieldset, form, label, legend,
       table, caption, tbody, tfoot, thead, tr, th, td,
       article, aside, canvas, details, embed, 
       figure, figcaption, footer, header, hgroup, 
       menu, nav, output, ruby, section, summary,
       time, mark, audio, video {
     margin: 0 !important;
     padding: 0 !important;
     border: 0 !important;
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 11px !important;
     font: inherit !important;
     vertical-align: baseline !important;
       }
       /* HTML5 display-role reset for older browsers */
       article, aside, details, figcaption, figure, 
       footer, header, hgroup, menu, nav, section {
     display: block !important;
       }
       body {
     line-height: 1 !important;
       }
       ol, ul {
     list-style: disc !important;
       }
       blockquote, q {
     quotes: none !important;
       }
       blockquote:before, blockquote:after,
       q:before, q:after {
     content: '' !important;
     content: none !important;
       }
       table {
     border-collapse: collapse !important;
     border-spacing: 0 !important;
       }
    }
    I have tried entering ToResetCSS in the cls config of the container that has the label in which I want the bullet points, but after I publish within Sencha and view in the browser I do not see the indented bullet points still.

    I have tried entering ToResetCSS in the cls config of the label in which I want the bullet points, but still after publishing I do not see the bullet points in the browser.

    Do you or does anybody have any idea how I use the reset css code that I now have in my css file?

    Thanks much,

    Hviezdoslav Wed., 30-JAN-2013

  8. #8
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,198
    Vote Rating
    120
    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


    Hrmm, no sorry I wasn't clear. Within sencha touch's css you will already receive all of the reset.css that you need.

    You need to re-incorporate whatever styling you may want.

    list-style-type
    http://www.tizag.com/cssT/list.php

    Then add in some padding or margin.


    This is probably the best article that I could find quickly that can explain a little bit of what you'll need to do. You will add a css class to your ul like myList.

    Then a rule like:
    Code:
    .myList {
        list-style-type: disc;
        padding-left: 5px;
    }
    Obviously customize this to your needs.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

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

      0  

    Default


    Hi aconran,

    Thanks for trying to help me.

    I have now in this Sencha Architect 2 project a css file in the Resources. The css file has the following code:

    Code:
    .myLabelAtTopOfPage
    {
     color: #2272a7 !important;
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 14px !important;
     font-weight: bold !important;
    }
    .Labels_for_controls
    {
     color: #2272a7 !important;
     font-size: 12px !important;
    }
    .For_Footnote_Labels
    {
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 11px !important;
     
    }
    
    .myList
    {
     list-style-type: disc;
     padding-left: 10 px;
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 11px !important;
    }
    Now I have the following code for the label:

    Code:
    {
                                xtype: 'container',
                                cls: '',
                                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'
                                    }
                                ]
                            }
    When I then publish within Sencha and then preview to see how the page looks in the browser, it appears that the font size and family are showing correctly and that the break tags are working correctly but in the browser I still do not see the bullet point symbols and the indentation/padding left.

    Maybe I am doing something wrong still. I'll keep working on it.

    Thanks for your help!

    Hviezdoslav Wed., 30-JAN-2013

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

      0  

    Default


    Drat, I made a change to the css file and added the !important at the end of the lines about list-style-type and padding-left but still I am not seeing what I desire. Now my code for the Sencha app's css file in Resources is the following:

    Code:
    .myList
    {
     list-style-type: disc !important;
     padding-left: 10 px !important;
     font-family: arial,verdana,sans-serif, tahoma !important; 
     font-size: 11px !important;
    }
    My code for the label and its html config property and its cls config property is the following:

    [CODE][ },
    {
    xtype: 'container',
    cls: '',
    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'
    }
    ]
    },/CODE]

    I still see in the browser the corret font family and font size but I do not see the bullet points or the padding-left indentation.

    I added myList to the cls config property of the container that holds the label so that the myList is in cls config for BOTH the container and for its label. Still though the browser does not show the bullet points and padding-left indentation.


    Hviezdoslav 30-JAN-2013

Thread Participants: 1

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