Schlagwörter: css Kommentarverlauf ein-/ausschalten | Tastaturkürzel

  • Andreas Höhmann 15:10 am Friday, 19. August 2011 Permalink |
    Tags: css, label,   

    VAADIN Reverse Label with CSS 

    Here is a simple example how to use CSS to change the visual representation of Vaadin components.

    The com.vaadin.ui.Label component have a caption and a icon, i.e.  „[I] Caption“.

    But I need a label like this „Caption [I]“. This could be done with the following CSS:

    .v-caption-reverseLabel {
    float: left;
    }
    .v-caption-reverseLabel .v-icon {
    float: right;
    margin: 0px 2px 0px 2px;
    }
    .v-caption-reverseLabel .v-captiontext {
    float: right;
    }
    
    final Label label = new Label();
    label.setStyleName("reverseLabel");
    label.setCaption("Foobar");
    label.setIcon(new ThemeResource("img/info.gif"));
    
    Advertisements
     
  • Andreas Höhmann 16:14 am Tuesday, 3. November 2009 Permalink |
    Tags: css, fix, ie, scroll bar   

    Better IE scroll bar bugfix 

    Today I want to write about a better fix for the „ie scroll bar bug“.

    First a short description of the problem …  a picture says more than 1000 words:

    ie_scrollbar_bug

    The horizontal scroll bar become visible as a result of the shown vertical scroll bar.

    But I’m expecting this:

    ie_scrollbar_bug_expected

    I found some articles about solutions to void the unnecessary x scroll bar in internet explorer:

    The IE quirks mode workaround is not my prefered solution, I want use the xhtml 11 doctype

    <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.1//EN“
    http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“&gt;

    To hide the horizontal scoll bar is usefull if you doesn’t have content that can overflow the views width, i.e. if the view-content have a“width of 100%. But if you have view-content with a dynamic width (!= 100%) then you need horizontal scroll bars.

    Here is my solution:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
      <style type="text/css">
        div.view {
          overflow: auto;
          width: 100%;
          background-color: #000044;
          color: white;
          height: 100px;
        }
        div.content {
          background-color: white;
          color: red;
        }
        * html div.verticalScrollerContainerFix {
          float: left;
        }
        * html div.verticalScrollerContainer {
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <div class="view">
        <div class="verticalScrollerContainerFix">
          <div class="verticalScrollerContainer">
            <div class="content" style="width: 400px; height: 2000px;">
              width: 400px; height: 2000px;
            </div>
            Foobar
          </div>
        </div>
      </div>
    </body>
    </html>
    

    My solution based on conditional css styles  verticalScrollerContainerFix and  verticalScrollerContainer. The structure is always the same:

        <div class="verticalScrollerContainerFix">
          <!-- this div will float to left - place for the vertical scroll bar (if necessary) -->
          <div class="verticalScrollerContainer">
            <!-- a container for the content -->
            YOUR CONTENT HERE
          </div>
        </div>
    

    Try it 😉

     
  • Andreas Höhmann 13:42 am Thursday, 10. September 2009 Permalink |
    Tags: collapse, css, expand, rich faces,   

    Customized Richfaces Tree 

    Yesterday I had to customize the Richfaces tree component, because my client wants a special layout. My solution is a little bit strange. I share it here for someone which is in the same situation 😉 Here is the story …

    Per default the rich:tree looks like a standard tree browser (i.e. explorer, eclipse, whatever):

    rich_tree_standard

    But I want this look:

    rich_tree_customized

    You see that the expand/collapse icon (rich_tree_expand) is on the same level with the node-icon (rich_tree_leaf). That’s very hard to fix this with CSS (it’s possible but i prefer my strange solution ;)). The Richfaces documentation describes which parts of a tree could be customize.

    We have:

    • rich-tree-node-handle and rich-tree-node-handleicon – a td which contains a link and a image to expand/collapse the node (only possible for a node not a leaf)
    • rich-tree-node-icon – is a td which contains the image for a node (a node with children)
    • rich-tree-node-icon-leaf – is a td which contains the image for a leaf (a node without children)

    I decide to move the expand/collapse icon from the handle-td to the icon-td and „simulate“ the user-click with Javascript:

    rich_tree_expand_move

    Listing 1 tree.xhtml:

    <rich:tree id="tree"
                  binding="#{treeBean.tree}"
                  var="item"
                  switchType="ajax"
                  ajaxSubmitSelection="true" 
                  toggleOnClick="false"
                  showConnectingLines="false"
                  disableKeyboardNavigation="true">
              
        <f:facet name="iconCollapsed">
           <!-- no image for collapsed --> 
           <rich:spacer width="0"  height="0" style="border: none;"/>
        </f:facet>
        <f:facet name="iconExpanded">
           <!-- no image for expanded --> 
           <rich:spacer width="0"  height="0" style="border: none;"/>
        </f:facet>
              
        
        <f:facet name="icon">
           <!--  use normal node icon to toggle expand/collapse -->
           <h:panelGroup>
              <h:graphicImage value="#{item.isLeaf ? '/images/leaf.gif' : '/images/collapsed.gif'}" 
                                     onclick="myToggleTreeNode(this);"
                                     rendered="#{!treeBean.isExpanded}"/>
              <h:graphicImage value="#{item.isLeaf ? '/images/leaf.gif' : '/images/expanded.gif'}" 
                                     onclick="myToggleTreeNode(this);"
                                     rendered="#{treeBean.isExpanded}"/>
           </h:panelGroup>
        </f:facet>
              
        <f:facet name="iconLeaf">
           <h:graphicImage value="/images/leaf.gif"/> 
        </f:facet>
              
        <rich:recursiveTreeNodesAdaptor roots="#{treeBean.roots}" var="item" nodes="#{item.children}">
           <rich:treeNode>
              <h:outputText value="#{item.name}"/>
           </rich:treeNode>
        </rich:recursiveTreeNodesAdaptor>
    </rich:tree>
    

    Listing 2 tree.js:

    function myToggleTreeNode(element) {
      var elem = jQuery(element);
      // img -> span -> td
      var parent = elem.parent().parent();
      var elementId = parent.attr("id");
      // i.e. j_id31:tree:j__id39:18::j_id40:icon -> the td arround the icon-image
      var index = elementId.lastIndexOf(":icon");
      var treeNodeId = elementId.substring(0, index);
      // i.e. j_id31:tree:j__id39:18::j_id40:handle -> the td arround the original expand/collapse-image
      var handleId = treeNodeId+':handle';
      // pure jQuery not working here
      var expandElement = jQuery($(handleId));
      expandElement.trigger("click");
    }
    

    Listing 3 tree.css:

    .rich-tree-node-handleicon {
      display: none;
    }
    
     
c
Neuen Beitrag erstellen
j
nächster Beitrag/nächster Kommentar
k
vorheriger Beitrag/vorheriger Kommentar
r
Antworten
e
Bearbeiten
o
zeige/verstecke Kommentare
t
Zum Anfang gehen
l
zum Login
h
Zeige/Verberge Hilfe
Shift + ESC
Abbrechen