CODEWITHSUNDEEP
csswidget
dannyroa
dannyroa

Reputation: 5571

Javascript Widget Affecting Style of the Page it is embedded in

I'm currently developing a widget that can be embedded within a page. However, when embedded, it affects the style (font, text, layout, etc.) of the page it is embedded in.

I wonder how Clearspring and other widget frameworks encapsulate their widgets so as not to affect the embedding page.

Thanks.

Upvotes: 5

Views: 2702

Answers (1)

alex
alex

Reputation: 490667

Make your widget, say under one div with a unique Id (or class if there will be multiple) that is least likely to clash with others on the host page. A good example might be #company-widjet-name. See how jQuery UI does it (.ui-widget input).

Then you might need to perform a sort of localised reset, to avoid the parent page's CSS from stuffing up your design. Modify something like Eric Meyer's reset to suit. Please avoid the #uniqueId * { padding: 0, margin: 0 } as it can cause headaches.

As long as you do

#uniqueId a {
    property: value;
}

The specificity should be strong enough to style the elements correctly without letting the host page's CSS from changing it unintentionally.

Upvotes: 6

Related Questions