is it possible to change the button text on the Ajax control toolkit's AsyncFileUpload control from "Select File" (modern style) to something else? it should be a simple thing like Text property on Button, but I can't find any property for this. also is it possible to apply any other custom styles for the button?
Download the Ajax Toolkit source code and make the styling adjustments there. Recompile the project and use the new DLL. The controls tend to have styling embedded as web resources, which override the CSS you may try to apply.
there is another one way
<div class="inputblock" style="width: 350px;">
<ajaxToolkit:AsyncFileUpload runat="server" ID="FileUP" ClientIDMode="AutoID" UploaderStyle="Modern" OnUploadedComplete="FileUP_UploadedComplete" Width="100%" />
</div>
these renders something like this
<div id="ctl00_PopUpPlaceHolder_FileUP">
<input name="ctl00$PopUpPlaceHolder$FileUP$ctl00" id="ctl00_PopUpPlaceHolder_FileUP_ctl00" type="hidden">
<div id="ctl00_PopUpPlaceHolder_FileUP_ctl01" style='background: url("/WebResource.axd?d=some&pars") no-repeat 100% 1px; margin: 0px; width: 100% !important; height: 24px; text-align: right; min-width: 100%;'>
<input name="ctl00$PopUpPlaceHolder$FileUP$ctl02" id="ctl00_PopUpPlaceHolder_FileUP_ctl02" style="width: 100%; font-size: 14px; opacity: 0; -moz-opacity: 0.0;" type="file">
<div style="text-align: left; margin-top: -23px;" type="text">
<input name="ctl00$PopUpPlaceHolder$FileUP$ctl04" id="ctl00_PopUpPlaceHolder_FileUP_ctl04" style="width: 248px; height: 17px; font-family: Tahoma; font-size: 12px;" type="text" readonly="readonly">
</div>
</div>
and you always may change th css to change any syling like this:
#ctl00_PopUpPlaceHolder_FileUP_ctl01 {
background: url("/img/input_file.png") no-repeat right top !important;
//some othe stylings, but "!important" is strongly necessarily
}
this works.
Related
I have tried different ways for this but none of them were working for me so I am asking this question.
I have a images
I do have the following form
<div className="login-form">
<form className="form-horizontal" id="loginForm">
<div className="form-group" id="username-div">
<input type="email" className="form-control usertext" id="username" placeholder="Email" />
</div>
</div>
</div>
I tried using the position absolute as well. but not working.
So, How can I resolve this issue ?
Any hint or help will be helpful.
There are several ways you can achieve this, one is to use absolute positioning and put the icon inside the input, but I prefer this way:
.custom-input {
background-color: white;
border: 2px solid #ededed;
padding: 6px;
width: 215px;
border-radius: 3px;
}
.custom-input>* {
vertical-align: middle;
}
.custom-input img {
width: 25px;
height: 25px;
display: inline-block;
}
.custom-input input {
border: none;
height: 40px;
display: inline-block;
outline: none;
margin-left: 6px;
}
<div class="custom-input">
<img src="https://i.stack.imgur.com/KNLAq.png" alt="user-icon" />
<input type="text" placeholder="username" />
</div>
But, please note that it's not the recommended way, and it's better to use font-icons for this case. There are already lots of beautiful, and elegant font icons for this case.
You can set background-image of the input element to use your image and then use padding to adjust cursor/placeholder position, Here's sample css:
input {
background-image:url(https://i.stack.imgur.com/KNLAq.png);
background-repeat: no-repeat;
background-size: contain;
padding-left:20px;
}
You can use fontawesome library for this use:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" placeholder=" Username" style="font-family:Arial, FontAwesome" />
You can use Font awesome icons in place holder as and link font awesome cdn to your page using following code
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
then add font awesome icon using its code value(CSS content Value)
<input type="text" name="text" placeholder=" " style="font-family:Arial, FontAwesome">
and set font-family to FontAwesome
In an overlapping like the one below, how to prevent the large space between the title and text field?
.icon-link-mail {
position: relative;
left: 485px;
top: 29px;
padding: 8px 8px 7px 8px;
z-index: 2
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result can be seen in this fiddle
Personally I'd just use a pseudo-element, but if you wish to use the <i> icon, then we can do that a lot better by using position:absolute instead of position:relative. Adding position:relative just moves the icon, but leaves the space that it would have taken. position:absolute won't leave that space.
We need to make sure to set the parent contain (label) to position:relative though, so that the icon will be absolutely positioned in relation to the parent instead of the entire page.
#mail_form label {
position: relative;
}
.icon-link-mail {
position: absolute;
z-index: 2;
right: 0;
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result
Fiddle
http://jsfiddle.net/Ay6Hw/4/
I find the best way to do this is to just use an image. Here would be the code:
.search input {
padding-left: 17px;
background: #FFF url("../images/icon_search.png") left no-repeat;
}
.search input:focus {
background:#fff;
}
This will also remove the background image on focus giving the user a better experience overall.
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
Using bootstrap, I created input-group with a button and input type='file'.
It is working fine everywhere except IE9. On IE9 the browse button is being cropped from right side.
Demo: http://jsbin.com/alESiBo/6/edit
Code:
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="icon-upload-alt"></i> Upload
</button>
</span>
<input id="fileField" class="form-control" name="fileField" type="file" />
</div>
Output:
IE 9.0.8112.16421
Chrome 31.0.1650.63 m
IE Version with snapshot:
What you are seeing ( the grey part ) is the 'browse..' part of the file upload in IE9. This is 'just the way it is' for the bootstrap css. As other answers have shown, if you do not like this, yeah, just need to have a look into making your own.
Add this in your head tag to prevent further mismatches though...
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
Most common is to set this control hidden ( I agree it always looks awful and inconsistent ) and 'trigger' it from your own fake button.
Lots of great links from other answers.
Like Rob Sedgwick said in his answer this is just the way the control looks in IE, and styling it is not really allowed.
But… you can cheat: make the file input disappear, and create your own fake input. Then redirect the relevant events using JS.
HTML
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="icon-upload-alt"></i> Upload
</button>
</span>
<input id="fileField" class="form-control" name="fileField" type="file" />
<span class="form-control form-control-overlay" id="fileFieldOverlay">Choose file</span>
</div>
CSS
.form-control[type="file"] {
margin-bottom: -100%;
opacity: 0;
}
.form-control-overlay {
/* style, if you want */
cursor: pointer;
}
Javascript
var fileFieldEl = document.getElementById("fileField");
var fileFieldOverlayEl = document.getElementById("fileFieldOverlay");
// On change of file selection, update display
fileFieldEl.onchange = function(ev) {
// remove file path; it's a fake string for security
fileFieldOverlayEl.innerText = ev.target.value.replace(/^.*(\\|\/)/, '');
};
// Redirect clicks to real file input
fileFieldOverlayEl.onclick = function() {
fileFieldEl.click();
};
Run the code: http://jsbin.com/alESiBo/16/edit
add one more class :
bootstrap.css:3296
.input-group {position: relative; display: table; border-collapse: separate; width: 100%;}
try this may be it will be help you out.
Your code seems to work fine in IE9.
http://fiddle.jshell.net/XCN83/1/show/
So, make sure your compatibility mode is not on. (see red circle in the attached image)
If not, some other css you have is affecting it, use the dev tools inspector to find styles applied to the file input box and it's parents working your way up.
I will suggest to use your own custom CSS to give same look and feel across the browser and same behavior across the browser. I have used similar approach to take care of this issue in my project. Following are same details also link of JSBIN for live demo.
HTML Code:
<!--Import button-->
<div class="fileinput-button import-modal-select-file-btn" title="Import file">
<!--Name of button -->
<span>Upload</span>
<!-- Upload file control-->
<input id="importFileUploadFileId" type="file" name="file" onchange="uploadFile(this);" />
<!-- Any hidden field; Generally needed when upload button is part of form-->
<input type="hidden" name="request" value="value"/>
</div>
CSS Code (Please customize as per your need):
.fileinput-button {
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #e7e9eb;
border: 1px solid #454b59;
font-family: "Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #454b59;
font-weight: lighter;
font-size: 16px;
cursor: pointer;
overflow: hidden;
position: relative !important;
background-image: none;
height: 30px;
outline: none;
height: 28.5px;
line-height: 28.5px;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 16px;
direction: ltr;
cursor: pointer;
}
.import-modal-select-file-btn {
width: 50px;
}
Following is live JSBIN link for your reference.
http://jsbin.com/EWIGUrEL/1/edit
Hope it may help.
I'm a new user to StackOverflow. Looking forward to be part of your wonderful community. My question is as follows:
I want to use a Twitter Bootstrap modal box on my website. However, I'm facing problems getting the CSS to work on the modal box. I wrote the following HTML code:
<div id="playModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<span class="login"><strong>Login</strong></span>
</div>
<div class="modal-body">
<form class="form-horizontal" accept-charset="utf-8" method="post" action="#">
<fieldset>
<div class="control-group">
<label class="control-label" for="play_form_username">Username</label>
<div class="controls">
<input type="text" id="play_form_username" name="username" placeholder="Enter your username" required />
</div>
</div>
<div class="control-group">
<label class="control-label" for="play_form_password">Password</label>
<div class="controls">
<input type="password" id="play_form_password" name="password" placeholder="Enter your password" required />
</div>
</div>
</fieldset>
<span>Forgot your password?</span>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Play!</button>
</div>
</form>
</div>
<div class="modal-footer">
<span>Not a member yet? Join Now!</span>
<!--need to find a way to get this modal box to disappear if registerModal is called-->
</div>
</div>
Next, I want to configure the design of the page. I am using LESS to write code which is converted to CSS through SIMPLESS. I tried passing my desired CSS configuration through the modal div ID in the following LESS code:
#playModal{
width: 300px;
.modal-backdrop,
.modal-backdrop.fade.in{
opacity: 1;
filter: alpha(opacity=100);
}
.modal-header{
.login{
font-family: arial;
font-size: 60px;
font-weight: bolder;
}
}
.modal-body{
max-height: 200px;
}
}
This compiles successfully to CSS, but when I analyse the webpage using Firebug, it appears that none of the CSS has been passed for the modal box. Instead, if I use pass the CSS configurations by class, similar to the following, it works.
.modal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
padding: 7px 15px;
.login{
color: #203665;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}
}
}
Why is it that the CSS rules are not passed when referring to the modal box by ID? Isn't ID be more specific than class? Note: even when i use !important on the code using ID, it doesn't work.
It will be greatly appreciated if someone can help me out- though it's probably because I did something stupid. (The context why I need to use ID and not just class is: I'm needing to add a second modal box, and I want it to have different size, field sizes etc.) Thanks.
EDIT: (Answers my own silly question)
After dabbling around with the code, I found that the following works:
//Settings for all models
.modal-backdrop.fade.in{
opacity: 0.9!important;
filter: alpha(opacity=90)!important;
}
//Settings for playModal
#playModal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
padding: 7px 15px;
.login{
color: #203665;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}
}
.modal-body{
padding: 10px;
.control-group{
margin-bottom: 10px;
.control-label{
width: 65px;
text-align: left;
}
.controls{
margin-left: 75px;
}
}
span a{
display: block;
margin-top: 0px;
padding-top: 15px;
float: left;
&:hover{
text-decoration: none;
}
}
.form-actions{
display: block;
float: right;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #FFFFFF;
.btn{
font-size: 18px;
line-height: 24px;
}
}
}
.modal-footer{
padding: 7px!important;
}
}
I think what I did wrong was to put the .modal-backdrop.fade.in inside the #playModal, it dawns on me now that .modal-backdrop.fade-in would be referring to the area outside of the #playModal div.
So all in all it was just a trivial mistake that got me worked up for so many hours. Sorry to waste everyone's time. What a way to start on StackOverflow. But anyway thanks everyone for trying to help me out. Please vote to close this post.
You're using the wrong case.
You give the element the id, playModal
Your css refers to #playmodal
Css is case-sensitive.
I have the following html which is display correctly in IE8. Below is the html and the css for grey_btn_75. Any idea why this would be happening?
<div style="float: left; width: 70px; margin-right: 25px; padding-top: 60px;
margin-left: 25px">
<asp:Button ID="btnAddAll" runat="server" Text="Add All"
OnClick="btnAddAll_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnAdd" runat="server" Text="Add"
OnClick="btnAdd_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemove" runat="server" Text="Remove"
OnClick="btnRemove_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemoveAll" runat="server" Text="Remove All"
CssClass="grey_btn_75"
OnClick="btnRemoveAll_Click" /><br />
</div>
CSS:
.grey_btn_75
{
background: url(../images/grey-75px.png);
background-repeat: no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-weight: bold;
width: 75px;
height: 23px;
color: #000000;
cursor: pointer;
}
Things I have tried so far:
I removed the CssClass and the buttons still did not show up.
I modifed the CssClass and the buttons still did not show up.
I put other controls such as an asp:Label and and asp:ImageButton and they showed up fine.
I tried putting a new button and it did not show up.
Your div width is 70px, your button is 75px. You need to clean that up.
The problem is with the styles. Try commenting them out to see which one (or the combination) is responsible for the buttons to disappear.
Don't forget about the inline style of the top DIV as well.
This is a nice guide for button styles:
http://particletree.com/features/rediscovering-the-button-element/
People recommend
width:auto;
overflow:visible;
specifically for IE
I think it is the color value you have set in your CSS. I got the same problem previously and what I did was change the color value to something else.