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!
Related
I'd like to make bootstrap checkboxes that look like bootstrap badges, while retaining the checkbox functionality. I thought maybe I could simply style the checkbox label as a badge, but it didn't work.
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
<div class='form-check m-1' style='display:inline-block;'>
<input id='".$tagDAT[1]."' name='".$tagDAT[1]."' type='checkbox' class='form-check-input form-check-inline'>
<label class='tag form-check-label text-capitalize' for='".$tagDAT[1]."'>
<span class='badge badge-secondary'>".$tagDAT[1]."</span></label>
</div>
This code is being echoed from PHP. The checkboxes look like regular checkboxes. It's ignoring the 'badge' code. I thought maybe since it was being echoed via ajax, the bootstrap in the html page wasn't affecting the echoed code. That's why i added the 'head' tag with the bootstrap. Still didn't work.
Anybody have ideas? Or a better way of getting the same result?
Move the checkbox inside the label
Remove the nested <span>
Apply .badge .badge-secondary directly to the <label>
Apply .form-check-inline to the wrapper not the input
Click anywhere on the .badge to check/uncheck the box.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<div class='form-check form-check-inline m-1'>
<label class='tag form-check-label text-capitalize badge badge-secondary' for='myTag'>
<input id='myTag' name='myTag' type='checkbox' class='form-check-input'>myTag
</label>
</div>
Bootstrap 5 has got Toggle Buttons
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
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>
What exactly determines how the input is focused on a <label>? In principle, wrapping a radio <input> in a <label> ensures that you can click anywhere on the label text to select the radio button:
<label>
<input name="foo" type="radio">Fubar
</label>
However, this doesn't work if the label text is more complex. The code below is FireBug output for two radio buttons, where one of them has a Bootstrap popover when hovering over the text.
The second button (Bar) is manually-entered HTML, which works as expected (clicking on 'Bar' selects the radio).
The first button (Foo) has no label text in the original HTML, and everything in the <a ...>Foo</a> is inserted by JavaScript, to give a popover with a title and some text. The problem is that this radio button can only be selected by clicking on the button itself, and not by clicking on the text. The class override-link just turns off link styling (default colour and pointer, no decoration).
Any idea how to expand the focus area for the first button to the entire 'Foo' text?
<div class="radio">
<label id="FooLabel">
<input id="pg29Radio0" name="pg29Radio" value="0" checked="checked" type="radio">
<a class="override-link" title="" rel="popover" data-toggle="popover"
data-content="<div style='font-weight:normal'>
Foo popover body text</div>"
href="#" data-original-title="<div style='font-weight:bold; white-space:nowrap'>
Foo popover title text</div>">
Foo
</a>
</label>
</div>
<div class="radio">
<label id="BarLabel">
<input id="pg29Radio1" name="pg29Radio" value="1" type="radio">
Bar
</label>
</div>
EDIT
jsfiddle showing the problem. This shows two radio buttons, with a Bootstrap popover when hovering over the 'Foo' text. You can select the 'Bar' radio by clicking on the 'Bar' text, but you can't do this for 'Foo'.
The <label> element should actually wrap only the text (and not the input) and you should use the for="id" in the label (to let the browser know that this label is the the element with the id="id".
The problem that you have is that the <a> element "takes over" the click from the label element. You can use the pointer-events css property on the label a to prevent that a to take over it:
label a {
pointer-events: none;
}
<div class="radio">
<input id="pg29Radio0" name="pg29Radio" value="0" checked="checked" type="radio" />
<label for="pg29Radio0" id="FooLabel">
<a class="override-link" title="" rel="popover" data-toggle="popover"
data-content="<div style='font-weight:normal'>
Foo popover body text</div>"
href="#" data-original-title="<div style='font-weight:bold; white-space:nowrap'>
Foo popover title text</div>" onclick="this.parent.click();">
Foo
</a>
</label>
</div>
<div class="radio">
<input id="pg29Radio1" name="pg29Radio" value="1" type="radio" />
<label for="pg29Radio1" id="BarLabel">
Bar
</label>
</div>
Note that if you expect the click on the a to open some modal/run some javascript code - this will prevent it.
update
Since you already use javascript you can use this:
onclick="this.parentElement.click()"
On the anchor.
Here is a jsfiddle, based on the one in your comment:
https://jsfiddle.net/2pumb4yy/2/
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
I am trying to use Bootstrap for my website. I have radio buttons and I am trying to use "Buttons" from bootstrap for the same.
<td style="margin-bottom:0px; padding-bottom: 0px;font-size=12px;vertical-align:bottom;">
<div class="btn-group" data-toggle="buttons" id="topButtonDiv" >
<button type="button" class="btn btn-primary">Home
<input type="radio" id="radio1" ></button>
<button type="button" class="btn btn-primary">Home1
<input type="radio" id="radio2" > </button>
<button type="button" class="btn btn-primary">Home2
<input type="radio" id="radio7"> </button>
</div>
</td>
The problem I am facing is that I still see the circles in the Radio button present, where as in the Bootstrap example, I see no such circles present.
http://getbootstrap.com/javascript/#buttons-usage
Can you let me know what I am missing here?
Another alternative if the css version update is not working is to manually hide the radio button using css
[type='radio'] {
display: none;
}
Check for the version of css you've added. The same btn-group class works fine here
Your markup for bootstrap radio buttons is wrong, you make it like this:
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
Furthermore you can't put a input element within a button element. That's invalid html.