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
Related
I'm using Admin LTE theme and I have added this input for uploading image:
<div class="form-group">
<label for="sendImage">Send Image</label>
<div class="input-group" id="dyanimc-field2">
<div class="custom-file" >
<label class="custom-file-label" for="exampleInputFile">Choose file</label>
<input type="file" class="custom-file-input" id="sendImage" name="product_image[]">
</div>
</div>
</div>
But when I browse and image, it should be showing the image name which is selected but it doesn't!
So by default it looks like this:
And when I choose an image it should be showing image name instead of Choose file, like this:
So what's going wrong here? How can I show the image name when it's selected before uploading?
I can across similar problem while designing a custom user dashboard using Admin LTE HTML template.
After few googling, I realized it was a known issue in bootstrap, this github issue comment solved the problem for me.
I was able to get it working using this third-party library and the lines of code below solved it for me.
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
$(document).ready(function () {
bsCustomFileInput.init()
})
</script>
I am using an older version of AngularUI (version 0.13.4 - 2015-09-03) with Datepicker. I have the popup date set to use 'MM/dd/yyyy'. The problem, if a user does not use the popup datepicker and types in 10/18/2016, it works fine. If the user types in 10/18/16, it does not recognize it as a date. I've tried using some custom validation below, but I can't get it to work with the datepicker. If I remove "datepicker-popup="MM/dd/yyy" from the input the validation works, but of course, the datepicker no longer works. I cannot get the datepicker and the validation to work together.
Here is my HTML:
<ng-form name="form">
<p class="input-group">
<span style="float:left">
<input name="dteAnswer" style="width:200px; height:30px" class="form-control" placeholder="mm/dd/yyyy" ng-pattern='/^(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])\/(199\d)|([2-9]\d{3})$/' ng-model="q.dteDateAnswer" type="text" is-open="status.opened" datepicker-popup="MM/dd/yyyy">
</span>
<span ng-show="form.dteAnswer.$error.pattern">Incorrect Format, should be MM/DD/YYYY</span>
<span style="float:left" class="input-group-btn"><button style="height:30px" type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button></span>
</p>
</ng-form>
Any assistance is greatly appreciated!
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 currently implementing accessibility website to meet the Level AA Conformance
One of the things that I do not meet the correct labeling of the elements on the forms.
Currently my HTML structure is this:
<label for="edit-title">Text</label>
<div class="views-widget">
<div class="form-item" id="edit-title-wrapper">
<input type="text" id="edit-title" size="30" value="" class="form-text">
</div>
</div>
I would change the structure to this other.
<div class="views-widget">
<div class="form-item" id="edit-title-wrapper">
<label for="edit-title">Text</label>
<input type="text" id="edit-title" size="30" value="" class="form-text">
</div>
</div>
Order to have the "input" tag after the label tag.
My question is if there is any possible way to make this change easily in Drupal.
Thanks.
Best Regards.
Yo can edit template archive .tpl or create one in theme options in views module. In this template you can add and modify elements.
I'm trying to use datepicker from bootstrap (http://eternicode.github.io/bootstrap-datepicker/) and everything works fine except none of the glyphicons are showing up.
I saw that glyphicons are moved to another directory under bootstrap 3 (http://glyphicons.getbootstrap.com/) which is what I'm using, but I wasn't sure how I can integrate it.
Both
<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">
And
<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly/>
<span class="add-on"><i class="icon-th"></i></span>
</div>
Didn't work.
Anyone knows how I can integrate bootstrap 3 with the twitter datepicker?
Download the plugin's source code Javascript and CSS (or less) and replace old class references to new, see: http://www.bootply.com/bootstrap-3-migration-guide.
B.e. as mentioned by PilHA replace icon-* with glyphicon glyphicon-*, input-append with input-group etc.
Do the same for your HTML code. Or use a migrator/updater like: http://twitterbootstrapmigrator.w3masters.nl/, http://bootstrap3.kissr.com/ or http://code.divshot.com/bootstrap3_upgrader/
Install Glyphicons from http://glyphicons.getbootstrap.com/: download the files and copy over all the font files to a /fonts directory near your CSS. Include the compiled CSS file from the /css in the repository to your local css folder or download the Less file and compile it with your Bootstrap files.
update Glyphicons are back since RC2. Twitter's Bootstrap 3 includes 180 glyphs in font format from the Glyphicon Halflings set.
In addition to changing the class references, I found there to be some layout considerations disallowing a one-to-one swapping of certain classes, such as span2 on the input control. I ended up with the following:
<div class="form-group row">
<div class="col-xs-8">
<label class="control-label">My Label</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
CSS changes in datepicker.css on lines 176-177:
.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {
Javascript change in datepicker-bootstrap.js on line 34:
this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;
I also wrote up a blog post going into more detail here: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/
download bootstrap3 from here Download
Now unzip it and get font from font folder .
Copy this .ttf , .otf ,.svg and other file and paste # your project root
And You can download glyphoicon.css from here glypho.css
include this css file in index file
Thats done
I wasn't able to change my glyphicons initially and in the F12 dev tools I could see an error trying to load the "glyphicons-halflings-regular.woff2". I was able to fix it by downloading the .woff2 file and adding it to my fonts folder. Then I was able to change to what I wanted.
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2