Martin Horst
Top achievements
Rank 1
Rank 1
Martin Horst
asked on 30 Aug 2013, 12:08 PM
Hi,
today I switch to the Q2 2013 version and in many styles (like Office2010Blue) the text inside the button isn't centered correctly anymore. I looked into the rendered HTML code and I found the following style inside the button:
style="width:100%;padding-left:0;padding-right:0;padding-left:4px;"
I'm not sure if this is a design bug or a feature or if I have to do something to change this. But the two padding-left styles look a little bit strange for me.
So, is there any way to center the text correctly again!?
Best regards
Martin Horst
today I switch to the Q2 2013 version and in many styles (like Office2010Blue) the text inside the button isn't centered correctly anymore. I looked into the rendered HTML code and I found the following style inside the button:
style="width:100%;padding-left:0;padding-right:0;padding-left:4px;"
I'm not sure if this is a design bug or a feature or if I have to do something to change this. But the two padding-left styles look a little bit strange for me.
So, is there any way to center the text correctly again!?
Best regards
Martin Horst
8 Answers, 1 is accepted
0
Hello,
From you description I can't understand what the problem should be. It would be nice if you could provide the code you are using to set you button and a screenshot showing the problem.
I have checked the Button demo page and as I could see the text is centered as expected.
Do you have any custom styles applied to the button that could change something inside the button? If yes, try to remove them and check if everything is fine.
Regards,
Bozhidar
Telerik
From you description I can't understand what the problem should be. It would be nice if you could provide the code you are using to set you button and a screenshot showing the problem.
I have checked the Button demo page and as I could see the text is centered as expected.
Do you have any custom styles applied to the button that could change something inside the button? If yes, try to remove them and check if everything is fine.
Regards,
Bozhidar
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Princy
Top achievements
Rank 2
Rank 2
answered on 02 Sep 2013, 06:58 AM
Hi Martin,
Unfortunately I couldn't replicate this issue at my end. You can try the following CSS to set the text position to center.
CSS:
Thanks,
Princy.
Unfortunately I couldn't replicate this issue at my end. You can try the following CSS to set the text position to center.
CSS:
<style type="text/css"> .RadButton_Office2010Blue .rbDecorated { text-align: center !important; }</style>Thanks,
Princy.
0
Martin Horst
Top achievements
Rank 1
Rank 1
answered on 02 Sep 2013, 09:08 AM
Hi,
I did the following test: I created an simple aspx webpage and I only added the RAD scriptmanager and a single RadButton Control:
<telerik:RadButton ID="radButtonLogin" runat="server" Text="Anmelden" Width="120px" onclick="radButtonLogin_Click"></telerik:RadButton>And here is the resulting html:
<span id="ctl00_AdeleContent_radButtonLogin" class="RadButton RadButton_Office2010Blue rbSkinnedButton" style="display:inline-block;width:120px;"><input class="rbDecorated" type="button" name="ctl00$AdeleContent$radButtonLogin_input" id="ctl00_AdeleContent_radButtonLogin_input" value="Anmelden" style="width:100%;padding-left:0;padding-right:0;padding-left:4px;" /><input id="ctl00_AdeleContent_radButtonLogin_ClientState" name="ctl00_AdeleContent_radButtonLogin_ClientState" type="hidden" /></span> </div>As you can see there is still the "padding-left:4px" style insinde. I going to try the given css entry, maybe this will fix my problem.
Best regards
Martin
0
Martin Horst
Top achievements
Rank 1
Rank 1
answered on 02 Sep 2013, 10:42 AM
Hi,
i added a workaround in my css file and now the text ist centered correctly again.
I used a modified version from "Princy" css exampled:
But I still would like to know what is causing this problem.
Best ragards
Martin
i added a workaround in my css file and now the text ist centered correctly again.
I used a modified version from "Princy" css exampled:
.RadButton_Office2010Blue .rbDecorated{ padding-right: 4px !important;}But I still would like to know what is causing this problem.
Best ragards
Martin
0
Hi,
I have tested your scenario and I could confirm the bug. I tried three different approaches and found the problem occurs only when you set width property to the button. If you use CssClass and styles the problem does not exist - bellow are the three button from my test:
As you could see, for some reason, when you apply width property, the button applies to the inner input element some inline styles that overrides the the base styles for the button. We made some changes in the styles and rendering few releases ago, and it could be an old behavior that was relevant for the old rendering and left unchanged accidentally. I will check that with our developers to inspect why exactly the inline styles are appeared and should the be removed.
Regards,
Bozhidar
Telerik
I have tested your scenario and I could confirm the bug. I tried three different approaches and found the problem occurs only when you set width property to the button. If you use CssClass and styles the problem does not exist - bellow are the three button from my test:
<!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></title> <style type="text/css"> .button-width { width: 120px; } .button-width .rbDecorated { width: 100%; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadSkinManager runat="server" ShowChooser="true"> </telerik:RadSkinManager> <br /> <br /> <telerik:RadButton ID="radButtonLogin" runat="server" Text="Anmelden" CssClass="button-width"> </telerik:RadButton> <br /><br /> <telerik:RadButton ID="radButton1" runat="server" Text="Anmelden"> </telerik:RadButton> <br /><br /> <telerik:RadButton ID="radButton2" runat="server" Text="Anmelden" Width="120"> </telerik:RadButton> </form></body></html>As you could see, for some reason, when you apply width property, the button applies to the inner input element some inline styles that overrides the the base styles for the button. We made some changes in the styles and rendering few releases ago, and it could be an old behavior that was relevant for the old rendering and left unchanged accidentally. I will check that with our developers to inspect why exactly the inline styles are appeared and should the be removed.
Regards,
Bozhidar
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Martin Horst
Top achievements
Rank 1
Rank 1
answered on 03 Sep 2013, 07:28 AM
Hi,
thanks for your answer. I can live with the padding-right workaround i added to the css. It's good to know that this issue will be addressed in future releases. Thanks again for your help!
Best regards
Martin
thanks for your answer. I can live with the padding-right workaround i added to the css. It's good to know that this issue will be addressed in future releases. Thanks again for your help!
Best regards
Martin
0
Ludek
Top achievements
Rank 1
Rank 1
answered on 09 Apr 2014, 01:33 PM
Hi,
did you solve this issue somehow on Telerik side?
I have Q1 2014 installed and the bug still occurs...
did you solve this issue somehow on Telerik side?
I have Q1 2014 installed and the bug still occurs...
0
Hello,
Thanks for contacting Telerik support. The issue is not fixed yet as it was considered as a minor one and we are working on issues that could be blocking and are with a higher priority. Of course it is still in our to do list and it will be fixed together with several other minor issues for RadButton. This is the issue feedback item where you could track its status and to vote about it and this way to increase the item priority.
Regards,
Bozhidar
Telerik
Thanks for contacting Telerik support. The issue is not fixed yet as it was considered as a minor one and we are working on issues that could be blocking and are with a higher priority. Of course it is still in our to do list and it will be fixed together with several other minor issues for RadButton. This is the issue feedback item where you could track its status and to vote about it and this way to increase the item priority.
Regards,
Bozhidar
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.