I am using this datepicker lib https://github.com/720kb/angular-datepicker for my project, In my project I am trying to put the datepicker visible to the user and under that I put some text. But I have an error the datepicker hides my text.
<div class="row">
<div class="col s6">
<div class="fecha_input margen_top2" id="id_datepicker_text">
<datepicker date-format="yyyy-MM-dd" datepicker-show="true" datepicker-append-to="id_datepicker_text">
<input ng-model="data.fecha_actual" type="text" class="form-control" ng-change="todas_citas_func()"/>
</datepicker>
</div>
This is some text to show some data | here is hidden :(
</div>
<div class="col s6">
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
</div>
the documentation says that I should use this properties
datepicker-show="true" datepicker-append-to="id_datepicker_text"
But I do not know what is my error
What do I want? I want my some text appears under the datepicker
Related
I've started experimenting with MaterializeCSS the last few days, reorganizing an older web-based application that displays CSV files in a particular way. I don't do much FRONTEND work, so it's nice to have a toolkit like MaterializeCSS to make things easier. :)
I've created a JSFiddle demo showing off some alignment issues I'm having creating a very, very simple Navbar component here: https://jsfiddle.net/Le14fkoy/
<body>
<header>
<!-- https://materializecss.com/navbar.html -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper row grey lighten">
<div class="col s4">
LOGO
</div>
<!-- https://materializecss.com/text-inputs.html#file -->
<form class="col s8" action="#">
<!-- <div class="file-field input-field" style="margin-top: 0.7rem;"> -->
<div class="file-field input-field">
<div class="btn">
<span>Upload CSV</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row grey lighten-2">
<div class="col s4">
LOGO
</div>
<form class="col s8" action="#">
<div class="file-field input-field">
<div class="btn">
<span>Upload CSV</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
</div>
</main>
<footer class="page-footer" style="padding-top: 0px;">
</footer>
The first row is ACTUALLY the Navbar component, and for some strange reason, pushes the file upload form to the top of the screen (as well as NOT showing the bottom border for the file path div). The second row is a simple "container" class div, and seems to resolve the issues.
I'm not entirely sure what change inside the Navbar component causes it behave differently from a typical div, but any advice would be welcome. Thanks!
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
}
I am using Materialize as a front-end framework for my project.
I have used their auto-complete input field for this purpose and I am providing the data for that auto complete input field through JSON. It is working fine but now I want to add another autocomplete input-field like that and I am using jquery's append method for that.
I am getting the structure for the input field but unfortunately the dropdown isn't showing up. When i inspected the elements in the browser, I saw that the dropdown for the dynamically generated input field is not showing up. Below is the code for the input field.
HTML and CSS
<div class="row">
<div class="col s4 offset-s4">
<a class="btn grey darken-3 squared left" id="add">add</a>
</div>
</div>
<div class="row" id="dynamic">
<div class="col s2 offset-s2">
<input type="text" id="autocomplete-input" class="autocomplete input-item" name="item">
</div>
</div>
JAVASCRIPT
<script>
$(document).ready(function(){
var i = 1;
$("#add").click(function(){
i++;
$('#dynamic').append('<div class="col s2"><input type="text" id="autocomplete-input" class="autocomplete input-item" name="item"></div>');
});
});
Any help would be appreciated.
I have created a table using div instead of using table structure.Now I want to add pagination feature for this table which is created using div's.
I wanted to know whether there is any plugin available which works with div.
Here is sample code
<div class="list">
<div class="item">
<div class="item-swipe">
<div class="col-xs-5 col-xs-offset-1 col-lg-6 col-md-6 col-lg-offset-0 col-md-offset-0">
<div class="wrap">
<span class="row1 date-content date whitespace">Col1</span>
</div>
</div>
<div class="col-xs-4 col-xs-offset-2 col-lg-5 col-md-5 col-lg-offset-0 col-md-offset-0">
<div class="wrap">
<span class="row1 date-content date">Col2</span>
</div>
</div>
<div class="col-xs-3 col-lg-1 col-md-1 col-lg-offset-0 col-md-offset-0 hidden-xs hidden-xs hidden-sm hidden-md">
<div class="wrap">
<a class="id">Col3</a>
</div>
</div>
</div>
</div>
</div>
I have this sample code repeated.I have created table using the above structure.How can I now add pagination to this,Or how can I convert this into table so as to use pagination.
You can explore JQuery Datatables. client-side or server-side pagination possible. Including infinite scroll.
You can use JSONPagination Plugin, which doesn't depend on the DOM, since its done in the JSON level so you can create any kind of table using div or table tag, only few steps needs to be remembered which is explained in the plugin itself.
Disclaimer: I am the author of this plugin.
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