I'm trying to make dynamically created checkboxes on a plone temaplate, using tal-repeat. Check the below code for details.
<div tal:define="global pessoa python:view.dados_pessoa()" class="drop-element"></div>
<div class="row m-t-10" tal:repeat="telefone python: pessoa.get('telefones', [])">
<input type="hidden" class="idTelefone" name="telefones.id" value="${python: telefone.get('id', '')}" />
<div class="col s3 grey-text text-darken-1">
<input class="grey-text text-darken-1 tipoTelefone" type="text" name="telefones.tipo" value="${python: telefone.get('tipo', '').capitalize()}" autoComplete="off" readonly />
</div>
<div class="col s5">
<input class="grey-text text-darken-1 numeroTelefone" type="text" name="telefones.numero" value="${python: '(%s) %d' % (telefone.get('ddd', ''), telefone.get('numero', ''))}" autoComplete="false" readonly/>
</div>
<div class="col s2">
<input type="checkbox" id="${python: telefone.get('id', '')}" name="telefones.sms" ${python: 'checked' if telefone.get('sms', '') else ''}>
<label for="${python: telefone.get('id', '')}" class="active fix-label" style="top: 25px !important">SMS</label>
</div>
<div class="input-field m-t-10 col s2">
<button type="button" class="sp_btn right red m-t-05 btn-remover-telefone">Remover</button>
</div>
</div>
Putting it simple, pessoa['telefones'] is a list, that can come with 0 or more dictionaries.
The point here is at the lines:
<input type="checkbox" id="${python: telefone.get('id', '')}" name="telefones.sms" ${python: 'checked' if telefone.get('sms', '') else ''}>
<label for="${python: telefone.get('id', '')}" class="active fix-label" style="top: 25px !important">SMS</label>
As my plone site uses materialize, i need to connect a label to a checkbox via id, else it wont show. Sounds like it will work, since each index on telefone have a unique id. The problem is that when that renders, the ID property is rendered as a string of the TALES expression instead of the expression result, like that:
<input type="checkbox" id="${python: telefone.get('id', '')}" name="telefones.sms">
<label for="2138518" class="active fix-label" style="top: 25px !important">SMS</label>
Why? how can i get around it? Searched on everything i could, and can't find a solution.
what Plone version do you use? I ealier version expressions like ${} didn't exist.
What should work al time is somehing like this:
<input type="checkbox" tal:attributes="id python: telefone.get('id', '')"> name="telefones.sms">
hope that will help you, cheers Maik
Related
Is it possible to make all prepend add-ons same width?
i.e in this screenshot I would like Email, License Key 1 & License Key 2 to be the same length, is that possible.
If I did not use add-ons and just used regular labels and a form grid it would be possible but it seems to be the prepend addons look much nicer then regular labels.
Relevant Html is
<main class="container-fluid">
<form action="/license.process" name="process" id="process" method="post">
<div class="input-group mb-2">
<div class="input-group-prepend">
<label class="input-group-text" id="licenseEmaillabel">
Email
</label>
</div>
<input type="text" name="licenseEmail" value="paultaylor#jthink.net" class="form-control" aria-describedby="licenseEmaillabel">
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<label class="input-group-text" id="licenseKey1label">
License Key 1
</label>
</div>
<input type="text" name="licenseKey1" value="51302c021440d595c860233f136731865a12cfad2ce2cc2" class="form-control" aria-describedby="licenseKey1label">
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<label class="input-group-text" id="licenseKey2label">
License Key 2
</label>
</div>
<input type="text" name="licenseKey2" value="1e50214376557ba3e1dede6c490f33d07b738515c8c2a03" class="form-control" aria-describedby="licenseKey2label">
</div>
<h3 class="error" style="visibility:hidden;">
</h3>
<input type="submit" name="cancel" value="Cancel" class="btn btn-outline-secondary">
<input type="submit" name="save" value="Save" class="btn btn-outline-secondary">
<button onclick="j2html.tags.UnescapedText#d352d4f" type="button" class="btn btn-outline-secondary">
Get License
</button>
</form>
</main>
So this is actually pretty complicated, because each label is in it's own div and not part of a sibling chain. And afaik, Bootstrap does not support this type of sizing, only relative sizing form classes (which essentially only makes the font bigger). That kind of eliminates most possibilities that I can think of using flex/child properties. However, I think hard-coding is not the right word usage in this circumstance. But the idea is the same.
The example of using min-width is not right in this circumstance because min-width !== width=xx. For example, if you set min-width to 50px, but 1 string of text is longer than that, you still have the same problem as above. Essentially, if you don't want to set them all to one specific value, then your only other option is to use Javascript.
Here is my pure CSS workaround:
.input-group-prepend {
width : 35%; /*adjust as needed*/
}
.input-group-prepend label {
width: 100%;
overflow: hidden;
}
Additionally you could use Boostrap specific inline styling classes, but that's arbitrary and one of the issues with Bootstrap (too many inline classes clutter code, and then you would have to manually add it to each element). Just offering it as an alternative
For example:
<div class="input-group-prepend w-50"> /* grows to 50% of parent*/
<label class="input-group-text w-100" id="licenseEmaillabel"> /* grows to 100% of parent */
Just using the bootstrap classes:
<div class="input-group">
<div class="input-group-prepend col-3">
<span class="input-group-text col-12">Name:</span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="input-group">
<div class="input-group-prepend col-3">
<span class="input-group-text col-12">Address 1:</span>
</div>
<input type="text" class="form-control" placeholder="Street Address">
</div>
Looks like this:
Using jquery you could do something like this:
var biggest = Math.max.apply(Math, $('.input-group-text').map(function(){ return $(this).width(); }).get());
$('.input-group-text').width(biggest);
Math.max.apply reads all .input-group-text widths and returns the biggest one. The next line applies this width to all .input-group-text divs.
Sources:
jquery-get-max-width-of-child-divs
add w-50 class to input-group-prepend and
add w-100 class to input-group-text
like this
<div class="input-group">
<div class="input-group-prepend w-50">
<span class="input-group-text w-100">label</span>
</div>
<input type="text" class="form-control " />
</div>
<div class="form-row">
<div class="col-md input-group mb-3">
<div class="input-group-prepend col-5 col-sm-4 col-md-3 col-lg-3 col-xl-2 px-0">
<span class="input-group-text w-100">Label textx</span>
</div>
<input class="form-control" type="text">
</div>
</div>
This will work! Adjust the col grids accordingly for .input-group-prepend!
I am using Angular Js, in which I am using bootstrap css. I have a ng-repeat added to the form. I have a submit button at the end of page. I have added a required field validation to each of the controls being created in ng-repeat. On click of submit button, if the data is not available in any of the rows in ng-repeat, I am showing a error message. This works fine. However, if there are 20 rows in ng-repeat, and if all are left empty, clicking on submit button is dragging the page, thereby the submit button becomes invisible. I have used the below code:
<link href="/Content/bootstrap.css" rel="stylesheet" />
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="row" ng-repeat="Descriptions in seasonsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<br />
</div>
<br/>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" />
</div>
</div>
Adding screenshot to explain in more:
As you can see, the buttons are getting invisible when the error messages are shown. Is this the correct way to use css and span in ng-repeat. I have tried with setting
style="min-height:100px;"
in the form, but that did not solve it. How to fix this?
Thanks
It could work, but it's much more complicated than it needs to be. Check out angular forms (link below)
<div class="form-group col-md-5">
<textarea name="descriptionValidate_{{$index}}" class="form-control input-md noresize" required="" maxlength="500" ng-model="Descriptions.Description" noresize=""></textarea>
<span style="color: red;" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
It will turn into (styling excluded)
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
https://angular.io/docs/ts/latest/guide/forms.html
There are a number of validation rules built into an Angular input
required
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
More on input validation usages: https://docs.angularjs.org/api/ng/directive/input
Hopefully this helps simplify some of your code
I have a form login. Normaly, the chrome save the settings, and each time the user access to that form, the last input values are automatically insert. But in my form, the browser does not behaves like that.
[Edit] : This behavior it is just appending to chrome browser
Follows the HTML code:
<form action="#" class="ac-custom ac-checkbox ac-checkmark" onsubmit="UIAuthetication.prototype.ClickButtonSignedIn(true); return false;">
<div class="username line checkThisDiv">
<input class="input TR_Login_Username" type="text" required="" placeholder="E-mail" mandatory="" vk_15c42="subscribed">
<h6 class="TR_Login_Username">E-mail</h6>
<p class="error_message"></p>
</div>
<div class="password line checkThisDiv">
<input class="input TR_Login_Password" type="password" required="" placeholder="Password" mandatory="" vk_15c42="subscribed">
<h6 class="TR_Login_Password">Password</h6>
<p class="error_message"></p>
</div>
<div class="line line-submit">
<input class="submit right TR_Login_Button" type="submit" value="Login">
<ul>
<li>
<input class="keepSignIn remember" type="checkbox">
<label class="TR_Login_Keep_Me_Signed_In" for="cb6">Remember user</label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
</ul>
</div>
</form>
So, with the attempt-error method, I discovery if I put ID's to the inputs, the chrome autocomplete will work. I don't know the reason of that, I just know with that, the problem was solve.
I am trying to get the Bootstrap datepicker working under a tab and it seems like some issues with it using with ng-required attribute. It is not updating the model value. Seems like a bug but not sure. If you take out ng-required attribute everything would work just fine.
Any help would be helpful.
plunker: http://plnkr.co/edit/NFcm0Bpu0y45LsrzVtpr?p=preview
$scope.data = {
opened: false,
record:
{
"Date of Birth": "2005-10-29T00:00:00"
}
<form name="mainForm" novalidate>
<div class="container" ng-form="subForm">
<tabset>
<tab>
<div class="row">
<div class="col-sm-3">
<div class="form-group" ng-class="{'has-error': subForm['test'].$invalid}">
<label class="control-label">Date of Birth</label>
<p class="input-group">
<input type="text" name="test" class="form-control" datepicker-popup="dd-MMM-yyyy" ng-model="data.record['Date of Birth']" is-open="data.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-disabled="false" ng-click="openDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</tab>
</tabset>
</div>
</form>
It is working with Angular 1.2.16. The problem is when using with Angualar 1.3.0. Logged an issue with Angualr-ui.
I have a bootstrap 3 form.
when its in the tabled and larger media query state, the middle input field is somehow overlaying the two inputs above making them none clickable jsfiddle.net/wT7gp/.
I have put an example in jsfiddle. (remember to make it wide enough to see the problem)
Repro:
Open link.
make the outwindow large.
click the input for firstname.
Expected it to start typing state, but nothing happens.
Hope someone here can explan what I did to cause it :) I failed at finding the issue. (other then yes the middle element is overlaying the two others.
You should be wrapping your rows of form groups in div with row class like so:
Fiddle: http://jsfiddle.net/wT7gp/1/
HTML
<div class="row">
<div class="form-group col-sm-6">
<input class="form-control input-lg " placeholder="First Name" id="first-name" tabindex="1" name="FirstName" data-bind="value: firstName" type="text" maxlength="50" />
<label for="first-name" style="display:none;" data-bind="validationMessage: firstName, css: { error: !firstName.isValid() }" class="error"></label>
</div>
<div class=" form-group col-sm-6">
<input class="form-control input-lg " placeholder="Last Name" id="last-name" tabindex="2" name="LastName" data-bind="value: lastName" type="text" maxlength="50" />
<label for="last-name" style="display:none;" data-bind="validationMessage: lastName, css: { error: !lastName.isValid() }" class="error"></label>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input class="form-control input-lg " placeholder="Email" id="email" tabindex="3" name="Email" data-bind="value: email" type="email" maxlength="50" />
<label for="email" style="display:none;" data-bind="validationMessage: email, css: { error: !email.isValid() }" class="error"></label>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control input-lg " placeholder="Choose a password" id="password1" tabindex="4" name="Password" data-bind="value: password" type="password" />
<label for="#Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: password , css: { error: !password.isValid() }" class="error"></label>
</div>
<div class="col-sm-6 form-group">
<input class="form-control input-lg " placeholder="password, again" id="password2" tabindex="5" name="ConfirmPassword" data-bind="value: confirmPassword" type="password" />
<label for="#Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: confirmPassword , css: { error: !confirmPassword.isValid() }" class="error"></label>
</div>
</div>
I had the same problem. It was caused by a div covering my input controls. It seemed the div 'knew no bounds'.
So when I worked out which div was causing the problem I applied the overflow:hidden; style.
I'm guessing that's why the row class worked for Kevin Pei - maybe it keeps the col divs contained.
Aside: I used Firefox Firebug to show me which div was covering my controls.
We had a very similar problem within our web application. Using bootstrap 3.3.7 our signup form did not work any more on iPhones. The initial form looked like this:
<form ...>
<div class="col-xs-12 col-sm-6">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-sm-6 col-md-4">
<input type="submit" value="Register">
</div>
</form>
The problem was caused by the last two div elements which did not have corresponding class definitions for the xs-size. So on iPhone the <div class="col-sm-6 col-md-4"> class resulted in a very big div overlaying the whole form and preventing touch events for input fields beneath the div.
The solution is simply adding a xs-size class to the div and everything worked well on iPhones. In our case we adjusted the form like that:
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="form-group string required">
<input ...>
</div>
</div>
In my case i set z-index:1 for the controls not allowing inputs and no z-index setting for the controls allowing inputs.