I am using the ng-file-upload directive to upload files. I have a scenario where the number of files to be uploaded is decided dynamically. Also I have created have a slightly deviated scenario form the standard where Upload and Submit buttons are separate and needless to say do different actions.
Now what I want to do is get the Choose File ie. <input type="file"> and Upload Button on the same line but I have not been able to do so.
My Relevant Markup:
<input type="file" ngf-select ng-model="input.value" name="{{input.name}}" ngf-model-invalid="errorFile" required>
<button type="button" ng-show="input.value !== null" ng-click="uploadFile(input.value, $index)">Upload File</button>
<span ng-show="input.value.progress >= 0">
<div class="progress" style="width:{{input.value.progress}}%" ng-bind="input.value.progress + '%'"></div>
</span>
What can I do in this case?
You can try to float-right the button (see here)
Like this:
<style type="text/css">
div.inline { float:left; }
.clearBoth { clear:both; }
</style>
and at the end clear the float with class clearBoth
Related
I have a button which consists of a image & name. On clicking of that button I need to replace the image & content. I have given my code below.
<div class="btn-default">
<button name="Save" [ngClass]="[bntStyle]" (click)="submit()">
<img class="img1" src="./image1.png"/><a
class="sidebarlinks" >Content1</a>
</button>
</div>
Likewise I have few more buttons.
My ts file:
submit() {
this.bntStyle = 'btn-change';
}
My css file:
.btn-change {
background-image: url("./image1_after_click.png");
}
Can somebody help me with this please?
You need to remove [] from ngClass value
<button name="Save" [ngClass]="bntStyle" (click)="submit()">
Not sure how to style or change the text of the "Choose File" button inside of my file upload input field.
http://codepen.io/leongaban/pen/wrCLu
<input id="choose_file" type="file" name="datafile" size="40">
input {
padding: 10px 15px;
border: 0;
background: orange;
}
^ Here the background gets styled instead of the button.
As I told you in my comment you can simply create whatever layout and visuals you like to a button and create a file button then simply hide that file button and bind the event on the styled button to trigger the file button.
I've made this example for that purpose:
Codepen with custom file button
There are no native options for styling an input[type="file"] element. However, this article describes a cool (but hacky) trick you can use to accomplish this. Basically:
Create a button and style the layout as you would like it to appear.
Position your <input type="file" /> absolutely over the top of your new button element.
Add a z-index to the element to make it one level above the styled button.
Set the input to have an opacity: 0;
Wire up the proper events described in the article to make the input function accordingly.
CSS only solution
You can use the file-selector-button CSS pseudo-element
::-webkit-file-upload-button{
..
}
more information
Here is my straight-forward HTML 5 solution shown using an MVC Razor Form, but you could use a plain html form just as well. This solves the problem with the Input type=file not rendering the same in all browsers. You could style the browseBtn however you like by setting a background image for it. I tested this in IE 11, Firefox, and Chrome. IMO, the look of the default Chrome native control (shown in the question) is unacceptable.
Index.cshtml
<h2>Index</h2>
#using (Html.BeginForm("postFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div style="display:inline-block; margin-bottom:10px">
<input type="text" name="uploadControl" id="uploadControl"
style="width: 400px; height: 1.1em;" readonly="true" >
<button type="button" id="browseBtn" >Browse...</button>
</div>
<input type="file" name="upfile" id="upfile" style="display:none;" >
<button type="submit" id="uploadbtn" style="display:block">Click to upload</button>
<br><br>
#ViewBag.Message
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/UploadFile.js"></script>
UploadFile.js
$('#browseBtn').click(function () {
$('#upfile').first().trigger("click"); //cause the browse menu to pop up
});
$('#upfile').first().change(function (event) {
event.preventDefault();
var fileName = $('#upfile').val();
if (fileName && fileName.length > 0) {
$('#uploadControl').val(fileName);
}
});
HomeController.cs
public ActionResult postFile(HttpPostedFileBase upfile)
{
if (upfile != null && upfile.ContentLength > 0)
{
try
{
string path = Path.Combine(Server.MapPath("~/Images"),
Path.GetFileName(upfile.FileName));
//upfile.SaveAs(path);
ViewBag.Message = Path.GetFileName(upfile.FileName) + " uploaded successfully";
}
catch (Exception ex)
{
ViewBag.Message = "ERROR:" + ex.Message.ToString();
}
}
else
{
ViewBag.Message = "You have not specified a upfile.";
}
return View("Index");
}
I have this:
<div id="sidebar-a">
<form id="form">
<input class="button" type="submit">
</input>
</form>
</div>
And I need to select only the input (my page has same <form> in #footer, the only way to change property of this one is, like I tried to do, with #sidebar-a, but it doesn't work)
Given that you made no mention of JQuery, I'm assuming you're trying to select the input element via CSS.
#sidebar-a > form > input.button:first-child {
font-size: 2em;
}
An example is available at this JSFiddle
You should not have 2 form elements with same ID. However this will do it:
#sidebar-a > form > input.button:first-of-type { }
I am using Dojo for tooltip. When, user move over the icon the message should be displayed.
.claro .dijitTooltipConnector {
background-image: none;
background-repeat: no-repeat;
border: 0 none;
height: 14px;
width: 16px;
z-index: 2;
}
I want this icon next to this DataTextBox. Who to do this? Please help
<td>
<p style="padding-left: 100px;">
<label id="acid">Date for CC:</label>
<input dojoType="dijit/form/DateTextBox" name="datecc" id="datecid" style="width:200px;" maxlength="50" />
</p>
</td>
Have you tried using dijit/Tooltip?
A simplified example from the documentation:
<button id="buttonId" data-dojo-type="dijit/form/Button">Button Text</button>
<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'buttonId',position:['above']">
Tooltip Content
</div>
So in your case you probably want a dijit/Tooltip whose connectId value refers to datecid and whose position value is ['left','right'] or whatever your position preferences are. (If it can't fit on the left, it'll go right as its second-choice.)
Note that this example uses HTML ID values, but other examples can show CSS selectors. (I've made a custom subclass that supports attach-point names, but it's still very experimental and hacky.)
Try using "dijit.showTooltip()" to show the tooltip at any place instantly, without need to write any HTML code for tooltips. (similarly, "dijit.hideTooltip" for hiding the same). Let me give a small example of how you can use it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox", "dijit/Tooltip"]);
function showTooltip() {
var domNode = dijit.byId('datefld').domNode; //domNode to which the tooptip must point to
dijit.showTooltip("Enter your date of birth here!!", domNode,["above"]); // you can use "above" or "below" or "right" or "left"
}
function hideTooltip() {
var domNode = dijit.byId('datefld').domNode;
dijit.hideTooltip(domNode);
}
</script>
</head>
<body class="claro">
<label for="firstname">Name: </label>
<input type="text" name="firstname" data-dojo-type="dijit/form/ValidationTextBox" id="firstname" promptMessage="Enter your name here!"/><br/><br/>
<label for="firstname">DOB : </label>
<input type="text" name="datefld" data-dojo-type="dijit/form/DateTextBox" id="datefld" promptMessage="Enter your date of birth here!"/>
<br/><br/>
<span onmouseover="showTooltip()" onmouseout="hideTooltip()">hover here for tip!!</span>
</body>
</html>
Note: This is a bit legacy way of coding mixed with the new AMD design. But, this would be more elegant for your scenario.
I have a problem. I have two HTML buttons, and I want to show one at one time. I have code which is working fine but the problem is of space. In the GUI, spaces of both buttons are present which is not acceptable. I want to place both buttons on the same location.
The code is:
function searchWithin(id)
{
if(document.getElementById("searchwithin").checked)
{
document.getElementById('searchwithin_'+id+'_searchButton').style.visibility="visible";
document.getElementById(id+'-form-submit').style.visibility="hidden";
}
else
{
document.getElementById('searchwithin_'+id+'_searchButton').style.visibility="hidden";
document.getElementById(id+'-form-submit').style.visibility="visible";
}
}
<g2:button style="visibility:visible;" id="${g2:escapeXml(componentId)}-form-submit" name="submitButton" type="submit" value="Search" bamId="${searchBarBam}" actionName="${action}" inputClass="p-userSearchButton" />
<input style="visibility:hidden;" type="button" class="p-userSearchButton" name ="searchinresult" id="searchwithin_${componentId}_searchButton" value="Search Within" onClick="javascript:($C('${componentId}')).filterBySearchWithIn('${searchBarBam}','${componentId}-form-text');"></input>
I need to change it like:
document.getElementById('searchwithin_'+id+'_searchButton').style.display="none";
document.getElementById(id+'-form-submit').style.display="true";
<g2:button style="display:true;"
id="${g2:escapeXml(componentId)}-form-submit"
name="submitButton"
type="submit"
value="Search"
bamId="${searchBarBam}"
actionName="${action}"
inputClass="p-userSearchButton" />
<input style="display:none;"
type="button"
class="p-userSearchButton"
name ="searchinresult"
id="searchwithin_${componentId}_searchButton"
value="Search Within"
onClick="javascript:($C('${componentId}')).filterBySearchWithIn('${searchBarBam}','${componentId}-form-text');"></input>
But it's not working.
You want display: none; not visibility: hidden.
Edit
In your edited code you use display: true to show a button, but correct syntax would be: display: inline. For more display options view: w3schools.com/css/css_display_visibility.asp.
If this does not fix your problem, please define more clearly what your issue is exactly.