Question

I’ve consulted this page, but my ASPxButton controls are still displaying on top of one another. Am I missing something in this code? I can tell that the style is detected, because I’m able to auto-complete the style when typing in my CssClass argument.

aspx page:

<dxe:ASPxButton ID="_ASPxButton1" ClientInstanceName="_ASPxButton1" runat="server"
    Text="Print" AutoPostBack="False" CssClass="btnInline" >
    <ClientSideEvents Click="function(s, e) { window.print(); }" />
</dxe:ASPxButton>
<dxe:ASPxButton ID="_ASPxButton2" ClientInstanceName="_ASPxButton2" runat="server"
    Text="Close" AutoPostBack="False" CssClass="btnInline" >
    <ClientSideEvents Click="function(s, e) { window.close(); }" />
</dxe:ASPxButton>

css:

.btnInline 
{
    display: inline-table;
}

Answer 1

Once I dug into this a bit deeper, I realized that an ASPxButton is really a table w/ all kinds of css embedded in it, so it’s next to impossible to get two of these “buttons” to sit side-by-side.

I ended up just coding these buttons as asp:Button controls, and that freed me of all the DevExpress styling baggage. I was able to style the buttons to look just like an ASPxButton, so everything works now.

aspx page:

<asp:Button ID="_ASPxButton1" Text="Close" runat="server" CssClass="devExpressButton" OnClientClick="showPrintView();" />
<asp:Button ID="_ASPxButton2" Text="Print" runat="server" CssClass="devExpressButton" OnClientClick="feePopupHide();" />

css:

.devExpressButton 
{
    border: solid 2px #475e78;
    background-color: #f3f3f3;
    font-weight: bold;
    height: 30px;
    width: 60px;
    color: #000000;    
    font-size: 9pt;
    font-family: Arial, Helvetica, Geneva, sans-serif;                  
    vertical-align: middle;         
    padding: 1px 1px 1px 1px;
    margin: 5px 5px 5px 5px;
    cursor: pointer;    
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -khtml-border-radius: 6px; 
}
.devExpressButton:hover
{
    color: #FFFFFF;   
    font-weight: bold;
    background-color: #5D7B9D;
}