Is there a way to make this work using Semantic-ui?
I have this button, which look OK, but the input file never gets called.
<div class="ui icon big button">
<i class="cloud icon"></i>
<input type="file" id="hidde-new-file" style="display: none">
</div>
I'd recommend adding a label pointing to your hidden input. Labels trigger their input when clicked. All native without JS.
<div>
<label for="hidden-new-file" class="ui icon button">
<i class="cloud icon"></i>
Open File
</label>
<input type="file" id="hidden-new-file" style="display: none">
</div>
I found a solution :
Put your file input outside the div, add an ID to the div, then add this JavaScript :
$("#divUpload").on("click", function() {
$('#hidde-new-file').click();
});
Here is the JSFiddle
Related
HTML code:
<div class="form-item-input">
<button class="file-btn">
<span class="form-item-icon material-symbols-rounded">Upload</span>
<input id="file" type="file" accept="image/*" required>
<label for="file" class="upload-text">Upload</label>
</button>
</div>
With CSS it looks like this: click
How can i make the whole button clickable and activate a file input? Also need to make it that way that it would apply styles the is being used on button (for e.g. now on button applied cursor: pointer that didn't apply for that little input type="file")
Thanks!
I have an input on my website which whenever i click in it displays the following
I have the following HTML for the input
<div id="searchFieldSectionDiv" class="form-group">
<div class="btn-group" style="width: 100%">
<label class="sr-only" for="searchField">Filter results</label>
<div class="input-group">
<!-- TODO: Need to filter products section as the user types -->
<input id="searchField" class="form-control" placeholder="Type to search..." autocomplete="off">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
<div class="input-group-append">
<div class="input-group-text">
<i class="fas fa-search" style="margin-right: 0px"></i>
</div>
</div>
</div>
</div>
</div>
I have tried adding type="search but it still displays the address box.
Not to sure on how to hide it, all other browsers seem fine, just Chrome.
Ideally i want to add this at top level so i dont have to keep adding this to every input but again not too sure which level to add it too (body maybe?)
You have to change autocomplete="off" to autocomplete="disabled"
Chrome stopped supporting autocomplete="off" that's why it isn't working but it doesn't understand if you use autocomplete="disabled" that's why this works for now
Hello There
I'm trying to create a login form in my web-app (Angular 6). The weird thing is that my Button tag is not showing up in the front-end. And there is no compilation error.
This is my button:
<form [formGroup]="loginForm" class="form mt-4" (submit)="login()">
<div class="form-group">
<input
formControlName="password"
type="password"
class="form-control"
placeholder="Password"><br>
<vmessage
*ngIf="loginForm.get('password').errors?.required"
text=" Password is required!">
</vmessage>
</div>
<button [disabled]="loginForm.invalid"
type="submit">
login
</button>
</form>
And this is the CSS:
button
{
display: initial;
background-color: pink;
}
Any other tag works, p tag, a tag, div tag or simply text. They all show up, but i need the button one because of the form validator. (by the way, simple button tags don't appear either)
This makes no sense for me. What am I missing here?
SO, I managed to fix this issue by putting the button tag inside a span.
If this helps someone, that's how I fixed it:
<span *ngIf = "loginForm.valid" >Login
<button type="submit">
login
</button>
</span>
I have an issue. I am trying to create a single line that contains a radio, a label, and a clickable icon and I want all of these elements to be inline. I want it to be set up like:
Radio Label Icon
in that order. My code HTML looks like this:
<div class="wrapper class>
<div class="radio" label="this is my label">
<input type="radio" value="1" required>
<i class="material-icons" ng-click="some-action">info_outline</i>
</div>
</div>
I have tried to place the icon outside of the label class, but it does not display inline and I have also tried to use display:inline; in my CSS code, to no avail. I am trying to just separate the icon and the label, but I cannot seem to get this to work.
Any and all help would be greatly appreciated!
Thank you in advance!
Change the div class="radio" to an span:
<div class="wrapper">
<span class="radio" label="this is my label">
<input type="radio" value="1" required>
<i class="material-icons" ng-click="some-action">info_outline</i>
</span>
</div>
https://jsfiddle.net/qq3nLwp3/
And improved with some css:
div.wrapper input, div.wrapper i { {
vertical-align: middle;
}
I have the form below, in which I have a search glyphicon inside the input.
<form method="get">
<div class="input-group">
<input type="text" class="form-control" id="city" name="city"/>
<span class="input-group-addon btn"><span class="glyphicon glyphicon-search"></span></span>
</div>
</form>
I'd like to make my glyphicon submit my form, but for that I'd have to change the span for a input or button. In either way, the glyphicon goes outside the input and displays below it. I couldn't figure out why yet. I was able to put it in the correct position through absolute positioning, but it is not good for the way it is displayed in the website. Is there any way to solve this problem only with css and without absolute positioning?
The problem is bootstrap style buttons and inputs differently. You can use <span> and submit form with onclick event.
See this code:
<form id="myForm" method="get">
<div class="input-group">
<input type="text" class="form-control" id="city" name="city"/>
<span class="input-group-addon btn" onclick="document.getElementById('myForm').submit();" ><span class="glyphicon glyphicon-search"></span></span>
</div>
</form>
Working JSFiddle:
http://jsfiddle.net/q76dasdk/