Announcement

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

    Bad icon align in DateItem

    Hello,

    I have a DateItem into a DynamicForm and I want another image to the right of the calendar image. I use dateItem.setIcons(FormItemIcon) and dateItem.addIconClickHandler(IconClickHandler) for interaction. When user click in FormItemIcon image, i set "12-31-9999" to DateItem.

    When launch from GWT/IE7/FF3 browser, the alignament is wrong. The chooser date image is bottom out of space and FormItemIcon image is ok align.

    If I remove dateItem.setIcons(FormItemIcon) line, chooser date image is align ok.

    How align chooser date image ?

    (I would upload a image but i not know how)

    Regards.
    Francisco.

    #2
    Can you try switching out of strict mode (remove the <DOCTYPE> header) and let us know if that corrects the issue? Thanks.

    Comment


      #3
      Hello,

      I have not any <DOCTYPE> tag into my .html file.

      I need remove from some class or any other file ?

      Regards.
      Francisco.

      Comment


        #4
        If you are looking some external CSS, including the GWT default CSS, try removing that. If you're not sure, please show your .html file.

        Comment


          #5
          Hello,

          I haven't any other external css and not GWT default CSS.
          This is my .xml file:

          Code:
          <module>
          	<inherits name="com.google.gwt.user.User"/>
          	<inherits name="com.google.gwt.core.Core"/>
          	<inherits name="com.google.gwt.user.History"/>
          
              <inherits name="com.smartgwt.SmartGwtNoScript"/>
          
          	<inherits name="com.smartclient.theme.silverwave.SilverWave"/>
          
             	<inherits name="com.google.gwt.i18n.I18N"/>
          	<extend-property name="locale" values="es"/>
          	<extend-property name="locale" values="ca"/>
          	<extend-property name="locale" values="de"/>
          	<extend-property name="locale" values="en"/>
          	<extend-property name="locale" values="fr"/>
          	<extend-property name="locale" values="eu"/>
          	<extend-property name="locale" values="gl"/>
          
          	<entry-point class="com.axa.sgwt.web.mantenimientos.client.Mantenimientos"/>
          
          	<servlet path="/AXAServlet" class="com.axa.sgwt.web.mantenimientos.server.MantenimientosServlet"/>
          	
          </module>
          ...and this is my .html file:

          Code:
          <html>
          	<head>
          		<title>Mantenimientos</title>
          	    <style type="text/css">
          	        body { overflow:hidden }
          	        #loading {
          	            border: 1px solid #ccc;
          	            position: absolute;
          	            left: 45%;
          	            top: 40%;
          	            padding: 2px;
          	            z-index: 20001;
          	            height: auto;
          	        }
          	
          	        #loading a {
          	            color: #225588;
          	        }
          	
          	        #loading .loadingIndicator {
          	            background: white;
          	            font: bold 13px tahoma, arial, helvetica;
          	            padding: 10px;
          	            margin: 0;
          	            height: auto;
          	            color: #444;
          	        }
          	
          	        #loadingMsg {
          	            font: normal 10px arial, tahoma, sans-serif;
          	        }
          	    </style>
          	</head>
          	<body>
          		<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
          
          		<div id="loadingWrapper">
          			<div id="loading">
          			    <div class="loadingIndicator">
          			        <img src="images/loading.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>Mantenimientos<br/>
          			        <span id="loadingMsg">Cargando estilos e imagenes...</span>
          			    </div>
          			</div>
          		</div>
              	<script>var isomorphicDir = "sc/"</script>
          		<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Cargando Core API...';</script>
          		<script src=sc/modules/ISC_Core.js?isc_version=7.0beta.js></script>
          
          		<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Cargando Componentes UI...';</script>
          		<script src=sc/modules/ISC_Foundation.js?isc_version=7.0beta.js></script>
          		<script src=sc/modules/ISC_Containers.js?isc_version=7.0beta.js></script>
          		<script src=sc/modules/ISC_Grids.js?isc_version=7.0beta.js></script>
          		<script src=sc/modules/ISC_Forms.js?isc_version=7.0beta.js></script>
          		<script src=sc/modules/ISC_RichTextEditor.js?isc_version=7.0beta.js></script>
          		<script src=sc/modules/ISC_Calendar.js?isc_version=7.0beta.js></script>
          
          		<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Cargando Datos API...';</script>
          		<script src=sc/modules/ISC_DataBinding.js?isc_version=7.0beta.js></script>
          
          		<script>
          			function readCookie(name) {
          				var nameEQ = name + "=";
          				var ca = document.cookie.split(';');
          				for(var i=0;i < ca.length;i++) {
          					var c = ca[i];
          					while (c.charAt(0)==' ') c = c.substring(1,c.length);
          					if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
          				}
          				return null;
          			}
          			
          			var currentSkin = readCookie('skin'); 
          			if (currentSkin == null) currentSkin = "SilverWave";
          		</script>
          
          		<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Cargando estilo...';</script>
          		<script type="text/javascript">
          			document.write("<"+"script src=sc/skins/" + currentSkin + "/load_skin.js?isc_version=7.0beta.js><"+"/script>");
          		</script>
          
          		<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Cargando Aplicaci&oacute;n...';</script>
          		<script language="javascript" src="com.axa.sgwt.web.mantenimientos.Mantenimientos.nocache.js"></script>
          	</body>
          </html>
          Any idea ?

          Regards.
          Francisco.

          Comment


            #6
            Edit : I see the slight alignment issue in FF. Will look into it.

            I added

            Code:
                    DateItem dateItem = new DateItem();
                    dateItem.setTitle("Date");
                    dateItem.setHint("<nobr>Picklist based date input</nobr>");
            
                    FormItemIcon icon = new FormItemIcon();
                    icon.setSrc("icons/16/find.png");
                    dateItem.setIcons(icon);
            to the Form --> Various Controls sample and it displays fine.



            You can upload your image to imageshack and post the URL here.

            Sanjiv
            Last edited by sjivan; 26 Jan 2009, 04:42.

            Comment


              #7
              Hello Sanjiv,

              I use:

              Code:
              FormItemIcon icono = new FormItemIcon();
              icono.setSrc("silk/date.png");
                   
              DateItem fechaLimite = new DateItem();
              fechaLimite.setName("fechaLimite");
              fechaLimite.setSelectorFormat("DMY");
              fechaLimite.setPrompt("31-12-9999");
              fechaLimite.setHoverOpacity(75);
              fechaLimite.setHoverStyle("interactImageHover");
              fechaLimite.setIcons(icono);
              I upload a image:




              Regards.
              Francisco.

              Comment


                #8
                Hi,

                I now that this post was a long time ago but unfortunately I've got the same problem now.
                Simple DateTimeItem with additional icon that appears below date picker icon. For some strange reason I cannot align it horizontally.
                I'm using Enterprise Blue skin with now additional changes but also I've checked other skins and problem still exists.

                Does anybody now some workaround?
                Best regards

                Comment

                Working...
                X