formdecorator is squashing my buttons together

[Chris Yoker]

hiya,

I have 2 buttons declared as follows:

<tr>
                <td colspan="3" style="text-align: left" valign="top">
                    <asp:Button ID="btnCreate" runat="server" OnClick="btnCreate_Click" Text="Update"
                        Font-Size="9pt" />&nbsp;<asp:Button ID="btnClear" runat="server" OnClick="btnClear_Click"
                            Text="Clear" Font-Size="9pt" Enabled="true" /></td>
            </tr>

When I add the formDecorator to the page, the buttons get squahed together, and I have to add additional "nbsp's"

Is there a way to stop this?

I thought I'd just have to drop the decorator on the page and it would conform with the html that is already in the aspx.

I'm using ie 7

many thanks,

yogi

[Georgi Tunev]

Hi Chris,

I tried to reproduce the problem, but I don't see difference no matter if I use formdecorator or not (see attached screenshot). I guess that the problem is not in this piece of code.
Do you by any chance have some global styles on your page? This could be a reason for such problem.

If you continue experiencing this behavior, please open a ticket and send us a small sample project where we can reproduce it. We will check it and get back to you.



Greetings,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Bruce St.Clair]

I got the same problem.

With RadFormDec turned on
http://update.timsforaudiology.com/bruce/2.png

Turn off RadFormDec
http://update.timsforaudiology.com/bruce/1.png


here is the html code.  2008 Q2, VS2008

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

html xmlns="http://www.w3.org/1999/xhtml">

<

head runat="server">

<title>Untitled Page</title>

</

head>

<

body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server"

OutputCompression="AutoDetect">

</telerik:RadScriptManager>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Visible="False">

</telerik:RadWindowManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server"

EnableTheming="True" />

<br />

&nbsp;

<asp:Button ID="btnResource" runat="server"

style="z-index: 1; left: 267px; top: 16px; position: absolute; width: 78px; height: 26px; right: 584px"

Text="Resources" Width="80px" />

<asp:Button ID="btnProvider" runat="server"

style="z-index: 1; left: 60px; top: 17px; position: absolute; width: 78px; height: 26px; right: 791px"

Text="Providers" Width="80px" />

<asp:Button ID="btnSite" runat="server"

style="z-index: 10; left: 163px; top: 17px; position: absolute; width: 78px; height: 26px; "

Text="Sites" Width="80px" />

<br />

<br />

<br />

</div>

<div>

<telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="627px"

Width="657px" FullScreenMode="True" HeightOffset="90" LiveResize="True">

<telerik:RadPane ID="RadPane1" Runat="server" Height="201px" Width="225px">

Left Pane

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server"

CollapseMode="Forward" />

<telerik:RadPane ID="RadPane2" Runat="server" Height="305px" Width="657px">

Right Pane

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</

body>

</

html>

[Georgi Tunev]

Hello Bruce,

The problem in your case comes from the absolute positioning of the buttons. I suggest to change the logic and to use margin-top and margin-left instead - you will not experience such problem then.



Greetings,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Bruce St.Clair]

Georgi

 I changed the code to this but it still seems to throw the buttons where it want to.

RadFormDec turned on 
http://update.timsforaudiology.com/bruce/3.png

RadFormDec turned off

http://update.timsforaudiology.com/bruce/4.png


Here is the code I changed

<asp:Button ID="btnProvider" runat="server"

style="z-index: 1; margin-left: 60px; margin-top: 16px; width: 78px; height: 26px;"

Text="Providers" Width="80px" />

<asp:Button ID="btnSite" runat="server"

style="z-index: 1; margin-left: 263px; margin-top: 16px; width: 78px; height: 26px;"

Text="Sites" Width="80px" />

<asp:Button ID="btnResource" runat="server"

style="z-index: 1; margin-left: 267px; margin-top: 16px; width: 78px; height: 26px;"

Text="Resources" Width="80px" />

[Georgi Tunev]

Hello Bruce,

Here is how to set the HTML correctly:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadFormDecorator ID="FormDecorator1" runat="server" />
    <div style="margin-top:16px">
        <span style="padding-left:60px;">
        <asp:Button ID="btnProvider" runat="server" Style="z-index: 1;
           width: 78px; height: 26px;" Text="Providers" Width="80px" />
        </span>

        <span style="padding-left:263px;">
        <asp:Button ID="btnSite" runat="server" Style="z-index: 1;
            width: 78px; height: 26px;" Text="Sites" Width="80px" />
        </span>

        <span style="padding-left:267px;">
        <asp:Button ID="btnResource" runat="server" Style="z-index: 1;
            width: 78px; height: 26px;" Text="Resources" Width="80px" />
        </span>
    </div>
</form>

I hope this suits your requirements.


All the best,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[mac]

i get the same issue when using office2007 skin
buttons squish together. I am also getting TONS of errors popping up referring to the new telerik ui 2008.
I updated the dll and xml  in the bin folder however this has not resolved the issues.

[Georgi Tunev]

Hi mac,

In such case it would be best to open a support ticket and to send us a sample project where these problems can be reproduced along with detailed description of the desired behavior. This way we will have a better view over your exact setup and we will provide you with the most appropriate solution.


Best wishes,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.