I had a similar issues.
Indeed is seems that Exhibit is injecting its own css when it builds
and renders its DOM elements.
I had success defining the facet with a unique ID and then defining
the css rules for that selector.
as in
<div id="myfacet"
ex:role="facet"
ex:showMissing="false"
ex:scroll="false"
ex:expression=".city"
ex:facetLabel="City">
</div>
#myfacet {
position: absolute;
left: -20px;
padding-right: 10px;
margin: 0;
}
Although i haven't completed looking into it this appears to work.
I believe it works because of some order of evaluation rules that CSS
follows,
which apparently allows id selectors to override class selectors.
But I have not verified the details and so cannot yet give you a
strong general explanation.
Another approach ...
In my case I found the Tile view used formatting tied to .exhibit-ui-
protection class to set margins and padding to 0,
so elements of sequential tiles had no spacing between them.
I created a lens and gave it a class name like "my-lens" then used a
css selector like this to apply the desired style rules
.exhibit-ui-protection div.my-lens { .... my rule .... }
and that seems to override the override, so to speak.
Hope that gives you something to work with.
Charles
On Oct 6, 2:32 pm, Michael JB <[EMAIL PROTECTED]> wrote:
> First off, thanks to the folks that put together Exhibit...i'm loving
> it! :)
>
> One thing I'm having problems with, though, is styling the elements
> that make up the facets and views. Hopefully you can help me with a
> particular problem.
>
> I have an exhibit with a facet defined like:
>
> <div
> ex:role="facet"
> ex:showMissing="false"
> ex:scroll="false"
> ex:expression=".city"
> ex:facetLabel="City">
> </div>
>
> When the facet shows up, for each selection it has space for the check
> box on the left and the city on the right. The space for the check
> box is blank and off color from my background (i can deal with that)
> but it covers the label for the city.
>
> What I'd like to do is pad either the check box space on the right or
> the label on the left.
>
> I was able to find the element (using Google Chrome) named
> "div.exhibit-flowingFacet-value-checkbox". I added that element to my
> style sheet like this:
>
> div.exhibit-flowingFacet-value-checkbox {
> position: absolute;
> left: -20px;
> padding-right: 10px;
> margin: 0;
>
> }
>
> When i reloaded the page, i still got the same thing; the check box
> was covering the label.
>
> Now, my style definition may be wrong, but when I went back to inspect
> the element, Chrome showed that my style had been overridden by the
> default Exhibit style
> athttp://static.simile.mit.edu/exhibit/api-2.0/exhibit-bundle.css.
>
> My question is, how can I modify styles for Exhibit elements without
> having them overridden by the default styles?
>
> Thanks for your help!
>
> Michael JB
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en
-~----------~----~----~----~------~----~------~--~---
