multiple dropdowns on a page with different styling about angular-dropdowns HOT 2 CLOSED

This is more of a CSS question than an issue with my module. You can certainly style dropdowns individually by just using CSS that targets the generated HTML from the directive.

For instance, you could target the dropdown pieces by giving specifying another class name, or by targeting based on parent container.

<!-- you can target via .aClass on this dropdown -->
<div class="aClass" dropdown-select="ddSelectOptions" dropdown-model="ddSelectSelected"></div>

<!-- you can target this dropdown via its parent -->
<div id="aParentContainer">
  <div dropdown-select="ddSelectOptions" dropdown-model="ddSelectSelected"></div>
</div>

.aClass.wrap-dd-select {
  background-color: green;
}

#aParentContainer .wrap-dd-select {
  background-color: purple;
}

from angular-dropdowns.

When I do the first approach .aClass .wrap-dd-menu , I get changes in the
button, but the dropdown menu does not change from that set in
angular-dropdowns/css/dropdowns.css for .wrap-dd-menu You set
width:200px; I changed it to width:80px; and for the second button
dropdown on the same page, I want it to be width:100px;

For this second button, I used a different class="btn-post" and my HTML is:

                <div id="postBox" class="floatingSection"

ng-controller="postButtonController">
Post Button

In my own external CSS style sheet, I have this CSS, but none of it takes
effect, i.e., background and width do not take effect

        .btn-post .wrap-dd-menu{
            /* Size and position */
            background:#eaaa32; /* apricot tan */
            position: relative;
            width: 100px; /* original clone 200px; 75px is OK */
            margin: 0 auto;
            padding: 10px;
        }

I've tried several things (including the above CSS in your dropdowns.css),
and it appears to me that the dropdown styling is set only once by this
line in the dropdownMenu directive

$wrap = angular.element("

As best I can tell, the button styling can be changed, but the dropdown
menu cannot.

On Mon, Jun 30, 2014 at 2:52 PM, James Seppi [email protected]
wrote:

This is more of a CSS question than an issue with my module. You can
certainly style dropdowns individually by just using CSS that targets the
generated HTML from the directive.

For instance, you could target the dropdown pieces by giving specifying
another class name, or by targeting based on parent container.

.aClass.wrap-dd-select {
background-color: green;}
#aParentContainer .wrap-dd-select {
background-color: purple;}

—
Reply to this email directly or view it on GitHub
#18 (comment)
.

Mike Laird

12 Arbor Creek Drive, Pittsford, New York 14534
[email protected]

". . . remembering on both sides that civility is not a sign of weakness,
and sincerity is always subject to proof. Let us never negotiate out of
fear, but let us never fear to negotiate." - John F. Kennedy

from angular-dropdowns.