I know that UL and OL (even v2.0.0 TABLE) has no existence in the scroll however I wondering if there is a way (or a trick) to style these elements (UL or OL, not the LI) through class or style attributor, eg.
<ul class="..."`
<li ...
<li ...
Related
Hi,
I have this html code:
<ul>
<li>
Locations
<ul class="submenu1">
<li>London</li>
<li>York</li>
</ul>
</li>
<li>
About
<ul class="submenu2">
<li>Site</li>
<li>Contact</li>
</ul>
</li>
</ul>
I want to select all the a elements EXCEPT the ones that are children to the submenu class elements.
I tried like this:
ul li a:not([class^="submenu"] a) {background-color:darkkhaki;}
but it wont work. Whats the right selector for this case?
Thank you.
Hello dear CSS friend!
In other words, taking your example, you want to select "Locations" and "About" links but not the others.
(Kind of) dirty one
The easier to understand solution is to apply styles to all a then remove the styles to the others.
li > a {
/* Styles you want to apply */
}
[class^="submenu"] a {
/* Remove styles here */
}
It's always dirty to place styles then remove them, because it's less maintainable and a bit more heavy. But it will do the job.
Nicer solution
In your case, the submenu links are the only child of your li elements. That's why I would try to target the links that are not only child of your list item to style those, like that.
li a:not(:only-child) {
/* Your styles here */
}
For more information on :only-child pseudo class, I leave you with some reading :)
https://developer.mozilla.org/fr/docs/Web/CSS/:only-child
Don't hesitate if you have question, and have fun!
Option 1:
This will work:
ul li a {
background-color: darkkhaki;
}
ul ul li a {
background-color: transparent;
}
Just reset the styles on the elements you don't want styled.
Option 2:
If you have a container, for example a <div id="menu"> you can do:
#menu > ul > li > a {
background-color: darkkhaki;
}
ui-router offers a nifty feature for anchor tags, ui-sref-active. It adds a class when the associated route or any child route is active.
I'd like to append an element to the DOM using the same rule, e.g.:
<ul class="books" ng-controller="TreeController">
<li ng-repeat="book in books">
<a ui-sref="book({id: book.id})" ui-sref-active="active">
{{book.title}}
</a>
<!-- NG-IF BELOW IS THE CODE IN QUESTION -->
<ul class="chapters" ng-if="UI-SREF-ACTIVE">
<li ng-repeat="chapter in chapters(book.id)">
What can I replace ng-if="UI-SREF-ACTIVE" with?
I can't use the CSS adjacent-sibling rule a.active + ul { display: block; }. I must wait to create the element because chapters(book.id) must lazy-load.
I also can't use $state.is('book',{id:book.id}). It doesn't return true for child routes.
I have an app running in an iframe and it makes use of angular ui boostrap tooltips. Unfortunately if the element with the tooltip is on the edge of the iframe, the tooltip will be cutoff by the iframe. Is there any solution to this? Should I play with its position within the iframe, or the z-index value?
UPDATE
So I'm trying to override the tooltip positions (note that I an using angularjs ui bootstrap). I have 2 tooltips which each require their own positioning. I managed to change the css styles (colours and fonts) globally, but I'm having trouble targeting each one to give them unique positions. I have the following html and css:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<li tooltip="Bar">B</li>
</ul>
</div>
Tooltip "Foo" needs a different position that "Bar". So I'm trying to access the li tags using the following css, but it doesn't work.
#my-div > ul > li:nth-child(1).tooltip.top {
margin-left: 10px;
}
#my-div > ul > li:nth-child(2).tooltip.top {
margin-left: 30px;
}
Note that .tooltip.top is the bootstrap class added via the angularjs tooltip directive. I'm guessing this doesn't work because the directive is actually adding another element somewhere.
So it turns out angular will insert a div element right after the element defined as the tooltip. So in my case, when the tooltip event for A is triggered, angular inserts the new element like so:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<div><!-- tooltip for foo --></div>
<li tooltip="Bar">B</li>
</ul>
</div>
Therefore the solution I came up with was to add id's to each of my li tags:
<li id="foo-tip" tooltip="Foo">A</li>
<li id="bar-tip" tooltip="Bar">B</li>
and then access the css tooltip element like so:
#foo-tip + div {
margin-left: 25px;
}
#bar-tip + div {
margin-left: 15px;
}
I am just getting started working with AngularJS and have stumbled on combining multiple bits of content under the same element. In our previous version (using knockout/durandal) we were able to leverage "container-less syntax" to make this work but it doesn't seem like we can do the same with AngularJS.
<ul>
<li>this item comes from an ng-include</li>
<li>this item is defined statically</li>
</ul>
What I thought would work:
<ul>
<ng-include src="'thefile.html'" />
<li>this item is defined statically</li>
</ul>
Unfortunately, the resulting html includes an extra DOM layer wrapper which breaks my css - I am using a "ul > li" selector.
<ul>
<ng-include class="ng-scope" src="'thefile.html'">
<li class="ng-scope">
...
</li>
</ng-include>
<li>this item is defined statically</li>
</ul>
Attempt #2 was to include the content on the itself. It also didn't work. The static content was omitted completely:
<ul ng-include src="'thefile.html'">
<li>this item is defined statically</li>
</ul>
Is there a smarter/correct way to do this? I believe I'm looking for something similar to a "replace" property that I could use on a directive.
Thanks in advance.
If your css is the only thing that is causing you problems. Try
ul li{
color:red;
}
or
ul > li,
ul > ng-include > li{
color:red;
}
I'm creating a sitemap in a custom CMS powered by Angular.
I hide the lower levels of pages and toggle their visibility with a button. I add ng-animate to animate the "opening" of the lower levels of the sitemap.
This works fine for the <ul>, but I would rather have its child <li> enter with a longer transition-delay for every item for a nice waterfall effect and this is where I get stuck.
At first I figured simply adding a transition-delay to the <li> would be sufficient, but for whatever reason I'm even unable to add a regular transition to the <li>. I read about the -stagger class, but it never gets applied.
Markup:
<ul>
<li ng-repeat="page in data"
ng-class="{'children-visible': isVisible}"
ng-init="isVisible = false">
{{page.pagename}}
<button ng-if="page.sub"
ng-click="$parent.isVisible = !isVisible">
</button>
<ul ng-if="page.sub"
ng-show="isVisible"
ng-animate="'animate'">
<li ng-repeat="page in page.sub">
{{page.pagename}}
</li>
</ul>
</li>
</ul>
Here's a picture of the markup if it helps you, er, picture it:
If relevant, I use version 1.2.16 of both angular.js and angular-animate.js.
So, in short: How do I add a stagger/transition delay to children of an element with ng-show?