Recently, I integrated jQuery and datapicker features into my ASP .NET MVC 3 (Razor) project and noticed that the font size of the datapicker is exorbitantly large.
Does anyone have any suggestions on how to adjust this issue?
Your help would be greatly appreciated!
To personalize your jQuery UI elements, you have two options: manually edit the jQuery UI css file or create a custom theme on the jQuery UI website before downloading it. If you're using Chrome, Safari, or Firefox with Firebug, simply right-click on the datepicker, choose "inspect element", and locate the specific lines of code in the jQuery UI css file that require modification. If you're unsure about the location of your jQuery UI css file, check the Resources tab in your web inspector for the file path.
To create the desired visual style, you will need to apply specific themes.
http://jqueryui.com/demos/datepicker/#theming
Here is an example of markup using jQuery UI CSS Framework classes:
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<a class="ui-datepicker-prev ui-corner-all" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
<a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
...
</tr>
</thead>
<tbody><tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td>
...
</tr>
</tbody>
</table>
<div class="ui-datepicker-buttonpane ui-widget-content">
<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button>
</div>
At last, the solution is in sight
Locate jquery.ui.datepicker.css
Add font-size:10px; to every line of .ui-datepicker
Replace with to width: 11em;
CSS:
.ui-datepicker { padding: .2em .2em 0; display: none; font-size:10px; width: 11em;}
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; font-size:10px;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; font-size:10px;}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; font-size:10px;}
.ui-datepicker .ui-datepicker-prev { left:2px; font-size:10px;}
.ui-datepicker .ui-datepicker-next { right:2px; font-size:10px;}
.ui-datepicker .ui-datepicker-prev-hover { left:1px; font-size:10px;}
.ui-datepicker .ui-datepicker-next-hover { right:1px; font-size:10px;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; font-size:10px;}
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; font-size:10px;}
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; font-size:10px;}
.ui-datepicker select.ui-datepicker-month-year {width: 100%; font-size:10px;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%; font-size:10px;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; font-size:10px;}
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-size:10px;}
.ui-datepicker td { border: 0; padding: 1px; font-size:10px;}
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; font-size:10px;}
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; font-size:10px;}
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; font-size:10px;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; font-size:10px;}
.ui-widget {font-size: 62.5%;}
Works like a charm. It can simply be included in the body tag without any additional modifications needed. https://groups.google.com/forum/?fromgroups=#!topic/jquery-ui/pri7DPcO074
There seems to be some conflicting CSS affecting the default font-size of that element, or it may be missing altogether. Simply redefine it or specify !important to override any other CSS values present.
Below is the CSS code to redefine it:
.ui-datepicker table {
border-collapse: collapse;
font-size: 0.9em; /*add !important if it doesn't recognize the size*/
}
Currently, I am using the latest version of selenium with Python 2.7.8. When trying to perform a drag and drop action onto a <div id="droppable"> element using jQuery UI, I encountered the following error message: TypeError: unbound method move_to_el ...
Can someone help me figure out why this code is not reading the value correctly? Check it out here This is the HTML: <a class="InterestLink">Click me</a> <div id="InterestExpander"> <div id="InterestExpanderX"> ...
Here is some code and HTML for triggering a radio button. It seems to work fine without any issues, but I'm wondering if the presence of a name property is necessary. When I remove the name property, it stops working. Can someone explain why? <inp ...
Is there a way to prevent the ng-change event from happening? I have a select box with an option that I don't want users to select. Instead, I want to display a warning message and then revert back to the previously selected option. To achieve this, ...
Whenever I try to use this Ajax script for posting data and disablind the send-button along with all form fields, only the submit button gets disabled on click. What I actually want is to disable all the form fields as well. So, in order to achieve this, ...
I am attempting to create a simple div where I want px-5 for mobile screens and px-20 for larger screens. However, only px-5 is working and px-20 is not applying on large screens. Can someone help me understand why? Code Output Image <div class=" ...
I am currently working with AngularJS and MongoDB. In my MongoDB data, there are some text elements that contain a \n, causing each line to be displayed on a new line based on the occurrence of \n. However, I also want to add line numbers to each ...
I have a list of data elements that I am rendering in the following way: <ul> <li v-for="el in elements"> {{el.data}} </li> </ul> Here's how I style it in my .css file: ul { list-style-type: none; padd ...
I am facing challenges with the compatibility of my CSS code for HTML checkboxes. In certain versions of Internet Explorer and when I insert the live HTML into my PowerPoint presentation, the center div overlaps with the left div causing the entire page to ...
Looking to conceal a textbox control using javascript or jquery. I attempted the following code: document.getElementsByName('Custom_Field_Custom1').style.display="none"; Unfortunately, I received an error in the java console: document.getEle ...
As someone who is new to the world of AngularJS, I am currently in the process of learning the basics. My goal is to organize a JSON file into 4 or 5 separate parent divs based on a value within the JSON data, and then populate these divs with the correspo ...
I want to create a feature that automatically converts list items into jQuery toggles for elements on a webpage. For instance, consider the following code snippet: <div id="page"> <div id="menu"> <ul> <li clas ...
What techniques can I use to center this form properly in both bootstrap and plain CSS? So far, I have been able to center some parts of it, but when I try to center others, they shrink and create a mess. When I use bootstrap to center the elements, they b ...
I am currently developing a demonstration in which users can select jQuery areas to create square blocks. When a user selects an area and adds a comment with color, the entire block is displayed at a specific position. This feature is working perfectly as ...
Having read several posts such as this one, I am exploring a method to click on the parent div for it to hide, without hiding when clicking on either the search box or the 'click for event 2' text. I have tried using onclick stop propagation to ...
I am looking to create a JavaScript class that encapsulates jQuery's DOM functions, but I want these functions to only interact with a single property of that class. class Foo { constructor() { this.$wrapper = $('<div>wrapper</div ...
https://i.stack.imgur.com/M9reE.jpg https://i.stack.imgur.com/Yyg4g.jpg Upon inspection of the provided images, it is evident that the src URL points to a location within the nextjs public folder. The issue arises when there is no internet connection - i ...
I have searched through various questions and the Bootstrap documentation but haven't been able to determine the purpose of these classes on elements. Any assistance would be greatly appreciated! My goal is to adjust my search bar's size to 1/4th ...
Here is a sample JavaScript function: function f1() { alert("HI"); } I have two different locations where I am calling the same JavaScript function: <input type="submit" id="btn1" onclick="f1()"/> <input type="submit" id="btn2" onclick="f1 ...
Having an issue with the vue-sidebar-menu. The sidebar is appearing over the components instead of beside them. Here is a screenshot of the problem: <template> <div id="app"> <sidebar-menu :menu="menu" /> <vue-page-transit ...