I was trying to do that by adding an attribute of uib-tooltip to Datepicker, but after I saw the code I've seen that it isn't the proper way to do that...
Anyone have an idea for doing that?
Thanks a lot!!
I've never done so myself but I think you could just override the default datepicker templates and just add a tooltip there
they can be found here.
then you can go to the day view template and add a tooltip next to ng-repeat="dt in row"
<td ng-repeat="dt in row" uib-tooltip="hello tooltip"class="uib-day text-center" role="gridcell"
id="{{::dt.uid}}"
ng-class="::dt.customClass">
<!--<button type="button" class="btn btn-default btn-sm"
uib-is-class="
'btn-info' for selectedDt,
'active' for activeDt
on dt"
ng-click="select(dt.date)"
ng-disabled="::dt.disabled"
tabindex="-1"><span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span></button>-->
</td>
If you are using the minified version of ui-bootstrap you're going to have to manipulate some of the component's source and minify it yourself
Related
I have added the date time picker but I can't center every thing in the calender?
the fault one
The right one
This is the html code
<div class="form-group" id="dateTimePickerContainer">
<label>
<input name="datetimepicker" type='text' class="form-control" id='datetimepicker'/>
</label>
</div>
And this is the Jquery code
$('#datetimepicker').datetimepicker();
I solved it, the problem that the css file was not included in the project.
So I had to download the css and included it in the bootstrap files.
Anyone can download it from here.
a
I am using Protractor, and trying to find the content of tooltips on the page. These tooltips are generated by Angular-UI, and fading in with moveMouse over them like below. Those tooltips are similar with ng-bind, but I cannot use binding to find them. Also, I tried to getAttribute of this tooltip, but it also didn't work for me, maybe cause protractor cannot detect this element name. Do you have any idea of how to read the content of those tooltips? Many thanks.
<div class="col-md-2">
<div class="form-group">
<label class="control-label" id="label_Merchant_Number" translate>merchant_NUM</label>
<input ng-model='searchCriteria.MERCHANT_NUMBER' tooltip="{{'merNumber_tooltip'|translate}}" class='form-control input-sm' type='text' id='MERCHANT_NUMBER' name='MERCHANT_NUMBER' maxlength='16' erng-validations>
</div>
</div>
we are using getAttribute('tooltip'), works how it should be ...
element(by.model('searchCriteria.MERCHANT_NUMBER')).getAttribute('tooltip');
I'm buzy with a validation plug-in. When someone clicks on the submitbutton and the required fields are not filled, the border-color of the concerning fields changes to red. My problem however is that I also want the color of the text next to it to change. This is my structure:
<div class="row">
<label for="name">Name*</label>
<input type="text" id="name" name="name">
</div>
.form.a input.error {border:2px solid #eb053b;}
How can I now select the label-element to change the text color? It's not possible with CSS, because you can't select a parent-element, but I don't know how to do it with jQuery.
You can trigger this event on clicking the submit button
if(jQuery('.form.a input').css('border')==2px solid #eb053b){
jQuery(this).siblings('label').css('color','#eb053b');
}
As I mentioned in the comments, the jquery validator adds a label after the input box by default with a class 'error'. Though I haven't found the hack for stopping the validator from doing this yet, here is something that I practice in my forms.
HTML:
<div class="row">
<input type="text" id="name" placeholder="Name (required)" name="name">
</div>
CSS:
.form.a input.error {border:2px solid #eb053b;}
label.error { color: #ebo53b;}
FIDDLE
This would produce a meaningful error message in a label after the input box in red color.
The error messages can be customized using the rules option of jquery validator, the placement of label (before or after) is changed by the errorPlacement option.
I'll update my answer if and when I find the exact solution to your problem.
I'm using the Bootstrap-wysihtml5 jquery plugin (https://github.com/jhollingworth/bootstrap-wysihtml5/) to convert textareas to WYSIWYG. I would like to be able to activate and deactivate the editor by clicking on 2 buttons, so far i can show the editor, please will you let me know how i can deactivate the editor and leave just the textarea and its value. My code is as follows:-
HTML
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
<input type="button" id="button1" value="Show Editor">
<input type="button" id="button2" value="Hide Editor">
Script
$("#button1").click(function(){
$('textarea').wysihtml5();
});
$("#button2").click(function(){
// this is where i'm stuck
});
Thank you
A few lines of custom JS code. I think they can help you.
var content = $('#content');
var contentPar = content.parent()
contentPar.find('.wysihtml5-toolbar').remove()
contentPar.find('iframe').remove()
contentPar.find('input[name*="wysihtml5"]').remove()
content.show()
I had the same problem trying to disable/hide the toolbar and editor and had luck with the following commands (to disable the editor). I'm using version wysihtml5-0.3.0_rc2.js)
$('#editorId').data('wysihtml5').editor.composer.disable();
$('#editorId').data('wysihtml5').editor.composer.enable();
or (to hide the editor)
$('#editorId').data('wysihtml5').editor.composer.hide();
$('#editorId').data('wysihtml5').editor.composer.show();
To do the same to the toolbar you do the following to hide/show (can't find a wat to disable the toolbar):
$('#editorId').data('wysihtml5').editor.toolbar.hide();
$('#editorId').data('wysihtml5').editor.toolbar.show();
I have a custom Wizard, defined as follows:
<wicket:panel>
<div>
<form wicket:id="form" class="wizard">
<span class="wizardoverview" wicket:id="overview"/>
<div class="wizardheader" wicket:id="header"/>
<div wicket:id="view" class="wizardpage"/>
<span wicket:id="feedback"/>
<div class="buttons">
<span wicket:id="buttons"/>
</div>
</form>
</div>
</wicket:panel>
The wizardpage is in this case a Panel with its own form.
This form contains a new Panel, which in turn contains a GridView.
The GridView contains a set of Panels, which each contain a FormComponentFeedbackBorder, which in turn contains input TextFields.
Phew!
So we have this:
Wizard->WizardpagePanel->Form->GridContainingPanel->GridView->Panel[]->FormComponentFeedbackBorder->TextField
When TextField fails validation, no feedback is rendered at all.
If I add a FeedbackPanel to the GridContainingPanel the error messages are rendered, but FormComponentFeedbackBorder renders nothing.
Any pointers as to what can be wrong?
I had a similar problem with a ListView instead of GridView, but that problem was resolved when I set listView.setReuseItems(true);
Is there a similar setting for GridView, or is there a different solution to this problem?
That was it:
gridView.setItemReuseStrategy(new ReuseIfModelsEqualStrategy());
solved the problem.
Thanks, rotsch.