I am trying to create a simple dashboard to show information at a glance. I am using the swimlane number card chart found here: https://swimlane.gitbook.io/ngx-charts/examples/number-card-chart.
Everything is working but I can't get the title of a card to wrap to the next line if it is longer than the card, here is an image of what I am talking about:
I have tried applying style to the parent div and tried with selectors like ".ngx-charts-number-card.title" ".ngx-charts-number-card.title" ".card.title" etc. I can't even modify the style when using the inspector live in the browser. I can't find any documentation to style these elements so any help would be appreciated.
I have a 5 column responsive layout for a gallery page. I did not code it myself, having found the code for exactly what I wanted somewhere on line. My coding skills and understanding of CSS positioning are evolving, to put it nicely.
It works well until I zoom an image. The image zooms properly, but the right edge is showing as "under" the image to the zoomed image's right.
Looking for the answer I found that the container must have a relative position and the image to have an absolute position for z-factor to work (or so I understood what I read). When I set the image position to absolute, each image takes up the entire screen. I tried a "clear:both" on the hover property to no avail.
The problem exists in any screen width from 550px up - below that the display is single column.
Both the code and the on-page css is valid. Link is http://www.artfromny.com/gallery2.html
Any help appreciated; prefer no java solutions since I barely understand the basic concept of it.
Thanks in advance to all of you who spend so much time helping others get the hang of coding. The last language that I truly understood and used properly was dBase iii so I am kind of struggling here :)
Art
What i'm trying to do?
I'm trying to hide mouse cursor in flowplayer when the user is not interacting with it for some time.
Why i'm doing this?
I consider this a basic functionality for any video player. All other players do this (YouTube, Vimeo, VideoJS, etc). Looks like there is no such functionality in flowplayer out of the box so i'm trying to plug it in somehow.
Question
How do i hide mouse cursor in flowplayer when client is not interacting with the player for some time?
Solution
So to hide the mouse cursor in flowplayer you can use the following CSS code:
.flowplayer.is-mouseout .fp-ui {
cursor:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
url('blank.cur'),
none !important
;
}
See the Demo on jsfiddle.
Explanation
The flowplayer will attach CSS class called "is-mouseout" both when cursor is out of the player and when the cursor is not moving for some time (at the same time when toolbar auto-hides).
We are replacing the cursor with an empty PNG image or an empty cursor file (IE). In the end we are falling back to the "cursor: none;" style (valid in CSS3).
Don't forget to create zero-length "blank.cur" file in proper location!
CSS solution to hide the cursor in more detail.
Notice
There is a bug in Blink rendering engine (used both by Chrome and Opera browsers). It is discussed here with the flowplayer developers. You can try to apply discussed solution yourself or just wait for flowplayer revision 5.5 (current 5.4.3).
Notice the blue sidebar has a grain effect added to it.
How to I achieve this without using an image?
You can create a textured image with only a few colours to achieve a grain effect. As a GIF or similar, it will only amount to a few hundred bytes if you do it right. That is, make a small image and tile it.
If you want to find out how a specific site achieved that effect, use a DOM inspector to check the code behind the element. Chrome has this functionality built-in if you right click and choose "Inspect Element". I bet you'll find there's a background image.
I'm wondering if this is something somewhat simple, but I'm having a problem ONLY on iPad with my sprited images. I have an tag that I use a sprite for to display an image of a star (similar to gmail or picasa) to indicate a favorite. On every other browser (including safari) on a computer, it's all completely fine.
The problem is on an iPad, it's showing more of the sprite than it should and it looks strange. What's even stranger is that this image is repeated several times and it doesn't seem to happen consistently.
Is this some sort of zoom issue or viewport setting problem specifically for iPad? It's driving me crazy, and anything I do to fix it cuts off some of the image and ruins the normal browser look.
Here's an example of what I mean since I can't put up the page I'm currently working on.
On this site I've worked on in the past, the viewing options look strange on an iPad:
http://demo.qlikview.com/index.aspx?section=Life
For example the "Download" viewing option looks different on the FEMA app than on the Kick It app so it doesn't even appear to be consistent.
Any help would be appreciated.
Thanks!
This is because the iPad scales your page.
The size of your element where the sprite is used is scaled and the sprite image to. But it seems not to behave precisely.
The same thing happens when you zoom out in safari. This is because an image is not scaled the same way in the browser then a dom element. A dom element is rendered as vector object. So when you zoom in or out, the lines keep sharp. When you do the same with a bitmap. It gets blurry and the browser need to guess how the image would look like smaller or bigger.
You have two options:
use more space between the sprites.
use EMs and not Pixels in your CSS
PS: Don't use !important in your css
Like meo pointed out, best option would be to leave space between the sprites.
There is also one last thing you can do, which is not to let the user zoom the web page by putting the following line in your tag. It would look the exact same as you view in the browser, which is pretty neat if you have loads of elements messed up in the iPad because of the sprite issue.
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />
Good luck!
The simplest fix for this is to put an outline around your spite with the border color the same as the parent container's background color. The outline is outside you element and does not effect layout. What you see is a problem mobile Webkit has when it scales down images with background color or background images, they bleed out of their container. The outline will sit on top of that and cover it.
What I usually do is just define separate images (non-sprited) for iPad users. I know it doesn't load as quickly as you're hoping for with sprited images, but I feel it's a price they have to pay. What I do is have individual images on the server with #media in your stylesheet to define different images for iPad browsers. A quick review of how to use #media for iPad can be found at:
http://css-tricks.com/snippets/css/ipad-specific-css/
I just ran into this problem as well. I've been leaving extra space between my sprites since I first noticed the iPad imperfections. However, my current project involved sprites and another element with CSS3 transforms. The combination made the sprites blurry, with strange clipping around the edges. I actually found a fix over at No more jagged edges in iOS. Try applying the following CSS to your sprites:
/* IOS fix for incorrectly scaled sprites */
-webkit-background-clip:padding-box;
background-clip:padding-box;
Those few lines worked magic in my project. Of course, YMMV.