Button won't center

[Web Services]

I am using a form decorator and I can't get my button to center. Here is my code.
    <table width="350px">
        <tr>
            <td>
                <center>
                    <span class="adminTableLabel">Description</span>
                    <asp:TextBox ID="descInput" runat="server" Height="100px" Width="200px"></asp:TextBox>
                    <asp:RequiredFieldValidator runat="server" ID="descValidator" ControlToValidate="descInput"></asp:RequiredFieldValidator>
                </center>
            </td>
        </tr>
        <tr>
            <td>
                <center>
                    <span class="adminTableLabel"></span>
                    <asp:Button ID="addEvent" runat="server" Text="Add" />
                    <br />
                    <asp:Label ID="output" Text="" runat="server"></asp:Label>
                </center>
            </td>
        </tr>
    </table>
When I take out the form decorator it centers fine. I'm sure it has something to do with the css the form decorator uses. How can I center this button? Thanks,

[Georgi Tunev]

Hello,

I ran your code with and without RadFormDecorator, but I don't see difference in the position of the button (see attached screenshot). Could you please open a support ticket and send us a sample page along with all the CSS used in it that reproduces the problem? This will allow us to provide you with the most appropriate solution.


Sincerely yours,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Web Services]

I ended up nesting it into another table that was centered and that centered the button. Not the best approach but it works. Is there anyway I can access the css that these buttons use from the form decorator. If not access them, is there a way I can override any properties? Here is the code I used in case anyone else has the same problem.

<table width="350px">
        <tr>
            <td>
                <center>
                    <span class="adminTableLabel">Description</span>
                    <asp:TextBox ID="descInput" runat="server" Height="100px" Width="200px"></asp:TextBox>
                    <asp:RequiredFieldValidator runat="server" ID="descValidator" ControlToValidate="descInput"></asp:RequiredFieldValidator>
                </center>
            </td>
        </tr>
        <tr>
            <td>
                
                    <span class="adminTableLabel"></span>
                    <center>
                            <table><tr><td><asp:Button ID="addEvent" runat="server" Text="Add" /></td></tr></table>
                    <br />
                    <asp:Label ID="output" Text="" runat="server"></asp:Label>
                </center>
            </td>
        </tr>
    </table>

[Georgi Tunev]

Hi,

You could use IE Dev Toolbar / Firebug or a similar tool to examine what are the classes applied to a particular element and to override them if needed by using the !important directive.
for example:
.myclass
{
 border: 1px solid red !important;
}



Regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Web Services]

So I located the css tags it is using. I know I have the correct one because when I added some padding it made the button bigger. However, it still won't center. This is what I am trying

 

.radfdInnerSpan{

 

 

text-align: center !important;

 

 

margin-left: auto;

 

 

margin-right: auto;

 

}
Here is actual html that is generated

<table width="200">

<tbody>

<tr>

</tr>

<tr>

<td>

<center>

<a id="Skinnedctl00_MainContent_addCategory" class="radfdSkinnedFormButton radfd_Web20" href="javascript:void(0)" title="Add">

<span class="radfdOuterSpan">

<span class="radfdInnerSpan">Add</span>

</span>

</a>

<input id="ctl00_MainContent_addCategory" class="radfdRealInputButton" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$addCategory", "", true, "", "", false, false))" value="Add" name="ctl00$MainContent$addCategory"/>

<br/>

<span id="ctl00_MainContent_output"/>

</center>

</td>

</tr>

</tbody>

</table>
Any other ideas, I'm left to scratching my head. Thanks,

[Georgi Tunev]

Hi,

To be able to help we need to have a better view over your exact setup and layout. That is why I would like to ask you again to open a support ticket and send us a sample page along with all CSS used in it that reproduces the problem. We will check it and do our best to help.


Regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.