2012年3月24日土曜日

Rounded Corners & CSS Margin

I am using the rounded corners control on a panel control. I have the margin of the panel defined with CSS. This causes a gap the size of the margin setting between the panel and the Rounded Corner effect. Am I doing something wrong or is this a bug with the extender?

That's the way the control works unfortunately. If you look at the docs it tells you that it adds to the height of the of the control it is extending to achieve the rounding effect which makes fairly worthless for anything that requires headers for example...

Hopefully MS can figure out a better way to do this in the future, but being an extender I'm not sure that there really is a better way to do this since the control has to work with an existing control and its size parameters.

+++ Rick --


--
Rick Strahl
West Wind Technologies
www.west-wind.com
www.west-wind.com/weblog

<JasonRCS> wrote in messagenews:1287524@.forums.asp.net...

I am using the rounded corners control on a panel control. I have the margin of the panel defined with CSS. This causes a gap the size of the margin setting between the panel and the Rounded Corner effect. Am I doing something wrong or is this a bug with the extender?

http://forums.asp.net/thread/1287524.aspx

This ends up being a mutually exclusive situation unfortuntely. If someone has an idea for a solution I amall ears.

The only way I know of doing the rounded corners without custom bitmaps is to add elements to the control. Let's call them adornments.

So, you can either add the elements outside of the control you're targeting or inside.

If you add them outside it falls down quickly. If you have any positioning set on the thing you are targeting (relative or absolute), then the adornments get left behind. So that's a major problem.

If you add them inside the control (which is what we do), it generally works better, but there are combinations of styles that we can't handle, margin being one of them.

In most cases you can accomplish what you need to by composition - meaning if you wrap another div/panel around the outside of your object and apply the rounded cornders to that one or vice-versa you can make it do what you want.


Thank you both for your comments. I just wanted to make sure that isthe way it is supposed to work. I will get by with using an embeddeddiv for now.

I am not aJavaScript person, but would it be possible for the control tomodifythe border property of the element? This would allow the modificationto be reside between the padding and margin attributes of an element. Just throwing ideas out there. I know the Mozilla browsers support a proprietary attibute of moz-radius to do this with borders.

Thank you agian for your help!

Jason

JavaScript
java script
java-script
conscript
Edit...
Ignore all
Add to dictionary

modify
mortify
motif
codify
modding
Edit...
Ignore all
Add to dictionary


Sorry for the extra junk at the bottom... Google Spell Check gone bad!

The modifications are just a bunch of added DIVs, so they can't live in that zone unfortunately.

If the embedded DIV trick works for you, stick with that.


Same problem here - although I have previously managed to set up CSS only rounded corners which do not suffer from this problem, so I'm going to compare and contrast with the extender, to see if I can fix it up.

Should you happen to want a work-around in the meantime, e.g. my example, where I wanted "margin-top: 10px" on a div with rounded corners (so that there was a blank space between two divs which are one above the other), you can wrap an extra div around your panel-with-rounded-corners, and put the margin on that (extra) div - leaving the rounded corners as is.

Cheers,

Matt

0 件のコメント:

コメントを投稿