UI Grid CSS not working - css

I tried to create a grid using UI grid (Recent version of ngGrid) which is unstable version and integrated in my current project.
It is Not correctly displaying the (icon angle down and row selected icon) as needed While including the CSS file in project (by downloading the file and uploading) its giving me display errors as shown below.
But, if i directly give the web url for CSS file in my project...it is displaying correctly.
//web url:
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
//my url
<link href="~/Scripts/ui-grid-unstable.css" rel="stylesheet" />
I don't want to depend on web URL to display...is there any solution that I can implement on my side.
Please refer the image for before and after using web link.
link for Images: http://postimg.org/image/omhlfs8nd/
The top one is how it's supposed to and the bottom one explains my display error.
ThankQ for your time.

This is a simple error. Make sure you have the ttf,woff and svg files from the ui-grid download in your css folder. From you code, you should have it under ~/Scripts/ folder.

Adding to previous comments to download tff, svg and woff files:
You need to download ui-grid.eot as well to get it perfect.

Related

Website posted on GitHub not formatting my CSS

I have placed my CSS and Images folders and index.html on GitHub. Only the html displays without the CSS formatting. I have cleared my cache and cookies. I'm using Chrome. I can't seem to get the CSS formatting to work.
Can anyone help?
uploaded web files to Github: https://github.com/Dennybribri/cv
I have attached a picture of how the top part of the website should look like. Here is a link to the site from Github that just displays the html: https://dennybribri.github.io/cv/
Rename your folder from CSS to css.
The filesystem used on the servers of Github pages sites is case sensitive.
You'll need to import your css from the CSS folder:
<link rel="stylesheet" href="CSS/styles.css">
Also because of the same problem your images will not show up. You will need to specify the path to Images/someimage.jpg instead of images/someimage.jpg
Thank you Mahmoud and Merlin. I changed the folder names to lower case and forever have this issue stuck in my brain. It works great!

jPlayer circle-player demo includes a css link not contained in the distribution

This follows off a previous question.
While trying to put together a simplified application that showed the problem, I went back to the demo which does not show the problem. I tried using this as a model for my simplified demo, when I was brought up short by line 11 of the source of the demo:
<link href="/css/jPlayer.css" rel="stylesheet" type="text/css" />
They are including a root-level stylesheet that is not available in either the latest jPlayer or Circle-Player distributions.
So what is this jPlayer.css and where can I get it? The only idea I have is using one of the skin-flavored jplayer css files.
I am thinking that NOT including this in my application is the reason for the problem I was having with the circle player.
This file is a stylesheet for the site jplayer.org, not the player. It is not required for jPlayer Circle Player to function. It is definitely not the source of the problem you have described in your other question.

jQuery-ui: Differences between local and remote inclusion of stylesheet

When I include a jquery-ui stylesheet for a resizable jquery-ui dialog remotely like so
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" />
I get this result:
but when I download the very same file and include it locally like so
<link rel="stylesheet" type="text/css" href="./jquery-ui.css" />
I get this result:
Note the missing resize handle in the lower right corner which seems to be the only difference.
What causes the difference?
Jquery-ui references a bunch of image sprite sheets. When including the reference from ajax.googleapis.com the path to the image resolves properly because google hosts those images on their server and has them in the proper location. However in your local copy of the jquery-ui.css i'm guessing there's a good chance your images are not in the proper location.
I'm using jquery ui in a current project and my folder structure is:
Content
images <--- this is the jquery ui sprite iamges folder
jquery-ui.css
go to /jquery-ui.css and make sure the bg paths are path correctly

Appearance settings of the website,problem with CSS

Am running asp.net web application.I need to modify the appearance of my web page..I want to bring a table that contains some labels and textbox to the centre of the page..I changed the align to centre..it is not working...i changed the padding pixels which is in default...it is also not working out...i feel CSS in not applying..can anyone help me to slve this..
you can use margin to bring it to center
Check that the CSS file path you are provided in page is right.
for example :
<link href="css/site.css" rel="stylesheet" type="text/css" />
the above line should be inside head tag
here "css" folder is inside project root directory, and site.css is inside that "css" folder
so check the path of css file
Check the path which the browser attempts to resolve in e.g. firebug or fiddler, and check the status and content of the response. A common scenario is that you haven't granted permission or authorised access to the CSS folder so you'll get a 4xx range response, or worse a 200 response which is actually a custom error page.

css file not getting updated

the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.

Resources