IS the AjaxControlToolkit.CalendarExtender control bindable?
In my eWorld.CalendarPopup you use the database to set holidays, and there are numerous graphical properties. It seems to me that:
the CalendarToolkit has no method to link itself to some database full of holidays
the only way to format the look at feel of the calendar is via CSS.
(1) Are these assumptions correct? Is the CalendarExtender thus considered a limited control?
(2) I take care of styling in the Render event handler, as in:
writer.Write(#"<Style type='text/css'>
.ajax__calendar_container
{
padding: 0px 0px 0px 0px;
}
.ajax__calendar_header, .ajax__calendar_footer
{
font-size: " + (CalendarFontSize.IsEmpty ? "8pt" : CalendarFontSize.ToString()) + #";
font-family: " + (string.IsNullOrEmpty(CalendarFontName) ? "Verdana" : CalendarFontName) + #";
font-weight: bold;
background-color: #dcdcdc;
border-width: 0px;
}
//...
//...
</Style>"
);
base.Render(writer);
To answer your first question... the AjaxControlToolkit.CalendarExtender is not bindable, however, the control that it is extending can be. For example, if you add the AjaxControlToolkit.CalendarExtender to a TextBox control, you can bind the text box to a value in some database.
The AjaxControlToolkit.CalendarExtender only does what it was designed to do... extend existing controls by showing a calendar control where users can pick a date. However, it is not a calendar control...
Related
I have a field in a form with label/display name:
"I can confirm that this supply is not subject to restrictions under the Test Group, or be of a specialist nature, and as such require other checks that this method does not support."
I am using a dropdown widget with options Yes and No to display it.
I could wrap the label by trying below css.
.app-AddRequest-Field15-Label {
white-space: normal;
}
But now the space between the input and label is very less. Even if I put a margin top to the input when in mobile view the label wraps even more and the space still remains very less/ both override.
Images with borders
Label border: black
Input border: Orange
I want to keep a constant space in all views. Please suggest.
I mocked up a solution that works for up to four lines of data in a label. These are the steps you need to follow:
1.) In the global css, make sure you have the following lines:
.app-Dropdown-Label {
white-space: normal;
}
.twoLinesLabel{
top: -15px !important;
}
.threeLinesLabel{
top: -30px !important;
}
.fourLinesLabel{
top: -45px !important;
}
2.) On any of the client scripts place the following:
function adjustLabel(widget){
var label = widget.getElement().children[0];
var ch = label.clientHeight;
var lines = Math.floor(ch / 15);
switch(lines){
case 2:
label.classList.add("twoLinesLabel");
break;
case 3:
label.classList.add("threeLinesLabel");
break;
case 4:
label.classList.add("fourLinesLabel");
break;
}
}
3.) On the onAttach event handler of any dropdwon you need this adjustment, place the following:
adjustLabel(widget);
The only problem with that approach is that in the UI you won't be able to see the necessary space your field requires so that it don't overflows with the previous field. So you'll have to preview the app and make adjustements accordingly.
Another way is to make sure that your CSS looks like this instead:
.app-Dropdown-Label {
white-space: normal;
}
.twoLinesLabel label{
top: -15px !important;
}
.threeLinesLabel label{
top: -30px !important;
}
.fourLinesLabel label{
top: -45px !important;
}
Then on the Display category of the property editor, simply add the correspoding style to the dropdown. That way you will be able to see the changes in the editor immediately.
Whatever way you choose, the result is the following:
I'm working on a 'reset password' function for a VB.net application, where an admin user can reset the password for a user when they have been forgotten their password.
The function currently works correctly, however, I now want to disable this 'reset password' button when the user's account is locked- as admin will have to unlock the account before they can reset the password, so disabling the 'reset password' button will give them a visual prompt that the account needs to be unlocked before the password can be reset.
There is a CSS class for the type of button that the 'reset password' button is, called mainsubmit, and I want to inherit from this class to create one for a 'disabled reset password' button.
The CSS currently is:
.mainsubmit {
padding: 6px;
font-size: 2.4em;
width: 100%;
}
and just below this, I've added:
.mainsubmit .disabledpasswordresetbutton {
pointer-events: none;
opacity: 0.5;
}
In the VB, I have:
If lockedOutUser.IsLockedOut Then
btnResetPassword.Enabled = False
btnResetPassword.CssClass = "mainsubmit.disabledpasswordresetbutton"
End If
However, when I now view the application in the browser, if the user's account is locked, the 'reset password' button is greyed out correctly, but it doesn't seem to have inherited the other properties of the mainsubmit CSS class- for some reason, it's much smaller than the other mainsubmit buttons that are also displayed on that page.
Why hasn't the button belonging to .mainsubmit .disabledpasswordresetbutton inherited the size and other attributes from the .mainsubmit CSS class?
As i said in my comment: The space in your CSS selector (.mainsubmit .disabledpasswordresetbutton) makes it match all elements of class disabledpasswordresetbutton that are children of elements of class mainsubmit. Maybe that's not what you want. If you remove that space, it will match all elements that carry both classes (just like in your VB code):
.mainsubmit {
padding: 6px;
font-size: 2.4em;
width: 100%;
}
.mainsubmit.disabledpasswordresetbutton {
pointer-events: none;
opacity: 0.5;
}
<button type="button" class="mainsubmit">Enabled</button>
<button type="button" class="mainsubmit disabledpasswordresetbutton">Disabled</button>
EDIT: Also, as #MrLister pointed out in the comments, the HTML notation for adding multiple classes via the class attribute is class names separated by spaces. You only use the . in the CSS selectors.
I'm not sure but sounds like your selector is not matching. try:
.mainsubmit.disabledpasswordresetbutton {
pointer-events: none;
opacity: 0.5;
}
I have Qt style sheet (qss) for QLineEdit, using different styles for readonly and editable. Works fine, but if I toggle a QLineEdit to readonly (at runtime) the style does not change.
Is there a way to force a stylesheet update of such a line edit?
As requested, the stylesheet:
QLineEdit {
background: transparent;
border: 1px solid green;
border-radius: 5px;
}
QLineEdit[readOnly="true"] {
background: rgba(40,40,40);
border: 1px solid rgba(50,50,50);
}
After change edit's state try next code:
qApp->style()->unpolish(this);
qApp->style()->polish(this);
Where "this" current QMainWindow or QDialog.
Here my own findings:
The polish / unpolish thing works
However, it is somehow inconvenient as I have to apply it for each QLineEdit object, it does not work for me if I do it on the parent level (e.g. on a dialog with multiple QLineEdits)
What works for me is to force an update like this
widget->setStyleSheet(widget->styleSheet());, by just setting the same stylesheet. I works also on the top level widget, updating multiple child elements.
So I want all buttons on my site to look the same and I need to edit a CSS file for them.
I was just wondering how you can access the css style of all controls named -asp:button.
Ie. Button { Font-size: 10px; } or #Button { Font-size: 10px; }
So far this is not working.
Most newer browsers support Attribute Selectors, so you could do something like
input[type="submit"] {
//styles here
}
You'll get better all around support by applying a class though as others have suggested.
ASP.NET Button controls render as:
<input type="submit">
You will need to give them a css class name that you can control in your css file.
In server side code:
myButton.CssClass = "myClass"
OR in ASPX markup:
<asp:Button CssClass="myClass" runat="server" ... />
CSS:
.myClass { width: 100px }
Edit having seen your comment:
To modify all buttons across the site you need to use Javascript, the jQuery library is extremely effective at this. If you were using jQuery you would just have this script on your Master page:
$(document).ready(function()
{
// Select all "input" controls with the type of "submit" and add your class to them
$(input[type="submit"]).addClass('myClass');
});
You can inclue CSS class in your asp:button code to give them a class and control their style:
<asp:button CssClass="mybuttons" />
Then you can use this class to style those buttons:
.mybuttons{
font-size:10px;
}
If you had more buttons that are not ASP.NET generated then this class only applies to buttons that are ASP.NET generated not others.
In .NET you need to provide a CSS class for your buttons. If you call it "Button1" for example, your CSS declaration would be:
.Button1 {
...
}
An ASP button is rendered in HTML as an INPUT of type="submit"... you can access all the buttons by using INPUT, but of course there are other INPUTS as well...
input {
font-weight: bold;
font-size: larger;
background-color: Red;
}
I have a web user control where I have ten asp buttons.
I want that when I hover on these buttons the cursor should change to hand cursor, I am able to do that.
Now I want that when I press a button it should change it's back and fore colors so that it looks selected.
I tried to do that by code but it's not working. Following is my css file content:
.buttonclass
{
background-color: Olive;
cursor: pointer;
}
.selectedItemClass
{
background-color: Blue;
color: White;
}
and on the button click I have written like:
Button btn = sender as Button;
btn.CssClass = "selectedItemClass";
but it's not working any idea or another way to achieve the required behavior.
Your code will only work after post-back, and then the button will remain with the selectedItemClass.
You will need to use client-side code to change the class of your button.
One option would be to use a javascript/jquery solution like:
$(".buttonclass").mousedown(function(){
$(this).addClass("selectedItemClass")
});
$(".buttonclass").mouseup(function(){
$(this).removeClass("selectedItemClass")
});
Have you checked if the class is added or replaced? or you can do:
.selectedItemClass
{
background-color: Blue!important;
color: White!important;
}
to check if the order of your css is ignoring the fact there are two different background-color and the priority of them.