Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    sectionheader css issue

    Hi isomorphic,
    now I'm about to migrate From SmartGWT 3.0 to 4.0.
    we work with SmartGWT Power. since my superior didnt buy it yet I donwloaded SmartGWT Enterprise Edition 03.04.2013 which is available in Evaluation, I fixed some bugs related to javascript Identifier and getSortBy that throw an exception of ClassCastException.
    Now that I have finished my superior bought SmartGWT Power 4.0-d20130414 and once I dépoloyed it on my repository,a CSS issue have shown!!
    The text in my menu I implemented by SectionHeader became black folowing the color of the Body even I had overriden the CSS property of .sectionheaderopened class / closed in skin_styles.css... the more strange is the property background -color works very well, and the color property is right next has no effect, even when I change the CSS property background: color on the Chrome's Console it changes in the page proving that works, unlike when I change the color property nothing happens.

    MyApp.css
    Code:
    body, table td, select, label {
    font-family: Helvetica-Weforum, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color:#545557;
    }
    skin_style.css
    Code:
    . sectionHeaderopened,. sectionHeaderclosed,. sectionHeaderDisabledopened,. sectionHeaderDisabledclosed {
    font-family: Verdana, Bitstream Vera Sans, sans-serif; font-size: 13px;
    padding-left: 3px;
    border-bottom: 1px solid white;
    color:#ffffff important!
    background-color:#005cb8;
    }
    my text is taking the color #545557 instead of #ffffff

    PS : that work fine with SmartGWT EE 4.0d-03042013
    that doesnt work with SmartGWT Power 4.0d-14042013
    the issue is persesting with all browser (Chrome , IE8, FF , Safari)

    #2
    Hi again,
    I corrected the issue related to the color of my menu, the probleme is that my block * {... ;color:#545557;....} shouldn't the priority on my class sectionheaderxxxx, I dont know but the * block is more powerfull than my under classes, when I removed the block *, my menu work fine with the right color and the right padding and font-family, however other element like MenuItem, Label...) which are not using any style then the use the * block dont have the right style...., I'll be more clear in an example
    Code:
    *{color:red;font-size:13px;}
    .myMenu{color:green;font-size:15px;}
    
    <div class="myMenu">here my menu is 13px and red which is WRONG</div>
    <div>here my menuItem is 13px and red <div>
    if I delete the *{...} block I have
    Code:
    .myMenu{color:green;font-size:15px;}
    
    <div class="myMenu">here my menu is 15px and green which is RIGHT</div>
    <div>here my menuItem is 12px and black(default) which WRONG <div>
    that is juste an example, I cant poste a standalone code because my App is very big and confidental



    PS :
    I noticed a difference between the HTML generated by SGWTEE and SGWTPower, in my menu I have this schema :

    Smartgwt EE :
    Code:
    <div>
       <table>
          <tbody>
             <tr>
                <td>
                   <table>
                      <tbody>
                         <tr>
                            <td class="sectionHeaderclosed">
                               <img src="http://localhost:8080/MyApp/esmsSkins/Simplicity/images/SectionHeader/opener_closed.gif">
                            </td>
                            <td class="sectionHeaderclosed">
                               My Menu Title
                            </td>
                         </tr>
                      </tbody>
                   </table>
                </td>
             </tr>
          </tbody>
       </table>
    </div>
    SmartGwtPower :
    Code:
    <div>
       <table>
          <tbody>
             <tr>
                <td class="sectionHeaderclosed">
                   <div>
                      <div>
                         <img src="http://localhost:8080/weforum-base-web/esmsSkins/Simplicity/images/SectionHeader/opener_opened.gif"  />
    			My Menu Title
                      </div>
                   </div>
                </td>
             </tr>
          </tbody>
       </table>
    </div>
    as you can see the class sectionheaderxxxx is mentionned for every TD and with Power generated code it's not working, sorry If I'm not clear because English is not my 1st language.
    Thank you

    Comment

    Working...
    X