Here is the code for date-picker:
<div id="divDOBPicker">
<label id="lbldate">Date of birth </label>
<asp:TextBox ID="txtDOB" runat="server" CssClass="date-control" placeholder="Select Date" data-format="MM/dd/yyyy"></asp:TextBox>
<span class="add-on">
<i class="s-plus"></i>
</span>
</div>
I have placed the above code inside the body of bootstrap modal popup. In fullscreen view, the date-picker behaves as expected.
But in small screens, when windows-scroll-bar comes into picture, the datepicker gets separated from the input control. As in the datepicker doesn't move when user scrolls up/down.
Related
I downloaded one admin template that template has datetimepicker in that I want only date picker but I don't how to disable the time picker please help me how to fix these issues. I'll attach my class file and HTML code and same time I'll attach the time picker UI also.
<!-- Bootstrap Material Datetime Picker Css -->
<link href="{{asset('assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css')}}" rel="stylesheet" />
This one they using footer
<script src="{{asset('assets/plugins/momentjs/moment.js')}}"></script> <!-- Moment Plugin Js -->
<!-- Bootstrap Material Datetime Picker Plugin Js -->
<script src="{{asset('assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js')}}"></script>
This is my HTML code
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="zmdi zmdi-calendar"></i>
</span>
<input type="text" class="form-control datetimepicker" placeholder="Please choose date & time...">
</div>
</div>
You can do this by setting the time param as false like:
$('.datetimepicker').bootstrapMaterialDatePicker({ time: false });
Demo Here
I have a bootstrap modal with a body that allows vertical scrolling. Inside of this, I am trying to use a datetime picker, but the problem is that expanding the picker, causes the modal's body to add scroll bars. I need to keep the scrolling ability (for other things that can add content to the modal) but I also need the datetime picker to expand outside of the modal, and not cause the modal to scroll (so that it would occupy the red square without in the pic).
<div class="modal-body" style="overflow-y:scroll;">
<div class="row">
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id="datetimepicker3">
<input type="text" class="form-control" data-bind="value: $data.visitdate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/axg1010/3xunve7r/
Check out your very first line: <div class="modal-body" style="overflow-y:scroll;">. If you take out the overflow-y:scroll the calendar will project over your modal.
I am trying to make a input form with a visual feedback. If the user inputs a number in the input field, the input field along with the addon turns green and a check mark or a cross mark appears next to the currency text.
My issue is that the glypicon overlaps with the currency text all the time. I have tried nesting the second span into the first one as well as modifying margins, paddings to allow for it but the input-group-addon is not budging. What would be a clean and good way of ensuring that the glyphicon is positioned after the currency text?
<div class="col-sm-3 inputGroupContainer">
<div class="input-group">
<input type="number" class="form-control" name="price" value=50 data-moneyamount="moneyamount" required />
<span class="input-group-addon">
USD
</span>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
I used summernote package: summernote:summernote for my website and everything work well except the feature to insert image, videos and link won't work.
Example:
Click insert link button (image and videos are the same)
A popup appear to set the link.
Click anywhere on that popup, it disappeared.
Here are my code:
post_edit.html
<template name="postEdit">
<div class="ui segment">
<form class="ui form">
<h1 class="ui dividing header">Edit post</h1>
<div class="field">
<label>Title</label>
<input type="text" id="title" name="title" value="{{title}}">
</div>
<label>Content</label>
<div class="field" id="content" name="content">
{{{content}}}
</div>
<button type="submit" class="ui orange button"><i class="edit icon"></i> Edit</button>
<a class="negative ui button delete"><i class="remove icon"></i> Delete</a>
<a class="ui button" href="{{pathFor 'postPage'}}"><i class="arrow left icon"></i> Back</a>
</form>
</div>
post_edit.js
Template.postEdit.onRendered(function(){
$(document).ready(function() {
$('#content').summernote({
height: 400,
maxHeight:800,
minHeight:250,
});
});
});
I ran into this issue myself when adding autoform-summernote to my project that already uses semantic-ui. The problem is that there's a conflict between Bootstrap's and Semantic UI's $.modal() method. See these links for code references:
Summernote modal init
Bootstrap's modal definition
Semantic UI's modal definition
Summernote expects the modal method to be Bootstrap's, but instead calls Semantic UI's modal method. Because of the differences between the implementations of the modal methods, the modal closes right away when you click anywhere in the window.
Without some low-level hacks, these two packages will conflict since Semantic UI's is available globally in your project on any $('object'). If you're not using Semantic UI's modal method anywhere else in your site, you could disable it, which will fix it in this case. However, that's not a solution that works for me. Instead, I'm looking into a solution to remove summernote, or at least its dependency on Boostrap.
Edit 1/13/2016
I ended up replacing summernote with a different editor, https://atmospherejs.com/gildaspk/autoform-medium. It gives me the functionality I need and doesn't have conflicting dependencies.
I have created a sideMenu and one of the item inside it has a text on left, and a toggle (checkbox) on the right. Menu item is linked to a view, which has a list of items. Toggle is like a button, which allow user to clear the list, without having to go inside the view.
Earlier I had 'menu-close' attribute added to the menu item, so every time I click the toggle, it would change the value and close the side menu.
Now the issue is, after removing the 'menu-close' I can click on the toggle and menu stays open, but the menu-item link is not working. I have tried setting ng-click and href. If I set href, the item navigates to new view even if I click on toggle.
<ion-item class="item-toggle" ng-click="openNotifications()">
<i class="icon ion-android-notifications-none"></i>
Notifications
<label class="toggle toggle-assertive">
<input type="checkbox" ng-click="alert('notification on')">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
How can make sure that if I click on toggle it changes, and when I click on item it navigates to view?
You should just be able to add $event.stopPropagation() to the outer click event, click events propagate and bubble so that is why both are firing.
try this:
<ion-item class="item-toggle" ng-click="openNotifications()">
<i class="icon ion-android-notifications-none"></i>
Notifications
<label class="toggle toggle-assertive">
<input type="checkbox" ng-click="alert('notification on');$event.stopPropagation()">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
FIXED IT:
so you need the stop prorogation, you also need to add this to the css to make the toggle item clickable:
.item-toggle{
pointer-events:initial !important;
}
here is a ionic playground to show it working!
http://play.ionic.io/app/d9920eee107d
You could place the toogle inside a normal list-item, to prevent the toogle-item behavior.
<ion-item ng-click="show('click')">
Item
<label class="toggle">
<input type="checkbox" ng-model="state" ng-change="show(state)">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>