I'm using this good script from CodyHouse to set up a filterable portfolio: http://codyhouse.co/demo/content-filter/
I'm using AngularJS to parse data via JSON and everything is fine, except for the fact that the CSS is not applied properly to the dynamically loaded elements.
You can see the differences in this image:
As you can see, the first row, which is loaded via Angular, has no css applied at all. The second row, which is already placed in the HTML, is working fine.
How is it possible? All the elements in both rows have the same CSS selectors and the same CSS rules applied.
Here you can find a Plunker: http://plnkr.co/edit/mFtMpm5CJOiPcu3tRVOj?p=preview
This is the generated markup from Angular:
<li class="mix color-1 check1 radio2 option3 ng-scope" style="display: inline-block;" ng-repeat="drawing in drawings"><img src="img/img-1.jpg" alt="Image 1"></li>
And this is the html static markup:
<li class="mix color-1 check1 radio2 option3" style="display: inline-block;"><img src="img/img-1.jpg" alt="Image 1"></li>
This is the css applied:
.cd-gallery ul { text-align: justify; }
.cd-gallery li { width: 23%; }
There is absolutely no difference between them and I'm getting a bit crazy on this. It's the first time that I get issue with css applied on dynamic and static elements. Thanks in advance for any help.
Ok, I found the solution to the problem.
Basically the whitespace between the (necessary for the justification) is not emitted with Angular's repetition so you also have to wrap the whitespace so it gets repeated, like:
<span ng-repeat-start="drawing in drawings"></span>
<li></li>
<span ng-repeat-end></span>
Thanks to this thread: Angular: Why doesn't CSS justification work with ng-repeat?
Of course it's not optimal, because it forces you to add a ton of useless markup but at least it works. If anyone can suggest a best solution it will be appreciated.
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
On Wordpress i'm using youtube channel list plugin.
It works well, but the align of the videos don't looks great. Actually display diagonal list below the BIG video!
Can someone suggest me how to fix this issue with css?
here's the page
http://www.snowypeach.com/home/?page_id=1106
I need the list under the video aligned horizontal, not diagonal!
You have nested a <div /> as a child of the <ul />. This is invalid markup. Move the <li/> elements to be the children of the <ul />, delete the <div /> and it will work
EDIT
Okay I see the problem. You are wrapping all this content within a <pre/> tag. This tag shouldn't be used here but if you are unable to get rid of it add the style white-space: normal;.
I tested the previous answer by moving elements within chrome dev tools which removed the whitespace and therefore the problem.
Hope this helps :)
There is class ytc-columns4 on the below <ul> which is taking control over the alignment of the small video <li> tags
<ul class="ytchagallery ytccf ytc-table ytc-td-bottom ytc-columns4">
according to that class the below css is generating by plugin in the css file on line 66
http://www.snowypeach.com/home/wp-content/plugins/youtube-channel-gallery/styles.css?ver=3.4.1
.ytc-columns4 li {
width: calc(100% / 4 + 10px / 3);
}
i have changed the class ytc-columns3 and ytc-columns2 and result vary every time. I am not exactly getting where is the calculation part of the plugin. Other wise i can tweek the code.
I am trying to access only the ELEMENT for toc-chapter number (1 in this case). The element is in nested classes. I've used this approach on toc-section and was able to produce the wanted result.
Css:
.book .toc {
& > .title{
font-size: x-large;
font-weight: bold;
padding-bottom: .25em;
margin-bottom:.50em;
border-bottom: 1px solid #tuscany;
}
& a.target-chapter{
.cnx-gentext-n{
&:before{content: "testing";}
}
color:red ;
}
}
HTML:
<div class="toc">
<div class="title">
Table of Contents
</div>
<ul>
<li xmlns:d="http://docbook.org/ns/docbook" xmlns:db=
"http://docbook.org/ns/docbook" xmlns:pmml2svg=
"https://sourceforge.net/projects/pmml2svg/" xmlns:c="http://cnx.rice.edu/cnxml"
xmlns:ext="http://cnx.org/ns/docbook+" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:mml="http://www.w3.org/1998/Math/MathML" class="toc-chapter">
<a href="#idm3792312" class="target-chapter"><span class=
"cnx-gentext-chapter cnx-gentext-autogenerated">Chapter</span> <span class=
"cnx-gentext-chapter cnx-gentext-n">1</span><span class=
"cnx-gentext-chapter cnx-gentext-autogenerated">.</span> <span class=
"cnx-gentext-chapter cnx-gentext-t">Aging and the Elderly</span></a>
Based on your provided info, I would assume that LESS is producing the following css selector (I have not actually recoded your problem in LESS, this is just my interpretation):
.book .toc a.target-chapter .cnx-gentext-n:before {content: "testing";}
Which should work based on this fiddle. I will assume you are testing in a browser that supports :before (not some old version of IE). So to trouble shoot this, you need to:
Verify that such a selector is in fact being produced.
If NOT, determine what selector string is in fact being produced by your code (if any), and that may lead you to solving your issue.
If such a correct selector string is being produced, then you need to look at other css (which you have not posted, so I am merely speculating here):
Is some more specific (which seems unlikely) selector string targeting the same thing and overriding it?
Do you elsewhere set the display or color or visibility or some other property on that :before pseudo-element that in fact "hides" the added "testing" from view?
Is your actual use case putting an image as content and are you seeing it not show up in printing (that would be a whole different issue)?
Basically, if your selector string is coming out correct, there are numerous other things that could be happening, and we would need more details to resolve it. If it is not coming out as above, then I would be interested in know what it is producing.
Take a look at this page in FireFox. Feel free to navigate to any of the top six product categories to see more of the same type of code.
If you are [un]lucky enough to see the glitch, you will see at least one product box expand it's height to epic proportions.
Here is the code:
<div class="product_category">
<a href="../products/dht_1500.php" style="height: 340px;">
<h3>DHT 1500</h3>
(superfluous HTML omitted here)
</a>
</div>
Here is what Firebug reveals:
<div class="product_category">
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
<h3><a _moz-rs-heading="" style="height: 340px;" href="../products/dht_1500.php">DHT 1500</a></h3>
(superfluous HTML omitted here)
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
</div>
You can see FireFox is definitely closing my tags and re-opening them again, and pulling the custom CSS height style along with it, which is resulting in each product box height skyrocketing. Also note that strange _moz-rs-heading="" bit.
I suspect my problem has to do with my using block HTML elements within an inline tag, but I thought I solved that problem by converting the tags to block formatting in my stylesheet:
.product_category a {
display: block;
}
FireFox is playing favorites to my tags. It usually renders the page like I want it, but then every once-in-a-while, it will blow one of my product boxes sky-high, and seemingly at random.
The pages work properly in Internet Explorer and Safari. I have been testing it with FireFox 3.6 on Mac, but have seen the same problem on FireFox for PC.
Having block level elements (h3) inside an inline element (a) is not valid HTML.
Change your block elements to a span and use CSS to style it how you wish.
A similar question with the exact same symptoms was asked a few days back. The solution there was in fact taking the native block elements out of the natively inline ones. Seems changing display doesn't help in this case.
I don't know how strong the support of RadControls over here is, but it can't be worse than Telerik(there I'm lucky to get a response in 2-3 days), so I'm going to try here first.
Basically, I'm trying to do custom theming(using just CSS classes) throughout my application, so I tried setting the CSS classes needed on the telerik RadTab controls.
Well, when inspecting it in firebug, it adds an extra like 50 px of padding to each tab, which there seems to be no control over. This is their rendered markup
<li class="rtsLI rtsFirst">
<a href="#" class="rtsLink ui-state-default"> <!--This is the only place where I can put in my own custom CSS class-->
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">
Common Application
</span>
</span>
</span>
</a>
</li>
Now, I know you can't see the style classes, but according to Firebug, every class prefixed with "rts" has the line padding-left: 9px in the style sheet which would of course explain the extra padding problem. (Why do they need all this nesting anyway?!)
Anyway, I would like to remove that padding. How would you do this? Also, is there some way jquery could help to remove the padding?
If you know which setting you need to change for which classes, then the best thing to do would be to build an own style sheet with those instructions, and include it after the original stylesheet.
The important thing is to specify the classes exactly as you see them in the original style sheet, because the more specific a rule is, the more weight it has when the browser determines which settings overrule which.
This is slightly more work than doing a simple .className xyz { padding-left: 0px !important } but much, much better for maintenance. Plus, IE < 8 doesn't respect important.