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

circular select button

5 Answers 33 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Nebras
Top achievements
Rank 1
Nebras asked on 13 Mar 2011, 03:47 PM
Hello, Telerik team
I want to style the select button to be circular containing an image
I used this code
  
.patients .t-select
 {
 background: url('../../Content/Images/select.jpg');
-moz-border-radius:200px;
 -webkit-border-radius:200px;
 }
the image appeared but the button still the same
why?

5 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 14 Mar 2011, 07:38 AM
Hello Nebras ,

The "Select" button (as most other butons in the Grid) consists of two elements. The outer element has a "t-button" CSS class and carries the button styles. The inner element has a "t-icon t-something" CSS class and carries the icon styles. Currently you are applying the border-radius on the inner element, while you should be applying them to the outer element, because it has the borders.

Note that pure-CSS rounded corners are not supported in IE.

Regards,
Dimo
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Nebras
Top achievements
Rank 1
answered on 14 Mar 2011, 08:12 AM
It works , Many Thanks
0
Nebras
Top achievements
Rank 1
answered on 14 Mar 2011, 09:38 AM
More question please,
attached is my button, I want to minimize its size to be 16px(ie its image size) but this is the minimum size the button can reach , how can i minimize the size to 16px

I used this styling

 
.t-button { 
-webkit-border-radius:
800px;
-moz-border-radius: 800px ;
width: 16px;
}
0
Dimo
Telerik team
answered on 14 Mar 2011, 10:25 AM
Hi Nebras,

You should remove (or override) any padding style that is applied to the outer button element, as well as make sure that the width is applied as expected.

I strongly recommend you to use Firebug to check what styles are applied to a given element. In addition, you should be familiar with the concept of CSS specificity.

CSS Specificity Things You Should Know About

Cascading Order (W3C CSS Standard)

CSS: What Happens When a Conflict Occurs


Greetings,
Dimo
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Nebras
Top achievements
Rank 1
answered on 15 Mar 2011, 02:41 PM
Thanks, Dimo
my solution :
 
.t-grid .t-grid-action
{border:none;
 min-width: 0;
 padding: 0;
 min-height:0;
height:16px;
}
.t-grid .t-grid-action .t-icon {
 background: transparent url('../../Content/Images/select.jpg');
margin: 0;
height:16px;
 border:none;
}
.t-button { border:none;
-webkit-border-radius: 500px;
-moz-border-radius: 500px ;
}
Note: circular buttons are not supported in IE
Tags
Grid
Asked by
Nebras
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Nebras
Top achievements
Rank 1
Share this question
or