I have the below ionic range in my html file. I tried finding to customize the css but no success. I want something like this
<div class="item range">
<input type="range" name="volume">
</div>
Related
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 materializecss for the first time in my web application and
I am struggling with datepicker. It is not working at all.
I imported materialize.css and js file and use the code
<div>
<input type="date" class="datepicker" />
</div>
and added script code
$(document).ready(function() {
$('select').material_select();
window.picker = $('.datepicker').pickadate({
selectYears: 16, // Creates a dropdown of 15 years to control year
format: 'yyyy-mm-dd'
});
});
but nothing worked, it shows a disabled text box.
Also I want to know how to add timepicker in materializecss?
I had the same problem. My problem was solved with downgrading jquery to 2.1.4. It seems, that on some reason the datetimepicker and jquery 2.2.1 are not working together.
cheers
Thomas
First to know, you need to check the version of your Materialize css and javascript version, also don't forget to check jquery version and use the initialization code in your custom init javascript.
check my code in init.js for initialization, CSS and JS Materialize via cdn
$(document).ready(function() {
$('.modal').modal();
//this are my init
$('#dtp').datepicker();
$('#dtp').setDate(new Date());
});
<html>
<head>
<!-- this is my CSS via cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<div class="row">
<form class="col s12 m6 card">
<div class="row center">
<h4>Materialize DateTime Picker</h4>
<div class="input-field col s12 m12">
<input id="dtp" type="text" class="datepicker">
<label for="dtp">Birthday</label>
</div>
</div>
</form>
</div>
<!-- this is my JS via cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
</html>
Check the documentation from Materialize website, it is always helpful for programmers like me.
Hope this answer help you
Try to run my Code Snippet
<div class="row">
<div class="input-field col s12">
<input id="idate" type="text" name="idate" class="datepicker" >
<label for="idate">Issue Date</label>
</div>
</div>
$('.datepicker').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
How can I perfectly align and space my inline inputs forms in bootstrap
<div class="form-group col-lg-12">
<div class="col-lg-6">
<input type="text" class= "form-control" value="First Name">
</div>
<div class="col-lg-6">
<input type="text" class= "form-control" value="Last Name">
</div>
</div>
Use col-xs instead of col-lg
see this for a try
And keep all your input inside the
`<div class="form-group col-xs-12">`
I don't quite understand our question very well, maybe a picture to illustrate what you want to achieve would be helpful.
I have basically wrapped everything with a column-xs-12 so its perfectly aligned. Also included an example if you want to place two input forms on one line. I have made a plunk to help you out, hope it helps.
<div class="col-xs-12"> </div>
http://plnkr.co/edit/lj866U6QlvbLKhF4jujI?p=preview
I'm trying to draw an horizontal form that should be horizontal even on mobile view.
Currently I have this simple form:
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="username">{{_USERNAME}}:</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control" id="username" value="{{username}}">
</div>
</div>
</form>
It works correctly as expected, so it is horizontal on large screens and classic on small screens.
Current:
Expected:
How can I force this form to be horizontal even on small screens? Do I have to write CSS by myself or there is some standard way using Bootstrap?
Okay I've found the solution.
Use col-xs-* instead of col-ms-*
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label" for="username">{{_USERNAME}}:</label>
<div class="col-xs-10">
<input type="text" readonly class="form-control" id="username" value="{{username}}">
</div>
</div>
</form>
Since non of the above met my needs. I drawed a table and inserted the label inside a td and the input in the next td. All within the same row. Finally adjusted the margins as needed.
Note: This worked for an exclusive mobile UX.
I want to show windows 8 style tiles (square buttons) for facebook like and twitter follow buttons with follower counts on my website. Which looks like below. Any suggestion?
I Have Done it With HTML And CSS But You Have To Update The Followers Count Manually.I Am Giving You The Code Here And Visit My Blog For A Live Demo And I Encoded The Images With base64 I Will try to Get Followers Count Automatically Using ApI's.
<div style="width:100px;height:100px;background:#00a0d1;color:#ffffff;">
<img src="data:image/png;base64,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" width="50px" height:50px"/>
<div style="text-align:right;padding-right:10px;padding-bottom:10px;">
296<br/>Followers
</div>
</div>
<div style="margin-top:-100px;margin-right:116px;width:100px;height:100px;background:#3B5998 ;color:#ffffff;float:right">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QCYRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAABIAAAAAQAAAEgAAAABAAWQAAAHAAAABDAyMTCgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAAADKgAwAEAAAAAQAAADMAAAAA/+ECzmh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4PSdhZG9iZTpuczptZXRhLyc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiB4bWxuczpleGlmPSdodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyc+CiAgPGV4aWY6WFJlc29sdXRpb24+NzI8L2V4aWY6WFJlc29sdXRpb24+CiAgPGV4aWY6WVJlc29sdXRpb24+NzI8L2V4aWY6WVJlc29sdXRpb24+CiAgPGV4aWY6UmVzb2x1dGlvblVuaXQ+SW5jaDwvZXhpZjpSZXNvbHV0aW9uVW5pdD4KICA8ZXhpZjpFeGlmVmVyc2lvbj5FeGlmIFZlcnNpb24gMi4xPC9leGlmOkV4aWZWZXJzaW9uPgogIDxleGlmOkZsYXNoUGl4VmVyc2lvbj5GbGFzaFBpeCBWZXJzaW9uIDEuMDwvZXhpZjpGbGFzaFBpeFZlcnNpb24+CiAgPGV4aWY6Q29sb3JTcGFjZT5zUkdCPC9leGlmOkNvbG9yU3BhY2U+CiAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjY0MDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjM2MDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCjwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9J3InPz4K/+IMWElD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" width="50px" height:50px"/>
<div style="text-align:right;padding-right:10px;padding-bottom:10px;">
296<br/>Likes
</div>
</div>
<div style="margin-top:-100px;margin-right:11px;width:100px;height:100px;background:#dd4b39 ;color:#ffffff;float:right">
<img src="data:image/png;base64,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" width="50px" height:50px"/>
<div style="text-align:right;padding-right:10px;padding-bottom:10px;">
296<br/>Circles
</div>
</div>