Alignment of JList elements

Hi folks,
I've got a JList wrapped in a JScrollPane (which itself is the central component of a JPanel with BorderLayout). JDK version is 1.3.1_01
I've written my own Renderer because there are Icons to display in one of the "columns".
The Problem is: I want the list elements to be left aligned when the list is displayed. But they always appear centered and to the left/right of the list the list background is visible.
Any suggestions?
Thanx in advance, X

That is only helpful for aligning the compnents inside a label, but my cell returned by the renderer is a JPanel containing labels.
Nevertheless zhank you.
But I suspect that the problem lies within my renderer class.
Here's the code:
import javax.swing.*;
import java.awt.*;
public class MyListCellRenderer implements ListCellRenderer {
private DefaultListModel model;
private int prefIconLabelSize = 0;
private int prefNameLabelSize = 0;
private int prefSizeLabelSize = 0;
private int prefDateLabelSize = 0;
private final int labelHeight = 22;
public MyListCellRenderer(DefaultListModel model) {
this.model = model;
public Component getListCellRendererComponent(
final JList list, final Object value, final int index, final boolean isSelected,
final boolean cellHasFocus) {
JPanel dop = this.initDataObjectPanel(value);
if (isSelected) {
dop.setBackground(list.getSelectionBackground());
//dop.setForeground(list.getSelectionForeground());
else {
dop.setBackground(list.getBackground());
//dop.setForeground(list.getForeground());
return dop;
private JPanel initDataObjectPanel(Object value) {
JPanel dop = new JPanel();
DataObject dobj = (DataObject)value;
JLabel iconlabel = new JLabel(dobj.getDataObjectIcon());
iconlabel.setPreferredSize(new Dimension(prefIconLabelSize, labelHeight));
iconlabel.setHorizontalAlignment(JLabel.CENTER);
dop.add(iconlabel);
JLabel namelabel = new JLabel(dobj.getDataObjectName());
namelabel.setPreferredSize(new Dimension(prefNameLabelSize + 10, labelHeight));
namelabel.setHorizontalAlignment(JLabel.LEFT);
dop.add(namelabel);
JLabel sizelabel = new JLabel(dobj.getDataObjectSize());
sizelabel.setPreferredSize(new Dimension(prefSizeLabelSize + 10, labelHeight));
sizelabel.setHorizontalAlignment(JLabel.RIGHT);
dop.add(sizelabel);
JLabel datelabel = new JLabel(dobj.getDataObjectModifiedDate());
datelabel.setPreferredSize(new Dimension(prefDateLabelSize + 10, labelHeight));
datelabel.setHorizontalAlignment(JLabel.CENTER);
dop.add(datelabel);
return dop;
public void determinePreferredLabelSizes() {
for (int i = 0; i < model.getSize(); i++) {
DataObject dobj = (DataObject)model.get(i);
JLabel testlabel = new JLabel(dobj.getDataObjectIcon());
if (testlabel.getPreferredSize().width > prefIconLabelSize) {
prefIconLabelSize = testlabel.getPreferredSize().width;
testlabel = new JLabel(dobj.getDataObjectName());
if (testlabel.getPreferredSize().width > prefNameLabelSize) {
prefNameLabelSize = testlabel.getPreferredSize().width;
testlabel = new JLabel(dobj.getDataObjectSize());
if (testlabel.getPreferredSize().width > prefSizeLabelSize) {
prefSizeLabelSize = testlabel.getPreferredSize().width;
testlabel = new JLabel(dobj.getDataObjectModifiedDate());
if (testlabel.getPreferredSize().width > prefDateLabelSize) {
prefDateLabelSize = testlabel.getPreferredSize().width;
}

Similar Messages

  • Right Clicking JList Elements

    I must preface this thread with the following: I have looked far and wide for answers and have come up dry, despite the Java Tutorials, other threads I looked through, threads that exist about this very issue that I apparently cannot locate, and all applicable APIs.
    My issue is regarding the JList and right clicking within it in order to bring up a JPopupMenu; in turn, its JMenuItems should be able to alter the contents of the JList as defined in the subsequent, applicable code (whether that be deleting, changing properties of the item in question, or replacing it with another from some other source). I have come across the getComponent() method (<I>not</I> a getJComponent() method, which doesn't exist, except for in an Interface JBOField...whatever that is...). And though JList is a type of component, it would seem that its elements, on which I'd like to be able to right click, are not actual components; rather, they would be handled by a ListSelectionModel, or so I think. That said, the ListSelectionModel may aid in changing list contents, but will not help in the actual selection of those by right clicking.
    Nevertheless, here is the code in question (with the appropriate and hopefully helpful annotations):
    import javax.swing.*;
    import java.awt.event.*;
    import java.awt.*;
    public class IngredientsListPopupMenu implements ActionListener {
         // constants for JPopupMenu
         private static final String MENU_NAME = "Selected Ingredients List";
         private static final String ITEM_1 = "Edit Quantity";
         private static final String ITEM_2 = "Delete Ingredient";
         private static final String ITEM_3 = "Replace Ingredient";
         private JPopupMenu listPopupMenu;
         /* all of this "hubbub" below is part of the formatting I learned for
                classes with multiple constructors perhaps it's considered too cumbersome?  */
         public IngredientsListPopupMenu() {
              this(new JPopupMenu(MENU_NAME));
         public IngredientsListPopupMenu(JPopupMenu jpm) {
              createPopupMenu(jpm);
         public void createPopupMenu(JPopupMenu jpm) {
              jpm.add(createMenuItem(ITEM_1));
              jpm.add(createMenuItem(ITEM_2));
              jpm.add(createMenuItem(ITEM_3));          
              this.listPopupMenu = jpm;
            private JMenuItem createMenuItem(String s) {
              JMenuItem jmi = new JMenuItem(s);
              jmi.addActionListener(this);
              jmi.addMouseListener(mouseListener);
              return jmi;
         /* listens for mouse activity and shows menu if not already open
             otherwise detects mouse activity for selecting menu items
                AND here is where it gets "hairy"! */
         private Component selectedComponent; /* not JComponent due to method call below.
            I'm led to believe that there's nothing wrong with this variable type in and of itself,
            whether or not I'm dealing with "Components" v. "JComponents" */
         private MouseListener mouseListener = new MouseAdapterTest();          
         class MouseAdapterTest extends MouseAdapter {     
              public void mousePressed(MouseEvent e) {
                   checkPopup(e);
              public void mouseClicked(MouseEvent e) {
                   checkPopup(e);
              public void mouseReleased(MouseEvent e) {
                   checkPopup(e);
              private void checkPopup(MouseEvent e) {
                   if (e.isPopupTrigger()) {
                        selectedComponent = e.getComponent(); /* gets the type of (in this
                                    case) JComponent, which is rather general (and probably meant more
                                    for when one is dealing with more than one type of component?), as I
                                    do not know how to refer to an element in a JList here with this particular
                                    method, which is probably not the way to go... */
                        listPopupMenu.show(e.getComponent(), e.getX(), e.getY());
         public void actionPerformed(ActionEvent e) { // applies action on selected JComponent from checkPopup method above
              String selection = e.getActionCommand(); // assigns JPopupMenu's selected text to a String
              /* empty conditional statements due to them not being completely necessary
                        at this point, as I'd like to make sure the JPopupMenu displays properly before
                        writing the code for them */
                    if (selection.equals(ITEM_1)) {
                   // open up dialog to edit quantity
              } else if (selection.equals(ITEM_2)) {
                   // delete ingredient from JList
              } else if (selection.equals(ITEM_3)) {
                   // open up dialog to replace ingredient with another
         public JPopupMenu getMenu() { // for a JScrollPane class
              return this.listPopupMenu;
    }In closing, I guess my question is: how do I take what I've got here and get that JPopupMenu to work with JList elements?

    Actually, I found out on my own that I did not need the public int locationToIndex(Point location) at all.
    The issue was concerning the mouseListener and actionListener implementations. All's well now! Thanks, anyway.

  • Issue in alignment of UI element

    Hi Experts,
    I have developed an ABAP Webdynpro Application. When I have tested in my PC. There is no issue in alignment. But when i asked to check with user, he has facing issue in alignment.Is required to do necessary setting in SAP portal because i have already adjusted the width of UI element.Please provide the solution for this if anybody come across same issue.
    Thanks.

    Hi Chitra,
    It looks like user has the personalization settings done for his/her user id.
    I think you can resolve the isssue by resetting the user personalization settings.
    Please find my answer in the below link.
    Variants for ALV
    Hope this helps you.
    Regards,
    Rama

  • Different Heights for JList Elements

    Either the height does not change,Or the size of the full list changes.
    Suggestions??
    class CustomRenderer extends JLabel implements ListCellRenderer
    int newHeight;
    int flag=0;
    int index;
    public CustomRenderer(int newHeight,int resizingRow)
    //newHeight to be assigned to tat particular list element
    this.newHeight=newHeight;
    //Row of List to Resized
    this.index=resizingRow;
    setOpaque( true );
    public Component getListCellRendererComponent(
    JList list, Object value, int index, boolean isSelected, boolean cellHasFocus)
    if(index==resizingRow){                           
    flag=1;
    setText(value.toString());
    list.setFixedCellHeight(-1);
    Dimension d = getPreferredSize();
    d.height = newHeight;
    setPreferredSize(d);
    else{   
    flag=0;
    setText(value.toString());
    Dimension d = getPreferredSize(newHeight);
    setPreferredSize(d);
    return this;
    public Dimension getPreferredSize() {
    if(flag==1){
    //Wen clicked on the particular Index, Resize it
    Dimension dim = super.getPreferredSize();
    return new Dimension(dim.width,newHeight);
    else{
    //Else Let it be the same size
    Dimension dim = super.getPreferredSize();
    JOptionPane.showMessageDialog(this,""+super.getPreferredSize());
    return new Dimension(dim.width,50);
    public Dimension getPreferredSize(int newHeight) {
    Dimension dim = super.getPreferredSize();
    return new Dimension(dim);
    }

    try this
    import javax.swing.*;
    import java.awt.*;
    import javax.swing.event.*;
    class Testing extends JFrame
      String[] cities = {"London","Madrid","New York","Rome","Sydney","Toronto","Washington"};
      DefaultListModel listModel = new DefaultListModel();
      JList list = new JList(listModel);
      public Testing()
        setLocation(400,300);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        list.setCellRenderer(new MyRenderer());
        for(int x = 0; x < cities.length; x++) listModel.addElement(cities[x]);
        JScrollPane sp = new JScrollPane(list);
        sp.setPreferredSize(new Dimension(100,150));
        getContentPane().add(sp);
        pack();
        list.addListSelectionListener(new ListSelectionListener(){
          public void valueChanged(ListSelectionEvent lse){
            if(lse.getValueIsAdjusting() == false)
              for(int x = 0; x < listModel.size(); x++)
                listModel.setElementAt(listModel.getElementAt(x),x);
      public static void main(String[] args){new Testing().setVisible(true);}
    class MyRenderer extends DefaultListCellRenderer
      public Component getListCellRendererComponent(JList list,Object value,
                          int index,boolean isSelected,boolean cellHasFocus)
        JLabel lbl = (JLabel)super.getListCellRendererComponent(list,value,index,isSelected,cellHasFocus);
        if(list.getSelectedIndex() == index) lbl.setPreferredSize(new Dimension(100,75));
        else lbl.setPreferredSize(new Dimension(100,20));
        return lbl;
    }

  • JLIst element  deselection Problem

    Hi,
    I create a simple JList. I have multiple selection option in my JList.
    But if I select some element in the JList it is getting "SELECTED".
    But again I Click that "SELECTED" element it needs to be "DESELECTED".
    But I am not able to do it.
    Can any body help with some code.
    shankha

    But I want to do it progrmatically. Can you provide some sample code to do this?Sure, read the API and you will find the method to do this. Search for methods containing "select".

  • Horizontal Alignment of JList

    Hi,
    Can someone tell me how to set a JList so that it is aligned in the center (horizontally) of a JPanel with a BorderLayout?
    I am doing the following, but it does not seem to have any affect and the list is aligned on the left....
    currentList = new JList(currentListModel);
    currentList.setAlignmentX(JList.CENTER_ALIGNMENT);
    statusPane.add(currentList, BorderLayout.CENTER);
    Thanks in advance.

    not sure this is what you're after, but worth a look
    import javax.swing.*;
    import java.awt.*;
    class TestGUI extends JFrame
      public static void main(String args[])
        new TestGUI();
      public TestGUI()
        super("TestGUI");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(300,400);
        Container frame = getContentPane();
        DefaultListModel listModel = new DefaultListModel();
        JList jl = new JList(listModel);
        JPanel jp = new JPanel(new BorderLayout());
        JPanel upper = new JPanel();
        upper.setPreferredSize(new Dimension(frame.getWidth(),50));
        JPanel lower = new JPanel();
        lower.setPreferredSize(new Dimension(frame.getWidth(),50));
        jp.add(upper,BorderLayout.NORTH);
        jp.add(jl,BorderLayout.CENTER);
        jp.add(lower,BorderLayout.SOUTH);
        frame.add(jp);
        setContentPane(frame);
        setVisible(true);
    }

  • How do I get the alignment of navbar elements to work in IE

    I am revising some things on an old site. It is loaded to a test server. On the landing page, there are two rectangles (English and French) that need to live side-by-side. They do in other browsers on both Mac and PC, but stack above one another in IE. I've tried css align, align block, floats, and I've run out of ideas.
    Can someone help me spot the errors?

    Run your page through the validators here...
    HTML: http://validator.w3.org/
    CSS: http://jigsaw.w3.org/css-validator/
    They'll list all of the errors and give you direction (in most cases) on how to fix them.
    If the problem persists after you've cleaned up your code (html errors are a big contributor to display issues between browsers) post back and we can take a closer look.

  • Lion graphical issue, elements not aligned

    After my upgrade to Lion I'm experiencing some issues on the alignment of the elements. Here's a screenshot of what I'm talking about..
    this is the icon of iCal and as you can see the digits of the date are overlaying the red part, that should not usually happen.
    This very same problem is also seen in the iCal application itself. As you can see from this screenshot:
    I think this issue happens when the elements are not static but dynamic, but i cannot find a way to solve this..
    The problem is not just aesthetic but also functional when happens in other softwares, like in this case in Hype:
    here it gets really hard to manipulate the objects because the selections dots are not even clickable...
    Can anybody help?

    Sorry to say it, but I think you can see from Bob's response that there's no way to solve this rapidly.
    Did you take an image of your Mountain Lion install before upgrading to Yosemite? Roll back to that. If you're not in the habit of taking a snapshot of your system before performing operating system upgrades - get in that habit. If you are dependent on anything at all on hour computer, having a reliable backup method in place is essential. If you don't have a Time Capsule, or some other way to run Time Machine onto a disk that's not in your computer, go set that up yesterday.
    If you can't just remove Yosemite and roll back to Mountain Lion for whatever reason, you can partition your drive so that you can install both Yosemite and Mountain Lion on the same drive, and then boot into Mountain Lion when you need to work in CS5. Or you can take your Mountain Lion disc (I assume you have one, no?) and then use it to create a virtual machine in something like VirtualBox to run Mountain Lion from inside Yosemite.

  • How to do the multiple-line String at JList?

    hey everyone,
    i want to create a JList have to display multiple-line string.
    i have use String a="text1"+"\n"+"text2" inside my JList...
    the "\n" change to a sequare box...
    how cum like that.................??
    i need ur kindly helping...

    Because the default renderer for a JList element is a
    JLabel, and that is how JLabel behaves. The question
    "how to do a multiple-line JLabel" has been asked
    hundreds of times in this forum, search for that.i have search for it already but i no get it..anything!
    so, can u give me the url for me? thank you!

  • Using jtextpane as jlist cell renderer component

    hi,
    I want to use Jlist (in a Jscrollpane) to list a series of boxes of text. The boxes have to be kept the same width, but the height can vary depending on the amount of text.
    I want to use jtextpane because it wraps automatically on word boundaries... although I am confused by the jtextpane functionality...
    but I just can't seem to crack it: presumably its going to involve
    class MyCellRenderer extends JTextPane implements CellRenderer {
    public Component getListCellRendererComponent( ...
    then what ??? help!
    mike rodent
    PS also, how to make Jlist put a line (a single line) between each of the components in its list... it's no good doing setBorder inside the above method, as you then get 2 lines coalescing between adjacent Jlist elements...

    PS also, how to make Jlist put a line (a single line) between each of
    the components in its list... it's no good doing setBorder inside the
    above method, as you then get 2 lines coalescing between adjacent
    Jlist elements...Who says you need to have a Border with top and bottom lines?

  • Alignment Grids for Titler in PrE & PrPro

    There have been several discussions on the lack of real alignment tools in Titler, for both PrE and PrPro. I use a workaround to this, and just Import a "grid" image, created in PS and Saved to .PSD with Transparency. I use the same technique to build layouts for PiP and similar.
    One just Imports the .PSD into their NLE (Non Linear Editing) program, as a still, or as Footage in PrPro. The .PSD is then placed on the Timeline in a Video Track above any other Clips. The Title is then placed above the .PSD. In PrE, one sees the Video below the Title automatically. In PrPro there is a checkbox to do this.
    The grid in the .PSD is used for alignment of the elements/text in the Title.
    Be sure to remove the grid, when you are done, or in PrPro, you can turn off visibility for its Video Track. Otherwise, you WILL Export the grid, and that is not what you will likely want to do. Do not forget to disable this .PSD, before the Export.
    Attached are an NTSC 16:9 .PSD and an NTSC 4:3 .PSD, with proper PAR for each.
    Hope that this helps someone, where they need better alignment in Titler in either PrE, or PrPro.
    Hunt

    Hi
    I tested the grid idea...works well.  I ended up layering stills with transparency to see the grid and line up ...I did a test title page and stills in the same psd file...and I didn't create an overall background image...but left the screen black (black video) in premiere...can do background image later...this was first time doing a layered psd to premiere...
    I found the grid (especially with the various "weights" of letters in different fonts ( like the letter T or the letter O ) need to be shifted a bit for balance and the grid helps a lot with that, as well as the horizontal postition of the images.  For some reason the images appear to go into layer OK vertically (centered at least, and can adjust from there depending again on "weight" issue), but horizontally they are off a bit (not centered exactly) all the time.
    At any rate, I can see how the grid helps to get a reference for lining things up...so thanks for uploading that and sharing it.
    I ended up using the eyeball and transparency a lot in psd, finally turning everything on and opaque before saving for import to premiere, and when in premiere I did what you suggested..put the grid on top video channel and it worked well.
    Rod
    ps. I'm finding it fun to do my own cross dissolves...so they aren't all the same exactly.  Takes time though...so I can see big benefit to just using preset with a lot of images to deal with.

  • Web dynpro abap: UI element

    how to align the UI element in layout.
    Moderator Message: Not enough research done. Thread locked.
    Edited by: Suhas Saha on Feb 8, 2012 4:18 PM

    create frame and try to place in it

  • New CSS Rollovers not align same as Image Rollovers - Dreamweaver CC

    I have put together a test page replacing Javascript Image Rollovers for CSS Image Rollovers and the alignment of items in the 3 columns (DIVS) is not the same as when old style rollovers. I cannot seem to find the error in my CSS and would like another pair of eyes to see if I'm missing something. Here is the screenshot of new page from Firefox, followed by the CSS. Images are loading into #sidebar1 (left column), #sidebar2 (right column) and #MainContent. #MainContent seems off centered and #sidebar outside margins are different. Any help would be greatly appreciated.
    CSS:
    <style type="text/css">
    <!--
    body {
        font: 81.3% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
    .oneColFixCtrHdr #container {
        width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
        background: #FFFFFF;
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        border: 1px solid #000000;
        text-align: left; /* this overrides the text-align: center on the body element. */
    .oneColFixCtrHdr #header {
        background: #DDDDDD;
        padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .oneColFixCtrHdr #header h1 {
        margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .oneColFixCtrHdr #mainContent {
        background: #FFFFFF;
        width: 200px;
        margin-top: 0;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 0px;
    .oneColFixCtrHdr #sidebar1, #sidebar2, #mainContent {
        text-align: center;
        width: 200px;
        padding-top: 0px;
        padding-right: 30px;
        padding-bottom: 0;
        padding-left: 30px;
    .oneColFixCtrHdr #footer {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        background:#CFAF86;
        clear:both
    .teammembers #nav #teammembers a {
        color: #FFF;
    .oneColFixCtrHdr #memberdues {
        padding-right: 315px;
        padding-left: 315px;
    .oneColFixCtrHdr #footer p {
        margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
        padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        text-align: center;
        letter-spacing: 4px;
    #container #nav {
        line-height: 2em;
        font-weight: normal;
        background-color: #CFAF86;
        text-align: center;
        margin: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 10px;
        list-style-type: none;
        padding-left: 10px;
    #container #nav li {
        font-weight: bold;
        display: inline;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
    #container #nav li a {
        color: #000;
        text-decoration: none;
    #container #nav li a:hover {
        color: #FFF;
        text-decoration: none;
    .renegadestext {
        font-style: italic;
        font-weight: bold;
        color: #000;
    .oneColFixCtrHdr #AboveMainContent {
        padding-top: 0px;
        padding-right: 20px;
        padding-bottom: 0px;
        padding-left: 20px;
    .oneColFixCtrHdr #AboveMainContent h2 {
        text-align: center;
    .oneColFixCtrHdr #sidebar1 {
        background-color: #FFF;
        float: left;
        width: 200px;
    .oneColFixCtrHdr #sidebar2 {
        background-color: #FFF;
        float: right;
        width: 200px;
    #thomasbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/thomas_barber.gif);
         background-repeat: no-repeat 0 0;
    #thomasbarber:hover {
        background-position: 0px -50px;
    #thomasbarber span {
        position: absolute;
        top: -999em;
    #janetbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/janet_barber.gif);
         background-repeat: no-repeat 0 0;
    #janetbarber:hover {
        background-position: 0px -50px;
    #janetbarber span {
        position: absolute;
        top: -999em;
    #karenallen {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/karen_allen.gif);
         background-repeat: no-repeat 0 0;
    #karenallen:hover {
        background-position: 0px -50px;
    #karenallen span {
        position: absolute;
        top: -999em;
    #davidboudreaux {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/david_boudreaux.gif);
         background-repeat: no-repeat 0 0;
    #davidboudreaux:hover {
        background-position: 0px -50px;
    #davidboudreaux span {
        position: absolute;
        top: -999em;
    #melbahanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/melba_hanna.gif);
         background-repeat: no-repeat 0 0;
    #melbahanna:hover {
        background-position: 0px -50px;
    #melbahanna span {
        position: absolute;
        top: -999em;
    #kentunderwood {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/kent_underwood.gif);
         background-repeat: no-repeat 0 0;
    #kentunderwood:hover {
        background-position: 0px -50px;
    #kentunderwood span {
        position: absolute;
        top: -999em;
    #shawntrainor {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/shawn_trainor.gif);
         background-repeat: no-repeat 0 0;
    #shawntrainor:hover {
        background-position: 0px -50px;
    #shawntrainor span {
        position: absolute;
        top: -999em;
    #eddieokonski {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/eddie_okonski.gif);
         background-repeat: no-repeat 0 0;
    #eddieokonski:hover {
        background-position: 0px -50px;
    #eddieokonski span {
        position: absolute;
        top: -999em;
    #scotthartman {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/scott_hartman.gif);
         background-repeat: no-repeat 0 0;
    #scotthartman:hover {
        background-position: 0px -50px;
    #scotthartman span {
        position: absolute;
        top: -999em;
    #titoescobar {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/tito_escobar.gif);
         background-repeat: no-repeat 0 0;
    #titoescobar:hover {
        background-position: 0px -50px;
    #titoescobar span {
        position: absolute;
        top: -999em;
    #debbiehanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/debbie_hanna.gif);
         background-repeat: no-repeat 0 0;
    #debbiehanna:hover {
        background-position: 0px -50px;
    #debbiehanna span {
        position: absolute;
        top: -999em;
    #robertbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/robert_barber.gif);
         background-repeat: no-repeat 0 0;
    #robertbarber:hover {
        background-position: 0px -50px;
    #robertbarber span {
        position: absolute;
        top: -999em;
    #gregallen {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/greg_allen.gif);
         background-repeat: no-repeat 0 0;
    #gregallen:hover {
        background-position: 0px -50px;
    #gregallen span {
        position: absolute;
        top: -999em;
    #johnmcclung {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/john_mcclung.gif);
         background-repeat: no-repeat 0 0;
    #johnmcclung:hover {
        background-position: 0px -50px;
    #johnmcclung span {
        position: absolute;
        top: -999em;
    #miketisdel {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/mike_tisdel.gif);
         background-repeat: no-repeat 0 0;
    #miketisdel:hover {
        background-position: 0px -50px;
    #miketisdel span {
        position: absolute;
        top: -999em;
    #butchhanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/butch_hanna.gif);
         background-repeat: no-repeat 0 0;
    #butchhanna:hover {
        background-position: 0px -50px;
    #butchhanna span {
        position: absolute;
        top: -999em;
    #kimberlyshepherd {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/kimberly_shepherd.gif);
         background-repeat: no-repeat 0 0;
    #kimberlyshepherd:hover {
        background-position: 0px -50px;
    #kimberlyshepherd span {
        position: absolute;
        top: -999em;
    #katrinabartkowiak {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/katrina_bartkowiak.gif);
         background-repeat: no-repeat 0 0;
    #katrinabartkowiak:hover {
        background-position: 0px -50px;
    #katrinabartkowiak span {
        position: absolute;
        top: -999em;
    #michelehartman {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/michele_hartman.gif);
         background-repeat: no-repeat 0 0;
    #michelehartman:hover {
        background-position: 0px -50px;
    #michelehartman span {
        position: absolute;
        top: -999em;
    #aliciaallen {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/alicia_allen.gif);
         background-repeat: no-repeat 0 0;
    #aliciaallen:hover {
        background-position: 0px -50px;
    #aliciaallen span {
        position: absolute;
        top: -999em;
    #melissalockwood {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/melissa_lockwood.gif);
         background-repeat: no-repeat 0 0;
    #melissalockwood:hover {
        background-position: 0px -50px;
    #melissalockwood span {
        position: absolute;
        top: -999em;
    #rustyhanna {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/rusty_hanna.gif);
         background-repeat: no-repeat 0 0;
    #rustyhanna:hover {
        background-position: 0px -50px;
    #rustyhanna span {
        position: absolute;
        top: -999em;
    #karenbarber {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/karen_barber.gif);
         background-repeat: no-repeat 0 0;
    #karenbarber:hover {
        background-position: 0px -50px;
    #karenbarber span {
        position: absolute;
        top: -999em;
    #chrishillman {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/chris_hillman.gif);
         background-repeat: no-repeat 0 0;
    #chrishillman:hover {
        background-position: 0px -50px;
    #chrishillman span {
        position: absolute;
        top: -999em;
    #frankmarshall {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/frank_marshall.gif);
         background-repeat: no-repeat 0 0;
    #frankmarshall:hover {
        background-position: 0px -50px;
    #frankmarshall span {
        position: absolute;
        top: -999em;
    #dorisboudreaux {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/doris_boudreaux.gif);
         background-repeat: no-repeat 0 0;
    #dorisboudreaux:hover {
        background-position: 0px -50px;
    #dorisboudreaux span {
        position: absolute;
        top: -999em;
    #johnburkett {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/john_burkett.gif);
         background-repeat: no-repeat 0 0;
    #johnburkett:hover {
        background-position: 0px -50px;
    #johnburkett span {
        position: absolute;
        top: -999em;
    #lisaburkett {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/lisa_burkett.gif);
         background-repeat: no-repeat 0 0;
    #lisaburkett:hover {
        background-position: 0px -50px;
    #lisaburkett span {
        position: absolute;
        top: -999em;
    #andreagordon {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/andrea_gordon.gif);
         background-repeat: no-repeat 0 0;
    #andreagordon:hover {
        background-position: 0px -50px;
    #andreagordon span {
        position: absolute;
        top: -999em;
    #jeffwilliams {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/jeff_williams.gif);
         background-repeat: no-repeat 0 0;
    #jeffwilliams:hover {
        background-position: 0px -50px;
    #jeffwilliams span {
        position: absolute;
        top: -999em;
    #taylordavis {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/taylor_davis.gif);
         background-repeat: no-repeat 0 0;
    #taylordavis:hover {
        background-position: 0px -50px;
    #taylordavis span {
        position: absolute;
        top: -999em;
    #leearnold {
        display: block;
        width: 150px;
        height: 50px;
        background-image: url(images/lee_arnold.gif);
         background-repeat: no-repeat 0 0;
    #leearnold:hover {
        background-position: 0px -50px;
    #leearnold span {
        position: absolute;
        top: -999em;
    -->
    </style>

    The text isn't centered within the containers for two reasons.
    1. Their display is set to block and
    2. There is nothing telling them to be centered
    One way to fix it would be to change the <a> tags to inline-block and add text-align:center to their parents and everything should center nicely within the columns.

  • How to do the same form element alignments on two different regions

    Hi,
    I have two different regions on the same page as the second one is underneath of the first one. Both the regions have some form elements like text field, select list etc. However the alignment of the elements on these two regions are not the same. In the individual regions, it just aligns the input fields based on the maximum length of the label within the region only, so it creates two different vertical alignments per region. How to have the same alignment for the input elements across the regions?
    (I wish to upload the screenshot of the page but there is no provision in this forum to do so).
    Thanks in advance.
    Natarajan

    The basic approach is to set the width of the item labels using a CSS embedded style sheet in the page HTML Header:
    <style type="text/css">
    label {
      display: block;
      width: 15em;
    </style>If you want to limit this to items in specific regions, then give these region(s) static region IDs (such as <tt>region-1</tt>) for use as CSS selectors:
    <style type="text/css">
    #region-1 label,
    #region-2 label {
      display: block;
      width: 15em;
    </style>

  • Align Fields or Label in Webdynpro

    Hi Experts ,
    How can I Allign the UI elements in WebDynpro ?
    I tried using different Layouts we have. But ! I couldn't get the desired result.
    My requirement is :
    In the First Row, I should have a table and in Second row , I must have two buttons which are aligned
    one for left and one for right. How can I align like that ? If I use the GridLayout with 2 columns, I am getting
    two collums for all the rows.  but ! I should have one column in first row and two columns in second row.
    Please help me.
    Regards
    Suresh..

    Suresh,
    To align  two UI elements in the same row you can use container UI element which is an invisble UI element used to align other UI Elements in webdynpro.
    -> Create a Container
    -> add/Create buttons into this container
    Done!
    Ram

Maybe you are looking for