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.
Related
I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}
If you look at the title in this codepen you will see that when the cards are loaded into the page, the title shakes/gets displaced. This also happens to the search bar when I am not using codepen and causes the glyph search addon to become unattached in Internet Explorer.
https://codepen.io/cryptodescriptor/pen/MQBWLL
Search Box
<!-- search column -->
<div class="col-12">
<div class="input-group search-group">
<span class="input-group-addon">
<i style="line-height: 50%;" aria-hidden="true">?</i>
</span>
<label class="sr-only" for="search"></label>
<input type="text" class="form-control typeahead" id="search" placeholder="Search Coin">
</div>
</div>
Title
<h1 id="page_title">Crypto Descriptor</h1>
Forgot to mention, it happens to the footer text usually aswell.
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.
Here I have a form in modal window and it looks like this:
Here you can see that input fields are really small...
Also the same code but not in modal widnow: http://jsbin.com/OJAnaji/37/edit
Works fine.
What is the problem here?
Why can't I show the form like on my example without modal window?
How can I solve it?
I tried to remove div class=col-md-4, but again it doesn't work.
generated html is like this.
<div class="form-group">
<label class="col-md-4 control-label" for="appendedtext"></label>
<div class="col-md-2">
<div class="input-group">
<input id="appendedtext" name="appendedtext" class="form-control" placeholder="Ar" type="text">
<span class="input-group-addon">Ar</span>
</div>
</div>
</div>
try to change col-md-2 to col-md-4 or just remove it
I'm using the excellent jQuery color picker from http://colpick.com/plugin
It works correctly under "normal" circumstances but doesn't show the picker when the input parent element is found within a Bootstrap 3 modal.
This works:
<div class="container">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick1" class="colorPick"/>
</div>
</div>
</div>
But the same thing inside a Bootstrap modal fails to show the picker:
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick2" class="colorPick"/>
</div>
</div>
</div>
Is there a way to use this color picker within a Bootstrap modal?
Thanks
The problem is z-index just add this line in your css class it works good..
.colpick {
z-index: 9999;
}
Jsfiddle DEMO