jquery datepicker selectMonth/year css fail, conflicted with bootstrap - css

I've created the following custom ui: custom jquery ui
im importing every single css file from this folder.
<link rel="stylesheet" type="text/css" href="js/jqueryUi/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="js/jqueryUi/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="js/jqueryUi/jquery-ui.structure.css" />
Problem is that my month/year select has no design and text is blank unless I hover it.
Any suggestions would be appreciated, also, if information is missing, ill provide.
EDIT
I dont want to "put a bandage" on it and just fix the design myself, I want the select to use the custom ui, like any other input type..
When I inspect the element I don't see too many conflicts, but what I do see is some color properties such as border,background,color etc that are grayed out (In chrome).
Found half of the answer
bootstrap.min.css is conflicted with the jquery-ui design.. any suggestion to let jquery-ui get priority in this?

Your month/year select text is having white color that is the reason it is not visible so just change select text color it will be visible.

Solved the conflict with the select,
ran a search of 'select' in bootstrap.css and deleted each reference.

Related

Import more than one css file to html page

I trying to import 2 css files as follows:
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/bootstrap.css">
And for some reson its doesnt working, What would be the problem?
The order of loading css really matters, I think the bootstrap.css file has some class or id which has the same id as you have in general.css. The last css file will cover the previous one.
Correct! The order of loading css really matters. Please check the order you are loading and could you please post your exact issue? Like which part are you not able to get in your html page? #user11001

Linking to External Stylesheet

Background: For the website I am on (a roleplay forum) you are allowed to use custom css and html in posts. To do this, you have to use a [dohtml] BBCode tag. Then you can insert any css/html you wish.
Problem: Some users have used linked stylesheets to make theirs show up. And it works. But mine doesn't.
Other: I am unable to use a tag, because it's not a full html document. I am using it in the same manner, but for some reason mine is not working. Can anybody help me with this? Is there something wrong with my CSS?
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/23ktd8q6bdekhi8/scorix.css" />
EDIT: When someone links to this one, it works fine
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/w2uh6gphwjgmenu/betteralone.css?dl=1" />
The link should be a direct download link. This should work (at least, let's hope so):
https://dl.dropboxusercontent.com/s/23ktd8q6bdekhi8/scorix.css?dl=1&token_hash=AAFS1EYWJejOVo_PQ8c8RSK0rRbKC0kPt0fXEz5T7i5A7Q
Other than that, I don't see anything wrong with your HTML link code and your CSS validates flawlessly.

How to print web page with all its applied css?

I want to print my table that contains some css styles too. But whenever I run window.print(), the output appears without any applied css to styling headers and footers.
I've used <link rel="stylesheet" href="print.css" type="text/css" media="all" /> in my code. Also I tested it with media="print". But still I have a print preview without any style.
What should I do?
media=print should do.
Make sure you have also checked the "print images and colors" in page setup while seeing the Print Preview.

Can I make a printable web page as same as its normal view with its all css features?

I have a web application that produce some reports in HTML format. I have different styling options to display these forms. Normally whenever I want to print these pages, I lose all CSS styling features. How can I make a print without any change in appearance?
<link rel="stylesheet" href="./public/css/print.css" type="text/css" media="screen, print" />
As far as I know the print-out should use the same css-styling as the screen unless you specify something else.
Do you specify "media" in the css link?
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You could try to either make sure there is no media specified or to set media="screen, print"...
If you use some JavaScript plugin (like: jQuery-Print) you would lose your appearance in the other way if you use CSS correctly it's impossible to have a change in your print usually?!
if your problem don't solve tell me which language do you use for your application?

Two CSS files linked, only one is being used, other is ignored

When loading two CSS files via an include I am only seeing one of them being used. The other isn't being included and I don't know why.
I have a standard header file which is included on all of the site's pages.
Example below:
<html>
<head>
<link href="css/jquery-ui.css" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
This is of course a cut down version of the header for simplification. As you can see both CSS files are within the css directory. but only the main CSS file is being recognised.
Either one of the CSS files cannot be loaded (probably because of a typo or a server misconfiguration). You can detect that by checking that all resources are properly loaded in the developer tools of your browser.
The other cause may be that you're implicitly expecting your own stylesheets to take precedence over the default jQuery UI ones. If that's the case, move your own stylesheets under the jQuery UI one, or make your rules more specific than the default ones.
This is a simple demo that shows that your example works.
Solution:
In your live example, you're missing rel=stylesheet for the jQuery UI stylesheet:
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css"/>
should be
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css" rel="stylesheet" />
You are missing the rel attribute in the first link tag, and most likely this is the reason it's not being parsed as CSS.
Looks like you forgot to close you link tags, just add a forward slash '/' before the closing of both tags.
You're certain the second file is linked correctly? Check Firebug's NET panel, for instance, to double-check that it's loading and not returning a 404 error or somesuch.
You wouldn't be the first developer to be brought down by an unintentional typo!

Resources