Search code examples
jquery-uidatepickericonsstylesheet

Jquery UI datepicker spoiling style and icons

I am facing problem of stabilizing styles in my html page. Whenever I am using datepicker (jqmobile UI datepicker), the look and feel is affected terribly. The icons on the header, the icons for closing dialog, the icons for type dropdown all vanishes.

Here is my header portion,

 <head>
    <meta charset="UTF-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />
    <link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <link type="text/css" href="styles/datepicker.css" rel="stylesheet" /> 
    <link type="text/css" href="jquery-mobile/styles/jquery.mobile.simpledialog.css" rel="stylesheet" /> 
    <script src="cordova.js" type="text/javascript"></script>
    <script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mobile/js/jquery.mobile.simpledialog2.js"></script>
    <script src="scripts/Common.js"></script>
    <script src="scripts/FlightServices.js"></script>
</head>

If I comment out the line:

link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css

then the icons appear properly but datepicker style is spoiled.

If I put this line:

script src="scripts/datepicker.js" instead of : script src="scripts/jquery-ui.js"

Datepicker is completely disabled.

Is there any mistake I am making in this above mentioned portion? Any wrong file included?

Anyone any suggestion, I shall be thankful.

Thanks santu ghosh

Solution

  • The order of style sheets is important.

    Change the order of style sheets instead of keeping one or the other. Usually, the themes style sheet template should be added first and then, your own style sheet(main.css) which adds in your own modifications to the base template. Edit your main.css to super-impose major conflicts.

    I would also recommend putting the mobile style sheets conditionally for mobile platforms only unless this page is strictly for mobile anyways.

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link href="styles/main.css" rel="stylesheet" />