when using datepicker (jquery ui 1.10.3) it opens up with default highlight on today and that's fine.
Now, the user want to choose other date - but the initial highlight still remains on today.
I'm searching in their documentation and in general (newbie in js and all) and can't reach the answer..
Edit - this is weird cause according to their example it should work out of the box http://jqueryui.com/datepicker/#inline
One possible solution is to add a class to a datepicker-wrapping element when the user selects a date and adjust the CSS:
$(document).ready(function () {
$('#txtDate').datepicker({
onSelect: function() {
$("#txtDate").addClass("madeSelect");
}
});
});
Necessary CSS adjustment for .ui-datepicker-today : set the background to the background-image of the default-date according to the theme you're using.
Necessary CSS adjustment for .ui-datepicker-today.ui-datepicker-current-day (in case the user selects the current day): set the background to the theme's background-image of .ui-datepicker-current-day and the color of the font to your theme's color for the current day.
.madeSelect .ui-datepicker-today .ui-state-highlight
{
background: url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/sunny/images/ui-bg_gloss-wave_60_fece2f_500x100.png") repeat-x scroll 50% 50% #fece2f;
}
.madeSelect .ui-datepicker-today.ui-datepicker-current-day .ui-state-highlight
{
background: url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/sunny/images/ui-bg_inset-soft_30_ffffff_1x100.png") repeat-x scroll 50% 50% #ffffff;;
color: #0074c7;
}
Working Demo here: Datepicker - remove highlight on today when date is selected
Related
I have a Aggrid and have to change the color of row and text from default blue and black to green and white when we select a row in Aggrid.
I tried making use of this, but the color of links in text does not change to white
It is not related to ag-grid. All you need is to add different CSS rule for links inside a selected row, to override link color (and also, probably, :hover, :active, :focus states).
.ag-row-selected A {
color: while;
}
I made an ion-picker with which I can configure the font-size on my Ionic-App. So now I would like to change the font-size within the picker so that the user can see how big the font will be, before he has to confirm it. So for example if you scroll down and select 150%, it should re-scale the font-size to 150% just within the ion-picker.
I already know how to read the current value without confirming it and how to change the font in the entire app, so the only thing that's left would be to change the font of the picker-values.
add global.scss
.picker-opt{
font-size: 12px; //change size depend your Requirement
}
Yeah.
All what you need is to give the item an id;
And you make normal javascriptcode which is var elementsize = getelementbyid('and put there the item id);
Then
Elementsize.style["font-size"] = thepicker.value;
And that will solve your problem.
Or in otherway it can be binded with variable and ngmodule with this variable .
Regards.
I'm trying to build a canvas app with color picker using jscolor.
Here are what I've done:
Included the file jscolor.js
Created a button with class="jscolor"
Code for the button:
<button id="strokeCol" class="jscolor {valueElement:'color_value'}" onchange="config.changeStrokeCol(this.jscolor)">
Stroke Color
</button>
When I select a color from the picker I can see the background color of the button changing in developer tool, but in RGB value. Read it somewhere else that I can simply get the HEX by specifying $('element').val(), but in my case it just gives me "" (blank).
The HTML also has no value attribute triggered by the click, not to say being updated. The examples only shows that I can specify a default value (which can't be updated as well).
Have I missed anything? Or has jscolor been updated to provide only RGB value through the background color?
The only workaround I can think of is allowing the HEX code to be displayed inside the button then use .html() to get the value, but it seems so unnecessary.
Problem solved when class is inserted to the
<input> tag. Strange!
When jquery chosen's height is adjusted using the code
.chosen-results {
height: 82px;
}
It does not calculates the height correctly and when u select options inside it using keyboard, options are not shown. How can I fix it?
jsfiddle: http://jsfiddle.net/umcc9/6/
Steps:
1) Click on select box
2) Click Down key multiple times
3) When Val-4 will be highlight, it will not be visible in container
Ok Found the solution I need to set max-height
.chosen-results {
max-height: 82px;
}
I'm trying to configure the width for Alfresco.util.PopupManager.displayPrompt() but I don't see how to do it.
YUI Dialog has a width property, but the only config that I've managed to see, defaultDisplayPromptConfig object, doesn't seem to pay much attention to my messing with it.
Specifically, I tried setting Alfresco.util.PopupManager.defaultDisplayPromptConfig.width but it didn't work :)
I'm also trying to style up the panel I'm loading (create-site style injected panel), but it does not work for now.
Is there a way to configure the PopupManager Prompt object?
TIA
If you look at the source for Alfresco.util.PopupManager.displayPrompt() contained in alfresco.js then you'll see that the method creates an instance of YAHOO.widget.SimpleDialog, which does support a width property.
The problem is that displayPrompt() takes only specific configuration options which it passes through to the SimpleDialog, so adding an additional width parameter to your config will not have any effect, as you can see.
// Create the SimpleDialog that will display the text
var prompt = new YAHOO.widget.SimpleDialog("prompt",
{
close: c.close,
constraintoviewport: c.constraintoviewport,
draggable: c.draggable,
effect: c.effect,
modal: c.modal,
visible: c.visible,
zIndex: this.zIndex++
});
// Show the title if it exists
if (c.title)
{
prompt.setHeader($html(c.title));
}
// Show the prompt text
prompt.setBody(c.noEscape ? c.text : $html(c.text));
// Show the icon if it exists
if (c.icon)
{
prompt.cfg.setProperty("icon", c.icon);
}
// Add the buttons to the dialog
if (c.buttons)
{
prompt.cfg.queueProperty("buttons", c.buttons);
}
// Add the dialog to the dom, center it and show it.
prompt.render(parent);
prompt.center();
prompt.show();
I like the idea of enhancing the function to support a width property and possibly others, but in the meantime you are best off using SimpleDialog directly in your own code, modifying the above to add a width parameter.