Hello I have created a button with Materialize, but it only works for some areas of the button (primarily the area that surrounds the text). Any reason for this?
In my form all I do is add another input like this:
<input name="mySubmit" type="submit" value="Log In!" class="waves-effect waves-light btn" />
But when I click on the button only the boxed area actually recognizes it as input:
Thanks in advance for your help!
It seems that Materialize wraps the input tag in an "i" tag, which is then rendered into a button-looking element, with clickability limited to the text portion.
I was able to solve this by simply transforming my input tag into a button tag.
Initial code:
<input type="submit" value="List Employees" id="fetch-employees"
class="waves-effect waves-light btn">
What is then rendered in the browser:
<i class="waves-effect waves-light btn waves-input-wrapper" style="">
<input type="submit" value="List Employees" id="fetch-employees"
class="waves-button-input">
</i>
Solution:
<button type="submit" value="List Employees" id="fetch-employees"
class="waves-effect waves-light btn">List Employees</button>
Related
I am using jquery form plug-in for posting my form ajax way.
Post is working fine with default button.But it is not working when I am using custom bootstrap button as below . Please let me know what i am missing here?
http://jquery.malsup.com/form/#validation
Working case :
<input name="Update" value="Update" type="submit">
Not working case:
<a class="btn btn-sm btn-bitbucket" name="Update" value="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"> </i> Update
</a>
I've just removed my comment as any of these should work:
<input name="Update" value="Update" type="submit" class="btn btn-sm btn-bitbucket">
<button class="btn btn-sm btn-bitbucket" name="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"></i> Update
</button>
An anchor can't (by default) be used to submit the form, hence why it isn't working. However Bootstrap allows you to use the button classes on input and button tags.
Sorry for the ghost comment now!
I have a button on a form that I'd like to disable until one or more checkboxes have been selected. This is probably fairly simple to solve, but the button is not disabled when I use !result.isSelected.
This is my button:
<button class="btn btn-success" ng-click="send()" ng-disabled="!result.isSelected" </button>
And the checkbox:
<input type="checkbox" class="checkbox-row" ng-model="result.isSelected" ng-click="selected()" />
Does anyone know of a better solution? Thanks for your help!
A better solution would be:
<input type="checkbox" class="checkbox-row" ng-model="checked" ng-click="selected()" />
<button class="btn btn-success" ng-click="send()" ng-disabled="!checked"> </button>
I have been trying to put a font awesome or glyphicon (or even an image) inside a submit button. This quickly falls apart, and I need to implement another option. I have seen a few ways of doing this, but I don't know which is the "right" or better way.
The three contenders I've seen are:
divs
links
buttons
Which is the best way to get an image / icon inside a "submit" button?
Wouldn't all three need a JS component?
This is how bootstrap add glyphicon to button object:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Bootstrap button with glyphicon
The button option does not need JS. I have tested it and you can see a working example using Font Awesome here https://jsfiddle.net/mikhailjan/sf9s28et/5/ or just see the code below:
<form action="add_person.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" class="button">
<i class="fa fa-user-plus"></i> Add Person
</button>
</form>
Jonathan Anctil is correct, the button needs to have type="submit" for the form to work normally.
I am trying to add dynamically text into Bootstrap 3 Popover data-content="" at this demo. Basically what I want to do is updating the data-content="" text buy clicking different buttons. I tried to do this by adding:
$("#poper").('[data-content="City"]');
but this is not doing the job! Here is the jquery I have
$("#show-content-one").click(function(){
$("#poper").popover('show');
$("#poper").('[data-content="City"]');
$("#poper").popover('show');
});
$("#show-content-two").click(function(){
$("#poper").('[data-content="Country"]');
$("#poper").popover('show');
});
and HTML is:
Dynamic Content Popover
<input type="button" class="btn btn-info" id="show-content-one" value="content One" />
<input type="button" class="btn btn-info" id="show-content-two" value="content Two" />
Can you please help me to fix this? Thanks
To update a custom attribute use the method data().
$("#poper").data('content', 'city');
What you've written is a selector, not an updater.
What I am trying to achieve is consistent behavior. When we click the input field the color picker shows up. I would like the same behavior when I am clicking the button that wraps it.
<button class="btn btn-small my-btn">
Color <input type="color" value="#33aabb">
</button>
JSFiddle.
Just defer to the input's .click()
http://jsfiddle.net/J73dK/1/
This should work:
<button class="btn btn-small my-btn" onclick="this.querySelector('input').click()">
Color <input type="color" value="#33aabb">
</button>
http://jsfiddle.net/C2wj2/