Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    SmartGWT.mobile - .CSS

    I would like to override some of the styles by loading a .css file and using .setStyleName. However, styles internal to smartGWT.mobile seem to take precedence on styles set by .setStyleName.

    I tested this on a TextItem for which styles with names like .sc-form input[type="text"] that are set by the framework are overriding style manually set with .setStyleName("customStyleName") and customStyleName being defined in .css file loaded with the .html.

    Is there a way to override .sc... styles with a custom style ? I tested also with StyleInjector.injectAtEnd but again the custom style is treated before the .sc one and gets overridden. The only way that seems to work, is to define the .sc style (with the same name) but that is not what I want, I just want to override some specific attribute, not redefining the full style.
    Tags: None
    #2
    In CSS, if you define a style with the same name as an existing style, the definitions are cumulative. You don't need to recapitulate the original style definition.

    Comment

      #3
      Just tested this, even using the same name, styles defined in a .CSS file get overridden (they appear below in the stack of style definitions).

      The only way I found to work is to place a StyleInjector.injectAtEnd at the right moment and using the same name.

      But suppose now you want to override only for some specific instances of a, say, TextIem, not for all. Then using a custom style set with .setStyleName and defined in .css would make sense. But this is not possible because again, .sc-form like styles come on top in the styles definition stack.

      Comment

        #4
        Have you placed your .css after the nocache.html get loaded?

        Comment

          #5
          Yes, this is my page:

          Code:
          <!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1">

	<link rel="apple-touch-icon" sizes="57x57" 	 href="apple-touch-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="72x72" 	 href="apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">

    
    <title>Moon</title>
    <script type="text/javascript" language="javascript" src="moon_mobile/moon_mobile.nocache.js"></script>
    <link rel="stylesheet" href="MOON_MOBILE.css" type="text/css"/>
    
  </head>

  <body>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

  </body>
</html>

          Comment

            #6
            Any feedback on this please ?

            Comment

              #7
              We're still looking at this - there are some core GWT limitations in terms of delivering minimal CSS that we're trying to work around. In the meantime, injecting your CSS after the form has been created but before it's been added to a parent should be fine.

              Comment

              Previous template Next
              Working...
              X