I am using {{> quickForm}} and it is working fine. It is just the location of the button that is positioned in the left side by default.
Can I change the position to the middle instead?
Sure You can change the position by applying class like below:
`
{{#autoForm collection="Books" id="insertBookForm" type="insert"}}
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}`
Related
Meteor 1.6.1.1 is the latest version of my project. I am using package ian:accounts-ui-bootstrap-3 instead of accounts-ui. I have added a custom field as <select> in the code.
What I get on Screen is as below.
When I saw the HTML code, it is not adding class="form-control" to select tag.
below is the code when I inspect element on UI using Chrome.
<li id="login-dropdown-list" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join <b class="caret"></b></a>
<div class="dropdown-menu">
<div class="select-dropdown">
<label>State</label><br>
<select id="login-state">
</select>
</div>
<button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
Create
</button>
<button id="back-to-login-link" class="btn btn-default col-xs-12 col-sm-12">Cancel</button>
</div>
</li>
All I want is to add class="form-control" to the select tag dynamically when component loads on screen and it must look like below;
I have tried below code, but it is not working;
Template.HomePage.onRendered(function () {
document.getElementById('login-state').classList.add('form-control');
});
Well, I tried one way to achieve this is by using Template event as below,
Template.HomePage.events({
'click #login-dropdown-list': function(event){
//document.getElementById('login-state').classList.add('form-control');
$('#login-state').addClass('form-control');
}
});
As you can see, the component gets loaded inside the li tag with id="login-dropdown-list". I simply loaded the class on click event. Even the commented code works fine.
Is this a good solution? please let me know if there much better answer to this? If it works I will definitely accept and upvote the answer.
I have validation for 2 fields which are country code and actual mobile number. I have attached screenshot. When correct country code is given and invalid mobile no is given at that time correct tick glyphicon for country code and cross glyphicon comes which overlaps on each other. I need to remove glyphicon for country code by using css or js. Any help will be appreciated.
If you're using jQuery:
let's say you have
<div class="container">
<div class="form">
form content...
</div>
</div>
you would call:
$('.container form .glyphicon').each(function(i){ // your target input id or class should be placed between 'form' and '.glyphicon' eg: $('.container form input[name=state_code] .glyphicon')
if (i!=0) $(this).remove();
});
this way you get rid of the additional Xes appearing when you don't need.
I have found the answer. I have done it by using jQuery.
My actual HTML was as below,
<div class="input-group">
<div class="input-group-addon">+</div>
<input type="tel" maxlength="3" class="form-control pull-left" id="CountryCode" name="CountryCode" placeholder="Code">
<input data-bv-field="Mobile" type="text" id="Mobile" name="Mobile" class="form-control">
</div>
Bootstrap creates glyphicons for correct and wrong below the html as below,
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="CountryCode" style=""></i>
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="Mobile" style=""></i>
So I have added following one line code to remove correct and wrong glyphicons for country code field,
$("#CountryCode").parent().next().removeClass('glyphicon-ok glyphicon-remove');
I have a template that works with HangoutButton:
<div id="templateContainer" class="row">
<script id='template' type='text/ractive'>
{{#if HangoutUrl === null}}
<g:hangout render="createhangout">
</g:hangout>
{{else}}
<a id="hangoutUrl" href="{{HangoutUrl}}" class="btn btn-primary">Go to Hangout</a>
{{/if}}
</script>
</div>
If HangoutUrl is not specified I display a Hangout button, in other case I display a usual anchor. If I load the page when HangoutUrl is not specified yet and then I set the HangoutUrl value (without page reloading) here is what I see:
So instead of displaying just the anchor I get both of them. I guess it is caused by the ugly html that Hangout button generates.
What can I do to make Hangout button removed in case HangoutUrl is specified?
Fixed it by wrapping Hangout Button with div:
{{#if HangoutUrl === null}}
<div>
<g:hangout render="createhangout" lang="en-US" initial_apps="[{ app_id : '115733298764', start_data : '#Model.Id', 'app_type' : 'LOCAL_APP' }]">
</g:hangout>
</div>
{{else}}
I'm still not sure why it works this way. May be it is a bug in Ractive?
I'm trying to avoid repetitive template code for forms that are essential the same when creating or editing new items.
For example, something like this:
<template name="createOrEdit">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" id="title" placeholder="Title"/ value="{{title}}">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</template>
<template name="create">
{{> createOrEdit}}
</template>
<template name="edit">
{{> createOrEdit}}
</template>
Then, I could created separate template handlers:
Template.create.events(...
Template.edit.events(...
However, those parent template wrappers won't get the events for the main child template.
Is there a way to do what I want?
Those parent templates can get the events from child template. Use it like this:
Template.create.events({
'click .btn':function(){
}
})
Template.edit.events({
'click .btn':function(){
}
})
In Template.createOrEdit.events object you keep events used by both templates and in Template.edit.events and Template.create.events specific code for each.
see proof and
source code
This approach is really nice as you can customize form by passing some variables:
{{# create btnText="create" }}{{/create}}
{{# edit btnText="update" }}{{/edit}}
And in createOrEdit template you can use variable btnText to change button's label.
Was a bit unsure how else to word this, JavaScript is the main thing I NEED to learn but after putting hours and hours in i still can't write javascript code off the top of my head. I understand the syntax of just about everything but when it comes to integrating it with css or html I am clueless!
Heres the code:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker">
<input type="submit" value="Submit">
</div>
JavaScript:
document.getElementById("mydiv").style.backgroundColor="colorpicker.Submit";
bare in mind i've had little experience with forms and inputs in html too.
Any reply would be much appriciated! Thanks!
The value for style.backgroundColor should be a string representing a color value used in CSS, which can be one of:
Color name such as red, green, pink, ...
Color hex code such as #ff0000 (or #f00), #00ff00, #ff00ff ...
rgb() or rgba() function such as rgb(255,0,0), rgb(0,255,0), ...
You also have to set up the click event handler for the button submit. Here are details:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker"/>
<input type="submit" value="Submit"/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[1].onclick = function(){
div.style.backgroundColor = div.children[0].value;
};
Note that you can assign an id for each input field to get access to it in JS code, in the above code I use the children collection to access to them instead. The first input field is the first child of div, the second input field is the second child of div.
Demo
Also note that, since HTML5 (which has been supported by all the major browsers) you can use the color input field which can popup a real color picker dialog for the user to select and then you just need to handle the event onchange to get the selected color (via the value property) like this:
HTML:
<div id="mydiv">
<input type="color" name='colorpicker'/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[0].onchange = function(){
div.style.backgroundColor = div.children[0].value;
};
Updated Demo.
Use the form tag onsubmit method to call your JavaScript function.