I am not able to see the icon in android-4.2 but can see in lower versions. Can anyone explain what is the issue? Here is the html body:
<div class="ss-symbolicons-block ss-car" data-rel="test"></div>
You can find the sample icon here:
http://jsfiddle.net/72k8n/1/
It looks in Android-4.2.1 like:
And in Android-4.0.4 like:
We are using these files for displaying icons:
http://apps.innofied.com/sencha/anand/symbolset/ss-symbolicons-block.css
http://apps.innofied.com/sencha/anand/symbolset/ss-symbolicons-block.svg
http://apps.innofied.com/sencha/anand/symbolset/ss-symbolicons-block.ttf
http://apps.innofied.com/sencha/anand/symbolset/ss-symbolicons-block.woff
I tried adding z-index : 1 to the parent container and that is working fine
Related
I am using Drupal 7. I want to animate the login block with aos.
The login block is called "block-user-login". It´s a <div id="block-user-login" ... >
Can I create some css code around to make "data-aos='zoom-in'" be associated to that #block-user-login ?
How can I create a style script to do that?
I dunno if you're still in doubt bout that. But you can try <div id="block-user-login" data-aos = 'zoom-in'> and after that you can config in css the color, the font and everything else.
This is a weird "bug", I cant reproduce it always, but on the fiddle test case seems to fail more often. This is ONLY showing in chrome/windows, I couldn't reproduce it in IE at least and someone confirmed it doesn't happen in chrome/Linux.
The fiddle: http://jsfiddle.net/u25zr/2/
As you can see, text is not horinzontally aligned.
A weird thing: if you right-click on the text, click "inspector tools" and untick/tick again the font-family property, it magically fixes.
I attach an image so you can see what should happen:
Since I used a jsfiddle link, I need to add a code block also, so ill just add the markup, which is not related at all...
<div class="recipe">
<div class="recipe-top">
<div class="category">Text</div>
<h2>Test Recipe 1</h2>
<div class="date">12 Jan 2013</div>
</div>
</div>
EDIT: Moving the SVG font to the bottom so Chrome uses the woff instead of the svg fixes the problem. So it looks like the problem its in the SVG rendering.
Well, after some wasted hours this seems to be a (another) chrome bug.
https://code.google.com/p/chromium/issues/detail?id=95102
And i also found a solution here:
Chrome svg-Font-Rendering breaks Layout
Which is good, but doesnt validate CSS. Anyway nothing else we can do.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
I am building the following site:
http://www.verbum.xtrweb.com/soon.php
But as you can see, everything is zoomed. Not if you adjust it, but I dont want users to have to adjust their view for my site. I want my site to always appear with the same zoom, as in the picture I uploaded here:
ctrl + 0 is not a solution I am looking for. If not something in the code, probably a style property or something of the kind. See code in your browser to check. Thanks!!
Apart from all the small errors and mistakes found on your page by previous users, I would advise you to wrap your header content into a container with a percantege width. This way it will keep the same width according to the browser window width in all browsers. The font size of your paragraphs should be em also to adjust itself easily. Keeping all this in mind and cleaning up your code, you should be able to deliver the same experience to most of the users
Looks like you made a typing-error. Change the font-size of your paragraphs into px or em. So font-size: 37px (instead of 37pt).
Here, the file did not exist:
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Maybe you should fix this first.
Also, I don't think it's a good idea to include multiple versions of jQuery on the same page.
Update:
<div id="facebook" style="display: inline; opacity: 1.0999999999999999;">
<input style=" " id="fb-button" type="submit" value=" " onclick="window.location.href='http://www.facebook.com/sharer.php?u=<http://verbum.xtrweb.com/>&t=<Verbum, the new dictionary>'" <="" input="">
</div>
The HTML above (copied from your page) is wrong; the input tag does not close properly.
I have just added a 'Like' button from Facebook. The site is in Arabic, and I have added the necessary Arabic language locals to the FB code. Now the problem is the Icons are displaying slightly different, and I can see that can be controlled by CSS. The FB Code loads an iframe and within that there is a SPAN that has a class that controls the position of the Facebook (blue 'f' icon) which is overlapping over the text. When I try using FireBug and re-position it it words fine. My question is how can I write a CSS code that I can change the value on that iframe loaded CSS from my local CSS file ? The code is as follows:
=== Code on the iFrame that is loading ===
<div class="connect_button_slider">
<div class="connect_button_container">
<a class="connect_widget_like_button clearfix like_button_no_like">
<div class="tombstone_cross"></div>
<span class="liketext">أعجبني</span>
</a>
</div>
===
The CSS that is loaded by FireBug
.button_count .like_button_dark .like_button_no_like .liketext, .button_count .connect_widget_like_button .liketext {
background-position: -1px -47px;
}
====
I need to change the "class"="liketext".
I want to change the value of "background-position: -1px -47px;" from that to the following:
background-position: 38px -47px;
====
Now I have my local CSS file, how will I be able to access that element "liketext" and change the value from "-1" to "38" ...
The page, if you want to check, is on the following link ...
URL: http://www.majalla.com/arb/2011/09/article55227042
On top of the article you will find the facebook icon/like overlapping just next to the print icon.
I really don't like telling you that your work here was pretty much wasted. You can't influence an external iframe with css - that's why Facebook does it that way, to have full control over their icons. Anyway it's a shame that the like button doesn't get displayed properly, but all you can (and should) do is submitting a bug report to facebook!
By the way, try taking care of your spelling: It's that, not tath and THAT spelling makes it really hard to read your question ;)