I am trying to assign a class to form end button but when i try to style it by calling the class in css file, it do not make any effect.
Form Button:
echo $this->form->end('Sign Up', array('class' => 'forminput'));
CSS:
.forminput
{
width: 292px;
height: 32px;
}
Use $this->Form->submit() to create your submit button with required options and then use $this->Form->end() without any params to simply close the form tag.
Related
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;
}
Good day, I am building a web application and the user is allowed to upload a photo using a fileField. I am trying to style the button, however, nothing I try seems to work. At first I tried using the element inspector to look for the proper class type but that did not give the results I wanted. Next, I assigned a class to the fileField and created a css for that style but it did not work either. Here is my code:
my filefield
{
xtype: 'filefield',
x: 200,
y: 910,
cls: 'fileBtnClass',
width: 200,
fieldLabel: 'LABEL',
hideLabel: true,
labelStyle: 'text-align: center; color: white',
labelWidth: 140,
buttonOnly: true,
buttonText: 'Browse'
}
my css:
.fileBtnClass {
font-size: 40px !important;
font-family: 'Arial' !important;
font-weight: normal !important;
color: black !important;
background-color: white !important;
border-radius: 15px !important;
text-align: center;
}
What happens is that the button size gets larger to accommodate the text. However, the text itself does not get larger in any way.
Can anyone help me with my situation? Styling certain fields in ExtJS proves to be a pinch at times. Any help is very much appreciated. Thank you.
A Ext.form.field.File has a buttonConfig property which expect a Ext.button.Button configuration. If you filter for Cls within the button API you get at least 10 Cls properties that can all be used to style the button.
arrowCls : String
The className used for the inner arrow element if the button has a menu. ...
baseCls : String
The base CSS class to add to all buttons. ...
cls : String
A CSS class string to apply to the button's main element.
componentCls : String
CSS Class to be added to a components root level element to give distinction to it via styling.
disabledCls : String
CSS class to add when the Component is disabled. ...
focusCls : String
The CSS class to add to a button when it is in the focussed state. ...
iconCls : String
A css class which sets a background image to be used as the icon for this button. ...
menuActiveCls : String
The CSS class to add to a button when it's menu is active. ...
overCls : String
The CSS class to add to a button when it is in the over (hovered) state. ...
pressedCls : String
The CSS class to add to a button when it is in the pressed state. ...
Additional Info
cls -> the additional one
This class is added to the inner element of the button
baseCls -> the one who change it all
// following the template that is used to render a button
'<span id="{id}-btnWrap" role="presentation" class="{baseCls}-wrap',
'<tpl if="splitCls"> {splitCls}</tpl>',
'{childElCls}" unselectable="on">',
'<span id="{id}-btnEl" class="{baseCls}-button" role="presentation">',
'<span id="{id}-btnInnerEl" class="{baseCls}-inner {innerCls}',
'{childElCls}" unselectable="on">',
'{text}',
'</span>',
'<span role="presentation" id="{id}-btnIconEl" class="{baseCls}-icon-el {iconCls}',
'{childElCls} {glyphCls}" unselectable="on" style="',
'<tpl if="iconUrl">background-image:url({iconUrl});</tpl>',
'<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">',
'<tpl if="glyph">&#{glyph};</tpl><tpl if="iconCls || iconUrl"> </tpl>',
'</span>',
'</span>',
'</span>',
// if "closable" (tab) add a close element icon
'<tpl if="closable">',
'<span id="{id}-closeEl" role="presentation"',
' class="{baseCls}-close-btn"',
'<tpl if="closeText">',
' title="{closeText}" aria-label="{closeText}"',
'</tpl>',
'>',
'</span>',
'</tpl>'
The classes that are directly affected by baseCls:
// applied in the template
{baseCls}-wrap
{baseCls}-button
{baseCls}-inner
{baseCls}-close-btn
// just a view that are (may be) applied in code
{glyphCls}
{innerCls}
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;
}
jQuery UI makes buttons look nice with $('button').button();.
Is there an equivalent for text input boxes?
There's nothing to stop you from doing $("input").button()... I like this:
$('input:text, input:password')
.button()
.css({
'font' : 'inherit',
'color' : 'inherit',
'text-align' : 'left',
'outline' : 'none',
'cursor' : 'text'
});
A fuller example.
Add the class ui-corner-all to your input and post-style the input with CSS.
$('input').addClass("ui-corner-all");
http://jsfiddle.net/TTShr/
I know this is old. But, if anyone is just looking to style their inputs to look more UIish, just add the following classes: $('input').addClass("ui-widget ui-widget-content ui-corner-all");
You could just hard code the classes too.
To sum things up I would like to add my implementation:
$('input:text, input:password, input[type=email]').button()
.addClass('ui-textfield')
.off('mouseenter').off('mousedown').off('keydown');
The CSS would be:
.ui-textfield {
font: inherit;
color: inherit;
background: none;
text-align: inherit;
outline: none;
cursor: text;
}
See it here: http://jsfiddle.net/UXdLQ/1544/
I had the same problem, I came up with the following solution. Use these classes on your input field:
ui-widget ui-state-default ui-corner-all
You may modify the padding - f.e. if you select elements on your site - to be unified.
jQuery UI v1.11.4
also add a .off('keydown') to Corin's answer to prevent the box from turning white when enter or space is pressed.
The example in your question cites jQuery UI's Button widget. The idea of this widget is to have a range of options including ease of theme-ing. There is a widget for input boxes too. Some of them that I'm aware of are as below:
Auto-Complete Widget
Default Text Plugin for input-box
Text Limit Plugin for input-box / text-area
There are many such plugins if not for widgets. You can always browse/search through at the search box available in the page http://plugins.jquery.com/
I liked the idea of simply adding the classes so much I wrote it as a jQuery plugin. Benifit here is if at some poitn in the future jQueryUI do a version it will most likely use the same format, so converting will be easy.
(function($)
{
$.fn.input = function ()
{
return this.each(function ()
{
$(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
});
}
})(jQuery);
Call it like:
$('input, password').input();
If you wanted to add hover effects etc, just add the logic into
return this.each(function ()
{
// display logic
});
EDIT:
Added in additional class "ui-button" to make them the same height / padding etc as .button()
EDIT 2:
This turned out to be such a good idea I've carried on, adding a version for labels, and allowing custom CSS to be passed in.
// some styling for inputs
(function($)
{
$.fn.input = function (css)
{
if (!css)
css = {};
return this.each(function ()
{
$(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
$(this).css(css);
});
}
})(jQuery);
// and labels
(function ($)
{
$.fn.label = function (css)
{
if (!css)
css = {};
return this.each(function ()
{
$(this).addClass("ui-widget ui-button");
$(this).css(css);
});
}
})(jQuery);
Then too style your inputs / labels. The class / styles of these don't actually need to exist anywhere.
$(".client-input").input();
$(".client-label").label({ "min-width": "125px", "text-align": "right" });
Outputs UI like this - with inputs and labels matching the style of the button. (Select's need work)
To have the same corners/font/padding/spacing as button, but without the button interactions (hover, active etc.)
HTML:
input type="text" class="ui-button ui-widget ui-corner-all"
if you want to align text add another custom class
CSS:
.textfield { text-align:left; }
HTML:
input type="text" class="ui-button ui-widget ui-corner-all textfield"
When I create toolbar button in CKEditor 3.0 with following code I need to uncomment icon property to get button visible. Otherwise space is occupied but no label is shown. When I hover over it I get caption popping up.
editor.ui.addButton('customButton', {
label: 'Custom Action',
//icon: this.path + 'images/anchor.gif',
command: commandName
});
Do you know how to create toolbar button without icon? Just a pure text.
An easier way is that CKEditor creates a CSS class on your custom label automatically called:
cke_button_<command>
For example, if your command for the button was called 'myCommand', and you set 'label: 'My Command', then CK would render something like:
<a id="cke_27" class="cke_off cke_button_myCommand" ....>
...
<span id="cke_27_label" class="cke_label">My Command</span>
</a>
Therefore (assuming you are using the 'kama' skin - substitute for your skin if not), you can use the following CSS to override the cke_label ==> display:none
.cke_skin_kama .cke_button_myCommand .cke_label {
display: inline;
}
Voila.
This is how I did it. A button looks like this:
<span class="cke_button">
<a id="cke_..." class="cke_off cke_button_cmd" ...>
<span class="cke_icon"/>
<span class="cke_label">Label</span>
</a>
</span>
.cke_label is styled "display:none" by default. This would do exactly what we want:
<span style="display:none;" class="cke_icon"/>
<span style="display:inline;" class="cke_label">Label</span>
So the selectors are a bit tricky, put this in the Style Tag on the page with the editor:
<style type="text/css">
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_icon{display:none !important;}
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_label{display:inline;}
</style>
The ckeditor authors applied css to get the label on the source button (presets.css):
/* "Source" button label */
.cke_skin_kama .cke_button_source .cke_label
{
display: inline;
}