I am using the ajaxtoolkit:AsyncFileUpload, and I was wondering if there is even a way to change the button that goes along with it?
<ajaxtoolkit:AsyncFileUpload Width="200" ID="filImageUpload" ThrobberID="imgUploadProgress"
OnUploadedComplete="filImageUpload_UploadComplete"
OnClientUploadComplete="filImageUpload_UploadImageComplete"
OnClientUploadStarted="filImageUpload_UploadStarted"
OnClientUploadError="filImageUpload_UploadError"
UploaderStyle="Traditional" CompleteBackColor="LightGreen" ErrorBackColor="Red" runat="server" />
Is there another attribute that will allow me to change it that I am missing? Or can I change it using CSS?
I know that when it renders I get and input element, but I don't know if I am able to change that text through that in CSS either.
Any help will be appreciated
Not a real fix, but by changing the UploaderStyle="Traditional" to UploaderStyle="Modern", you will be able to make the button an image instead. You can then add a CssClass to the AsyncFileUpload and add a background image through the style sheets.
.AFU
{
position: relative;
float: left;
clear: both;
top: 0px;
padding-left: 0px;
padding-right: 0px;
width: 200px;
border:thick;
margin:0px;
background: url("Your/Path/Here") no-repeat 100% 1px;
}
Just do that:
$("#AsyncFileUpload1").find('div').css('background', 'transparent');
$("#AsyncFileUpload1").find('div').css('background-image', 'url("Images/btnSelecionar.jpg")');
Replace AsyncFileUpload1 by your ControlId.
Works fine for me! =)
Related
I am unable to set Select box height for DropDownCheckBoxes in asp.net. I was able to set SelectBoxWidth, DropDownBoxBoxWidth, DropDownBoxBoxHeight.
I even tried adding SelectBoxCssClass but not working. First image is my current output. I am trying to get output as in second image
Any help appreciated
<asp:DropDownCheckBoxes ID="DdlProject" runat="server" OnTextChanged="DdlProject_TextChanged"
AddJQueryReference="true" AutoPostBack="true" CssClass="dd_chk_select" OnSelectedIndexChanged="DdlProject_SelectedIndexChanged" >
<Style SelectBoxWidth="120" DropDownBoxBoxWidth="120" DropDownBoxBoxHeight="120" DropDownBoxCssClass="btn-default dropdown-toggle" SelectBoxCssClass="btn-default dropdown-toggle dd_chk_select"/>
<Texts SelectBoxCaption="Select Project" />
</asp:DropDownCheckBoxes>
.dd_chk_select {
height: 30px;
text-align: center;
border-radius: 5px;
}
in your style try setting the tag as important
.dd_chk_select {
height: 100px !important;
text-align: center;
border-radius: 5px;
}
You said it worked, this means that your height style was being overwritten somewhere.
I have a on my page and I have styled it with css.
input[type=range] {
-webkit-appearance: none;
background-color: #1b2b66;
width: 300px;
height: 3px;
position: relative;
top: -9px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-image: url("../images/slider.png");
background-size: 100% auto;
border: 0px;
width: 35px;
height: 35px;
}
The issues is: on the ipad when the user clicks the slider thumb a black border surrounds the image. How do I hide this?
You need to use modernizr to perform a feature detect.
<script src="modernizr.js"></script>
<script>Modernizr.load({
test: Modernizr.inputtypes.range,
nope: ['use your css to define the range input format']
});
</script>
This test looks for support. When it fails, it loads your css to format that input. If a browser has support for this tag, which means there will be a standard way it renders that control and your css will be redundant. In this case, we usually just let the browser ignore our css settings.
If you really want to override the default css settings. Try using !important.
border: 0 !important;
I figured out my issue. First of all thank you everyone for the help.
I forgot to set the background-color: property. I set it to #FFF and now have the desired effect.
I have the following ASP.Net code
...
<div style="width: 40%; float: left; margin-left: 15px">
<b>County:</b>
<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0"
AutoCompleteMode="SuggestAppend" CssClass="EPSCombo">
</asp:ComboBox>
<br />
...
The problem: This div contains many combobox's and they are not showing as expected, they all have EPSCombo class. and when I debug the CSS I find that it is being overridden, here is the output from FireBug
My EPSCombo style is as follows (overriding the default AjaxToolkit CSS)
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
margin: 0;
border: solid 1px #7F9DB9;
border-right: 0px none;
padding: 1px 0px 0px 5px;
font-size: 13px;
height: 18px;
}
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
margin: 0;
padding: 0;
background-image: url(../images/windows-arrow.gif);
background-position: top left;
border: 0px none;
height: 21px;
width: 21px;
}
.EPSCombo .ajax__combobox_itemlist
{
border-color: #7F9DB9;
}
And the CSS file containing EPSCombo is the last one included in the Master page.
Question: It might had been a while since I did web development, but if I decide the CSS class for a control shouldnt that have the highest priority and should override everything else, correct? If so, then why is my combobox style (Height, Width, margin, and padding) is being overridden?? I dont have any other style class that set the height and width for those values shown in Firebug.
Update after Loki's answer I thought I should add this, adding !important to these attributes would solve the problem, but I want to get to the root cause of this and see where things went wrong.
Your ComboBox may be inheriting it's styling from the <div> it is contained in, or from a div higher than that. Since you have not specified a 'class' or 'ID' attribute for the div that it is contained within, that div may be retrieving style from your CSS file if you have something like:
div
{
height: 21px;
margin: 0px;
padding: 0px;
width: 21px;
}
To force your ComboBox to take independent styling though you may use the asp style attribute like so:
<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0"
AutoCompleteMode="SuggestAppend" style="margin: 0;padding: 0;height: 21px;width: 21px;">
</asp:ComboBox>
That should be the highest priority over any other styling that may be interfering in your application. Although considered improper programming practice it may help you narrow down the issue.
Cheers, Eric
EDIT I should also mention that your CSS code is interpreted in order from the most specific to least specific tag definitions. Ex, div.menu is more specific than div, this may be occurring somewhere else in your style-sheet.
This is also a good article to look at describing inheritance. Hope this helps!
A quick fix - add !important flags to your stylesheet. They'll have higher priority over everything else, unless there are other flags defining the very same property of the very same element
When Googling this hurdle, it came up with a ton of info about how to apply css and different static buttons as rollovers, when using an image as a button in a form.
My question is, how would you go about changing the button for each mouse event (on the button) and if you are using ONE image for all states?
For example... I have the following HTML for my button
<input type="image" id="login_submit" name="login_submit" src="button_login.png" />
and seperate to this I have the following CSS that I used before...
#login_submit a {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit a:hover {
background-position: -141px 0;
}
#login_submit a:active {
background-position: -282px 0;
}
now obviously it won't work at the moment... so how would I go about it? I'm looking for a more 'pure' CSS solution so no JS to brighten the day.
or should I stick with having 2/3 separate buttons for each state?
Well the main problem seems to be that you are trying to style an anchor that is a child to "#login_submit" instead of just "#login_submit", try this:
#login_submit {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit:hover {
background-position: -141px 0;
}
#login_submit:focus {
background-position: -282px 0;
}
Good luck,
Leo
I had this problem too, but just solved it.
By using an input type="image" and adding a 1x1px blank (transparent) .png or .gif to the src of the form element. Then using CSS for setting the background as the double (or, in the above case, triple) rollover image. The form element uses the blank .png as image, but beneath it lies the CSS handled background image, showing a beautifully working rollover with submit button functionality across its height and width.
=)
Code is taken directly from my situation:
HTML:
<div class="formrow">
<input id="send" type="image" src="../blank.png" name="Submit" onclick="submit" alt="Send" />
</div>
CSS:
#send
{
height: 25px;
width: 107px;
overflow: hidden;
display: block;
float: right ;
background: url('../images/style/button-send.png');
}
#send:hover
{
background-position: 0 -25px;
}
I hope this helps. =)
By the way, for me this approach took care of the problems mentioned by svict4 as well. =)
I have a button i want to convert the button into a hyper link, it works fine in Mozilla but in Internet Explorer it presses down as a button a click takes place ... so please help ....
Input.Button-Link, input.Button-Link:active
{
border: 0px;
behavior: url("cssHover.htc");
padding: 0px;
width: auto;
overflow: visible;
background: transparent;
color: Blue;
text-decoration: underline;
display: inline-block;
}
input.Button-Link:active
{
padding-right:50px;
outline:0;
}
Input.Button-Link:hover
{
cursor: pointer;
}
I don't understand what you're trying to accomplish but here are a few things you can try:
Add styles to input.Button-Link:focus
By using <input type="image" src="button.gif" alt="Button" />
In conjunction with jQuery use this plugin to style your buttons
You need JavaScript to solve this for IE.
IE's behaviour here is hard-coded and can't be changed with CSS IIRC. The last thing that springs to my mind is to use display: inline instead of display: inline-block.
You might be better off using a link and a tiny bit of JavaScript.