I want to display a variable hex color code into the border property of my li tag. But every time I try the style property doesn't appear at all in the browser. Heres part of the code
#if(Count($user->groups))
<ul class="list-group">
#foreach($user->groups as $group)
<li class="list-group-item" style = "border-left: 4px solid {{ $group->colors[0]->hex }} !important;">{{ $group->name }}</li>
#endforeach
</ul>
The $user is the logged in user property which has a belongsToMany relationship with groups. The groups also has a belongsToMany relationship with colors. So i'm trying to get the users groups displayed as li tags. And then color the border-left of each list with the associated group color.
Related
I'm trying to change the color of a span when a link is clicked in order to indicate that it's checked. This must work in the form of a radio button, meaning that the color must disappear if another link is clicked (checked). I tried various methods using only html and css, but unfortunately I never managed to get it to work using :focus. At the moment, when I click on one of the filters there is no indication that one of the categories has been activated, heavily impacting the UX. I believe that this can be achieved using ngClass in angular, however, I'm really struggling to understand how this works. Any help would be really appreciated.
HTML:
<div class="checklist categories">
<ul>
<li><a data-action="filter-link" (click)="changeCategory(null)"><span></span>All</a></li>
<li><a data-action="filter-link" (click)="changeCategory('House Favourites')"><span></span>House Favourites</a></li>
</ul>
</div>
The styling of the span forms a small checkbox.
u can use ngClass Demo
in css create your class and write which css you want
.active-link span{background-color:green;}
in html create ngClass for each list item
<ul>
<li><a data-action="filter-link" [ngClass]="{'active-link' : menus.allMenu}" (click)="changeCategory(null,'allMenu')"><span></span>All</a></li>
<li><a data-action="filter-link" [ngClass]="{'active-link' : menus.houseMenu}" (click)="changeCategory('House Favourites','houseMenu')"><span></span>House Favourites</a></li>
</ul>
then in ts create model for menus
menus={allMenu:false,houseMenu:false}
with function first initialize it then change clicked one
changeCategory(el,event){
this.menus.allMenu=false;
this.menus.houseMenu=false;
this.menus[event]=!this.menus[event];
}
I have a smidge of custom code on my Squarespace site. I know this isn't the Squarespace forum, but I'm blanking on how to target just one specific element in my custom CSS.
So here's the site: http://www.roboticsrookie.com/
I've tried putting #main-navigation a.folder {padding: 0px}; in my sitewide CSS, but it's proven to be ineffective. Any tips would be greatly appreciated.
The problem seems to be that Squarespace generates an empty navigation link that has padding, but I figure out how to get rid of the specific element's padding.
Screen shot
It's not "padding" it's an anchor tag, probably designed to hold an icon for drop down menus.
Remove the empty anchor tag there if possible.
<li aria-haspopup="true" class="folder-collection folder">
<!-- < this anchor is the space -->
Reviews
<span class="delimiter">/</span>
<div class="subnav">
<ul>
<li class="page-collection">Robotics Reviews</li>
<li class="page-collection">Book Reviews</li>
<li class="blog-collection">Reviews</li>
</ul>
</div>
</li>
Or add CSS :
li.folder-collection.folder > a:nth-child(1) { display: none;}
This should remove that first empty anchor.
You're css selector was incorrect. #main-navigation a.folder is looking for an anchor tag with the class "folder".
In other words <a class="folder" href="#"></a>.
What you have is a list item with the class folder and an anchor tag within that list item. Or <li class="folder-collection folder"></li>.
You can't (easily) target that specific anchor because there's nothing unique about it. There's no class or id apples to the anchor and there are other anchors within that list item. So you need to use more specific selectors, such as nth-child, to select it.
In my Angular2 project I'm trying to implement a searchbox with a resultbox appearing like in Google. That's what I got and it works, but unfortunately when you search something and you press "key down" or "key up" the search result in the resultbox are not highlighting like in Google.
That's my code:
<input type="search" class="form-control">
// resultbox
<div>
<ul>
<li *ngFor="#item of items">{{ item.text }}</li>
</ul>
</div>
Note: "items" is the search result list, which works! The results are finally showing up.
I know you can put in "<input>" a (keyup) function, but how should it mark the specific li-element in the resultbox list?
My idea was something like a index counter. When the index counter is for example 3, then the third li-element should be added with the class "searchIndex", which gives the li-element new color.
But I have no idea how I should do that. Do you have a solution how to do that? Or do yo have a better solution to solve that?
I hope you can help me.
<input (keyup)="selected--" (keydown)="selected++">
<div>
<ul>
<li *ngFor="#item of items; #i=index" [class.selected]="i == selected">{{ item.text }}</li>
</ul>
</div>
You need some special handling for selected < 0 or selected >= numResult but that should be easy when you use an event handler function instead of inline --/++. I guess you get the idea.
Update (to answer a question from the comment)
Just a little question: When I hover the mouse over the list, do you know how to remove the "selected" css property? I want it like in Google: When you use the keyUp and keyDown than the index is marked. But when you hover the mouse over it, than the selected should be removed and only the hover from the mouse should be active
<div>
<ul (mouseover)="mouseover=true"
(mouseout)="mouseover=false">
<li *ngFor="#item of items; #i=index"
[class.selected]="i == selected && !mouseover">{{ item.text }}</li>
</ul>
</div>
Add this field to the component
mouseover:boolean = false;
I have a list of categories and each category has its own label and icon on my homepage. Each category label/icon should be a unique colour.
This is easy via HTML:
<!-- ngRepeat: category in categories | orderBy:'display_priority' -->
<a ng-href="explore?category=53" ng-repeat="category in categories | orderBy:
'display_priority'" class="ui random-color item large label ng-binding ng-scope"
ng-show="hasCategory" href="explore?category=53" style="color:red";>
The UI is under development and this HTML is wiped with each UI update (regularly). Therefore, I am trying to achieve the same result via CSS.
I can change the colour of the category labels generically (i.e. make them all the same colour) with this code:
#front-page .ui.label {
color: #XYZ
}
Is it possible for me to change the colour of each label individually purely via CSS?
If the number of categories is limited then you could use a set of CSS3 nth-child pseudo classes to do this:
http://www.sitepoint.com/web-foundations/understanding-nth-child-pseudo-class-expressions/
You could also do this dynamically with JavaScript by enumerating the category DOM elements in a loop and then setting the css color of the element.
I have a threaded comment system in django and at this time i have this code to check for any related comments:
<ul>
{% if not node.is_leaf_node %}
<li>{{ children }}</li>
{% endif %}
</ul>
This works but i have a css design where every comment is in a buble shaped form so the list item icon is on the outside which seems weird and ugly. I would like to remove this icon the li creates but dont know if its possible, and if not, how do i display the proper indentation for each sub comment ? I dont seem to find anything about this on google. Can anyone point me in the right direction?
Use CSS applied to ul:
ul {
list-style: none;
list-style-type: none;
}
to hide <li> dots. You also may want to change margin and padding for <li>.
Other option is to use <div> and <span> instead of <ul> and <li> in your template (but proper CSS changes may be needed).