This is a migrated thread and some comments may be shown as answers.

[Solved] Buttons doesnt render correctly depending of the browser and type of control

9 Answers 94 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Alexandre Jobin asked on 20 Oct 2011, 03:29 PM

Telerik-Buttons.zip

Hi!

i would like to use your Buttons control in my project but there's a few differences in the rendering of the buttons depending of the browser that you use and also the height is differente depending of the object that you use to make the button. To do the test, i have build a simple html file with the telerik stytesheets only. You can test it by yourself with the attached file.

I will try to correct that on my side but before, i would like to know if you were in the process to correct the bug (the height should be equal for each control).

Firefox v7 (and if i remember correctly, its also on v5 and v6)
Values are taken with jquery

outerHeight = 31px for <button>
outerHeight = 29px for <a>
outerHeight = 28px for <input>
outerHeight = 29px for <div>

IE8
Values are taken with jquery

outerHeight = 29px for <button>
outerHeight = 29px for <a>
outerHeight = 29px for <input>
outerHeight = 29px for <div>

IE7 Values are taken with jquery

outerHeight = 35px for <button>
outerHeight = 32px for <a>
outerHeight = 35px for <input>
outerHeight = 29px for <div>

9 Answers, 1 is accepted

answered on 20 Oct 2011, 04:13 PM

Hello Alexandre,

The current state of the buttons' CSS is the following:

http://jsfiddle.net/dimodi/AM9VG/

It provides an acceptable level of consistency and we don't intend to modify the CSS for the time being, because the code will only becore more hackish, ugly and complicated, and the effect will be questionable, as one normally does not use different types of buttons next to one another.

Regards,
Dimo
the Telerik team

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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

answered on 20 Oct 2011, 07:07 PM

in my project, i use button & anchor side by side to submit or cancel a form. The button will submit and the anchor will have a link to another page. Or maybe you have a better idea for that?

Your stylesheet update helped me on a few things. I have corrected the IE7 rendering by adding these styles. Please note that you have to use this trick in your layout

 <html class="no-js" lang="en"> 

.ie7 button.t-button,

.ie7 input.t-button

{

line-height:1.2;

vertical-align: baseline;

}

.ie7 a.t-button

{

line-height:1.435;

}

answered on 13 Feb 2012, 08:18 PM

Dimo,

Here's the best example I can show you.

div blocks version: http://jsfiddle.net/Fmfw9/
css blocks version: http://jsfiddle.net/Fmfw9/2/

As you will see:

[button] and [input type = button] elements respect the parent div and are of same widths. That's good.
the [anchor] and [div t-button] elements are not respecting the width of their containing div. They're expanding outside their fixed width parent div
IE9 Compatibility mode - the [input type=submit] element's width is a few pixels less than [input type=button] and [button] elements

I think this is the cause of all of of my whitespace issues. Thanks for looking into this.

Alex

answered on 14 Feb 2012, 08:58 AM

Hello Alex,

Please see the updated fiddle, which shows how to correctly configure the buttons.

http://jsfiddle.net/dimodi/Fmfw9/3/

The box model for <input>s and <button>s is different from the one of <div>s and <a>s, so this should be taken into account - 100% wide <a> and <div> buttons should have their side paddings removed.

The t-button-expand CSS class is described in the documentation:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-buttons.html

Greetings,
Dimo
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

answered on 14 Feb 2012, 04:01 PM

t-button.zip

Dimo,

Thank you very much for your reply. I am now using the t-button-expand class and there are still a few width issues.

In the fiddle you provided the submit button's width is a few pixels short in IE9 compatibility mode.
I am attaching a sample project where some of the buttons don't want to respond to t-button-expand but work when width=100% is applied directly to the element. I'm using the Windows7 Telerik CSS Theme.

That's all I got. Thanks for looking into this.

Alex

answered on 15 Feb 2012, 09:49 AM

Hello Alex,

Please add the following CSS rules to your application, they are present in your version. The second one is missing due to an oversight and will be added. The first one makes no real sense, because using a <div> element for a button is unlikely in standard scenarios, so only <a> elements are expanded with a similar rule in the telerik.common.css file.

div.t-button-expand

{

display: block;

}

input.t-button-expand

{

width: 100%;

}

The submit button is not shorter, but the browser places a black border around it automatically. This cannot be avoided.

Regards,
Dimo
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>