I have a list group that holds a bunch of attributes, but when I clarify that the last element within that group hold a margin of 0, the output doesn't match.
The Salesforce HTML:
<aura:iteration items="{!v.IdeasList}" var="idea">
<li class="list-group-item">
<a href="{!v.ideaDetailPath + idea.Id }" class="anchorLink">
<div class="prodname">{!idea.Title}</div>
</a>
<div class="ideaInfo">
<span class="points">{!idea.VoteTotal} points </span>
<span style="padding-right:24px;">
<span class="status">
{!idea.Status}
</span>
</span>
<span class="createdDate"><ui:outputDate value="{!idea.CreatedDate}"/></span>
<!--span class="slds-avatar slds-avatar_circle slds-avatar_small">
<img src='{!idea.CreatorSmallPhotoUrl}'/>{!idea.CreatorName}</span>
<span class="slds-text-title_bold">
<a class="profileName" href="javascript:void(0)"
id="profile-link"
data-createdByValue="{!idea.CreatedById}"
onclick="{!c.openProfileWindow}">
{!idea.CreatorName}</a></span-->
<a class="slds-text-title_bold profileName" id="profile-link" data-createdByValue="{!idea.CreatedById}" href="javascript:void(0);" onclick="{!c.openProfileWindow}">
<span class="slds-avatar slds-avatar_circle slds-avatar_small slds-m-right_x-small">
<img src="{!idea.CreatorSmallPhotoUrl}"/>
</span>{!idea.CreatorName}
</a>
</div>
<div class="slds-border_bottom">
</div>
</li>
</aura:iteration>
The Salesforce CSS:
.THIS .list-group-item {
font-size: 12px;
list-style: none;
width: 100%;
margin-bottom:24px;
}
.THIS .list-group-item:last-child{
margin-bottom:0;
}
Does that mean pseudo elements (specifically last-child in this case) don't work in Salesforce Lightning CSS?
It seems that the only thing that works is :nth-last-child(2) - because for some reason, :last-child doesn't acknowledge that the last item is actually the last item.
I did a search within the HTML to check that there was no other element after the element I was hoping to edit via CSS, but there wasn't. Seems as though this is a salesforce bug? Anyway,s :nth-last-child(2) worked instead of :last-child
I want to rotate chevron when the button is clicked. So my question would be - how to do it? Should I add the whole Angular animation component and do it there or is it possible to just add rotate to just a chevron?
<a href="#" (click)="transformArrow()">Show
<span>
<label class="m-0">this</label>
<span class="glyphicons glyphicons-chevron-down" id="myElement"></span>
</span>
</a>
then I tried to add some function
transformArrow(){
let ele = document.getElementById('myElement');
ele.style.transform //And I stuck here as I need to actually access ":before" of this element and rotate it.
}
Huge thanks to trichetriche and malbarmawi for alternative, only thing that I had to change was "after" to "before" :)
My idea is:
transformArrow(e) {
let ele = document.getElementById('myElement');
ele.classList.toggle('btn-change');
}
.glyphicons-chevron-down
{
transition: $trans-1;
&.btn-change
{
&:before
{
position: relative;
display: block;
transform: rotate(180deg);
}
}
}
I really like the idea with ngClass but I like to keep most of actions in component.ts so i wanted to stay with function. Is it even good, or maybe it's better practice to do it the way malbarmawi did?
Why not do it through CSS and custom attributes ?
ele.setAttribute('data-rotate', 'true')
span#myElement[data-rotate="true"]:after {
transform: rotate(90deg);
}
You can use ngStyle directive
<a href="#" (click)="toggle = !toggle">Show
<span>
<label class="m-0">this</label>
<span [ngStyle]="{'transform': toggle ? 'rotate(180deg)':''}" class="fa fa-arrow-right"></span>
</span>
</a>
another way ngClass directive
<a href="#" (click)="toggle = !toggle">Show
<span>
<label class="m-0">this</label>
<span [ngClass]="{'flip-h': toggle}" class="fa fa-arrow-right fa-2x"></span>
</span>
</a>
or with element reference (not recommended)
<a href="#" (click)="elem.classList.toggle('flip-h')">Show
<span>
<label class="m-0">this</label>
<span #elem class="fa fa-arrow-right fa-2x" id="myElement"></span>
</span>
</a>
demo
I have a trouble to add custom logo with link to navbar if we scroll down
is class "dropdown-menu dropdown-inverse"
site: http://its-skin.upgates.com
CSS:
.secondlogo {
background-image: url(http://static.its-skin.upgates.com/m/m57daee4256187-sublogo.png);
width: 250px;
height: 54px;
margin-left: auto;
margin-right: auto;
}
here is the code full code :
<ul class="nav navbar-nav top-menu top-menu-categories">
{else}
<ul class="dropdown-menu dropdown-inverse" data-designer="d1-2-2-1">
{/if}
{foreach $tree as $category}
<li class="ct_{$category['category_id']} lev-{$level}{if $category['active']} active{/if}{if count($category['childs'])} dropdown{if $level > 1} dropdown-submenu{/if}{/if}" data-target-category="{$category['target_category_id']}">
<a href="{$category['url']}"{if $category["blank_yn"]} target="_blank"{/if} class="TopMenuLink">
{$category['name']}
{if (count($category['childs']))}
<i class="caret"></i>
{/if}
</a>
{if count($category['childs'])}
<button class="btn SubcategoriesLink"><i class="fa fa-chevron-right"></i></button>
{/if}
{include #desktopMenu tree => $category['childs'], level => $level + 1, option => false, colsCount => ceil(count($category['childs'])/$itemsInCol)}
</li>
{/foreach}
</ul>
You could add another list element at start of your ul which holds the link
<ul class="nav navbar-nav top-menu top-menu-categories">
<!-- New Element with class logolink -->
<li class="ct_29 lev-1 logolink">
<a href="http://its-skin.upgates.com/" class="TopMenuLink">
Link
</a>
</li>
<li class="ct_29 lev-1" data-target-category="29">
<a href="http://its-skin.upgates.com/krasa-it-s-skin" class="TopMenuLink">
Krása It's Skin
</a>
</li>
...
</ul>
Then just use css to put your logo in front of it
.logolink {
background-image: url(http://placehold.it/16x16/ff0000);
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust to your logo size*/
}
Example:
In case you want just a clickable logo image without text, wrap it inside the hyperlink <img src="#" /> and forget about the background-image in css.
EDIT:
If you want a fade-in effect when a user scrolls your page have a look at these two excellent jquery libraries which provide this functionality.
http://scrollmagic.io/
http://johnpolacek.github.io/scrollorama/
Alternative you can fade in with some jquery code. Therefore hide the logo (element) by setting it´s opacity to 0, detect the viewport scrolling and fade it in at some point. Find a working example here:
https://jsfiddle.net/mwtebtw9/1/
Code taken from: http://www.ordinarycoder.com/jquery-fade-content-scroll/
I have the following structure within a bootstrap document -
<div class="col-lg-6 col-sm-6>
<ul class="stdULGrey st_tabs_ul">
<li class="st_li_first st_li_active">
<a href="#view_1" class="st_tab st_tab_first st_tab_active">
<span class="icoMore icoA"></span>
<span class="tabText">WANT TO KNOW MORE?</span></a>
</li>
<li>
<a href="#view_2" class="st_tab">
<span class="icoWhereTo icoA"></span>
<span class="tabText">WHERE TO FIND US?</span>
</a>
</li>
</ul>
The span element - icoMore contains a background image - which I'd like to respond to the full width of thebootstrap parent - I have tried the following code -
.icoMore{background:url(../img/logos%20and%20icons/Wanttoknow_Icon_Off.png) no-repeat; min-width:100%; min-height:auto; display:block; }
But it displays at zero width and height - can anyone advise a solution?
Add display: block to span. It should be enough.
You'll need to add any character into your <span>, even a space, like:
<span> </span>
Check this fiddle:
http://jsfiddle.net/dimaspante/5j6vt0mk/
First, I'm aware of this posts:
Activating bootstrap dropdown menu on hover
Bootstrap Dropdown with Hover
How to make twitter bootstrap menu dropdown on hover rather than click
And others, but still not found the correct solution yet, here's what I did so far.
first I used the is-open attribute from the angular-bootstrap dropdown directive like this:
<span class="dropdown" dropdown is-open="status.isopen">
<a
href
class="dropdown-toggle"
ng-mouseenter="status.isopen = true"
ng-mouseleave="status.isopen = false"
>
hover me for a dropdown with angular-bootstrap
</a>
<ul
class="dropdown-menu"
>
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
that seemed to work but 2 bugs appeared:
the first is when dropdown-toggle element is clicked the dropdown menu is gone clicking again wont bring it back you have to mouseleave then mouse enter the dropdown-tooggle to get the dropdown-menu back.
the second is a css/html problem.
Usually the regular css solution for a dropdown is like this:
<a class="css-dropdown">
hover here with css.
<div class="css-dropdown-menu">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
</div>
</a>
Notice the dropdown-menu now is inside the dropdown-toggle element which mean when moving with the mouse from the dropdown-toggle to the dropdown-menu it's moving from parent to child, so basically we still hovering over the dropdown-toggle since we are in it's child, which mean the dropdown-menu will still be visible, on other hand, the bootstrap dropdown works with the click event so having the dropdown-menu as a child of the dropdown-toggle is not needed, but now when someone wants to change the behavior to mouseenter/hover once the mouse leaves the dropdown-toggle the dropdown-menu disappear so we no longer have access to the dropdown-menu elements this is visible in this plunker
To fix the first bug, I just removed the dropdown directive then replaced the is-open with ng-class directive like this.
Change this:
<span class="dropdown" dropdown is-open="status.isopen">
to this:
<span class="dropdown" ng-class="{'open': status.isopen}">
The rest stays the same plunker that fixed the first bug.
The second bug is tricky, since the dropdown-menu is no longer a child of the dropdown-toggle the hover effect wont last while moving from the toggle to the menu, so I did this.
Changed this:
<ul class="dropdown-menu">
to this:
<ul
class="dropdown-menu"
ng-mouseenter="status.isopen = true"
ng-mouseleave="status.isopen = false"
>
That did it but another bug appeared when clicking the dropdown-menu item it stays open, so I kept hacking by doing this.
changed this:
<li ng-repeat="choice in items">
to this:
<li ng-repeat="choice in items" ng-click="status.isopen = false">
That give me the required behavior plunker.
That said, this is not a good solution since a lot of directives are involved here for a simple visual effect, the last plunker I provided contains a css solution with no Bootstrap or AngularJS involved, though it is the required behavior it is not the required html structure or visual result, what I need is to have a space between the dropdown-toggle and the dropdown-menu not a padding of the toggle element just an empty space, which make the css solution not valid in this situation.
So, my question is there a better way of doing this without adding a new plugin/library more clean and easily reusable solution for the hover drop down menu?
First, have the toggling on the top-most parent element (in this case, the <span>)
<span class="btn-group" dropdown is-open="status.isopen" ng-mouseenter="status.isopen = true" ng-mouseleave="status.isopen = false">
<a class="btn btn-primary dropdown-toggle" dropdown-toggle>
Button dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</span>
This will allow the behavior you wanted - while still allowing clicking to show/hide the menu ;-)
However there's an annoyance: if you move the mouse cursor slower and pass the small gap between the toggle and menu, it will hide the menu.
So secondly, add a small CSS to remove the gap
.dropdown-menu {
margin-top: 0;
}
See the action in this plunker.
I know you want a solution without adding a new plugin/library, but you (or others seeking for this behavior) might want to try using No Close from Dropdown Enhancements lib to keep the dropdown open even after clicking in one of its options:
Do not close the menu on click on radio add class .noclose.
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
Checked option <span class="caret"></span>
</button>
<ul class="dropdown-menu noclose">
<li>
<input type="radio" id="gr1_1" name="gr1" value="1">
<label for="gr1_1">Option 1</label>
</li>
<li>
<input type="radio" id="gr1_2" name="gr1" value="2">
<label for="gr1_2">Option 2</label>
</li>
<li>
<input type="radio" id="gr1_3" name="gr1" value="3">
<label for="gr1_3">Option 3</label>
</li>
</ul>
</div>
Also add a CSS solution for the hovering problem:
.btn-group:hover .dropdown-menu.noclose {
display: block;
}
.dropdown-menu.noclose {
margin-top: 0px;
}
And, of course, don't forget to import the libs:
<script src="./js/dropdowns-enhancement.min.js"></script>
<link href="./css/dropdowns-enhancement.css" rel="stylesheet"\>
In your case I suggest you to study the Dropdown Enhancements's source code to see how it works and maybe find a more suitable solution.
Try adding this line to your css:
.btn-group:hover>.dropdown-menu { display: block; margin-top: 0; }
You'll have to remove your is-open, ng-mouseenter and ng-mouseleave directives.
Below is the solution I came up with, while working on the same issue.
I used a simple custom directive that:
binds the mouseenter and mouseleave events to the dropdown in order correctly to show/hide the menu.
dynamically adds a custom CSS class to the dropdown menu in order to prevent the menu from disappearing when moving the cursor from the button to the menu. Note that this solution has the advantage of not removing the visual gap between the button and menu.
prevents the menu from disappearing when the button is clicked.
The CSS rule uses a before pseudo-element to fill the gap between the button and the menu. I added the border property which can be uncommented to easily get a visual feedback.
.dropdown-hover-menu::before {
content: '';
position: absolute;
left: 0;
width: 100%;
top: -3px;
height: 3px;
/*border: 1px solid black;*/
}
The HTML structure of the snippet is based on the available examples in the dropdown section of the angular-ui bootstrap documentation
angular.module('app', ['ui.bootstrap'])
.directive('dropdownHover', function() {
return {
require: 'uibDropdown',
link: function(scope, element, attrs, dropdownCtrl) {
var menu = angular.element(element[0].querySelector('.dropdown-menu')),
button = angular.element(element[0].querySelector('.dropdown-toggle'));
menu.addClass('dropdown-hover-menu');
element.bind('mouseenter', onMouseenter);
element.bind('mouseleave', onMouseleave);
button.bind('click', onClick);
function openDropdown(open) {
scope.$apply(function() {
dropdownCtrl.toggle(open);
});
}
function onMouseenter(event) {
if (!element.hasClass('disabled') && !attrs.disabled) {
openDropdown(true);
}
};
function onMouseleave(event) {
openDropdown(false);
};
function onClick(event) {
event.stopPropagation();
}
scope.$on('$destroy', function() {
element.unbind('mouseenter', onMouseenter);
element.unbind('mouseleave', onMouseleave);
button.unbind('click', onClick);
});
}
};
});
.dropdown-hover-menu::before {
content: '';
position: absolute;
left: 0;
width: 100%;
top: -3px;
height: 3px;
/*border: 1px solid black;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="app">
<div class="btn-group" uib-dropdown dropdown-hover>
<button type="button" class="btn btn-primary dropdown-toggle">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu">
<li role="menuitem">Action
</li>
<li role="menuitem">Another action
</li>
<li role="menuitem">Something else here
</li>
<li class="divider"></li>
<li role="menuitem">Separated link
</li>
</ul>
</div>
</div>