I don't understand why this is so hard to do. Everything about jQuery is so simple. How do you set the width of a jQuery "display: inline;" Datepicker?
I have edited the jquery ui css but as soon as I change the month it resets the width.
I hope this is just something dumb that I'm missing.
If you are using the jQuery datepicker in its default form, then just add this to your css and it should work:
.ui-datepicker {
width: 17em; /*what ever width you want*/
}
Reducing the font size of the calendar will reduce the width of the date picker.
You can reduce the font size by adding this css:
div.ui-datepicker
{
font-size:10px;
}
I solved this using a wrapper, and setting a CSS class to force the inline datepicker to have width 100% of its parent, so when you put the datepicker on a .col, for example, the widget adjust to the width of its parent when row width changes, up to a limit of course, but is acceptable. This was usefull for me to use inside a bootstrap .col and width will responsive.
<div style="width:30vw;">
<div id="mydatepicker"></div>
</div>
<script type="javascript">
$('#mydatepicker').datepicker();
</script>
<style>
.ui-datepicker.ui-datepicker-inline {
width: 100% !important;
}
</style>
Of course, you can put the style inside your site CSS file, but always after jQuery-ui styles.
Test with the snippet changing the width of #mydpcontainer
$('#mydatepicker').datepicker();
.ui-datepicker.ui-datepicker-inline {
width: 100% !important;
}
.mydpcontainer {
width: 35vw;
margin-left: auto;
margin-right: auto;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="mydpcontainer">
<div id="mydatepicker"></div>
</div>
.container {
width: 270px;
}
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
Related
Here is my Html file
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="effects.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="effects.js"></script>
<main>
<h2>Rank our Customer Support products</h2>
<h3>Drag up or down to rank</h3>
<ul id="vsupport">
<li class="ui-state-default">Blog / How-To Articles</li>
<li class="ui-state-default">Discussion Forum</li>
<li class="ui-state-default">Knowledge Base</li>
<li class="ui-state-default">Phone Support</li>
<li class="ui-state-default">Wiki Support</li>
</ul>
<br>
<input type="submit" id="submitbutton" value="Submit ">
</main>
and the effects.js file
$(document).ready(function(){
$("#vsupport").sortable({
placeholder:"ui-state-highlight",
start:function(event,ui){
$(ui.item).effect("pulsate",{times:3},1500);
},
update:function(event,ui){
$(ui.item).effect("highlight",{color:"#7fffd4"},2000);
}
});
$("#submitbutton").button().on("click",function(){
$("#vsupport li").removeAttr("style");
});
});
My question is, when I drag the li element to sort it, the li element disappears, and through debug tool,Isaw some css style was added to the li element:
<li class="ui-state-default ui-sortable-handle" style="width: 313px; height: 18px; position: absolute; z-index: 1000;">Knowledge Base</li>
and if I remove this css style, the li element appears again.
Anyone knows why this happens and any solutions to it?
Any answer is appreciated, thanks!
It is because of how 'pulsate' operates. It will set the position of the dragged item as 'absolute' while pulsating. Thus, after the item is dropped, the next item will disappear underneath the dragged item. If you finish holding the item until pulsating is finished, then everything will operate as intended.
Therefore, let's fix the position after pulsating stops:
$(document).ready(function(){
$("#vsupport").sortable({
placeholder:"ui-state-highlight",
start:function(event,ui){
$(ui.item).effect("pulsate",{times:3},1500,function() {
$(this).css('position','initial'); //fixing the position
})
},
update:function(event,ui){
$(ui.item).effect("highlight",{color:"#7fffd4"},2000);
},
stop:function(event,ui){
}
});
$("#submitbutton").button().on("click",function(){
$("#vsupport li").removeAttr("style");
});
});
i'm trying to print my page, that i created with bootstrap.
And on the page i have select input control.
When it's printed... it has little triangle, that implicates this field is select field. But i do not want to set this information printed.
Do anyone know how to remove this triangle from printing? This one
And here is how my code looks:
<div class="col-sm-6 col-xs-12">
<span class="hidden-print">Wybierz z listy </span><!-- todo Radiobutton-->
<div class="input-group">
<select name="RAdiagnosisSelect"
class="form-control"
multiple-limit="1"
ng-model="visit.diagnosisId"
ng-disabled="!technical.firstVisit && visit.RADiagnosis!=2"
required>
<option value="1">M05.8 Inne sero-dodatnie reumatoidalne zapalenie stawów</option>
<option value="2">M06.0 Surowiczoujemne reumatoidalne zapalenie stawów</option>
<!--<option value="3">M06.1 Choroba Stilla u osoby dorosłej</option>-->
</select>
</div>
</div>
And i'm using normal printing library:
<link href="Content/bootstrap.min.css" rel="stylesheet" media="all">
Write this style
<style>
#media print {
.caret {display:none;}
}
</style>
You may hide it behind another element, for instance :before
here is a fiddle
Wrap your select with a div:
.input-group {
position: relative;
}
.input-group:before {
content: '';
position: absolute;
width: 29px;
height: calc(100% - 2px);
background: white;
top:1px;
right:1px;
z-index: 1;
}
.select-wrapper {
position: relative;
z-index: 0;
}
.select {
border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6 col-xs-12">
<span class="hidden-print">Wybierz z listy </span><!-- todo Radiobutton-->
<div class="input-group">
<div class="select-wrapper">
<select name="RAdiagnosisSelect"
class="form-control"
multiple-limit="1"
ng-model="visit.diagnosisId"
ng-disabled="!technical.firstVisit && visit.RADiagnosis!=2"
required>
<option value="1">M05.8 Inne sero-dodatnie reumatoidalne zapalenie stawów</option>
<option value="2">M06.0 Surowiczoujemne reumatoidalne zapalenie stawów</option>
<!--<option value="3">M06.1 Choroba Stilla u osoby dorosłej</option>-->
</select>
</div>
</div>
</div>
To be honest i did it in other way.
I've split the visible part and printing part.
And got one code from showing the user content, second to printing.
It worked well, so i do not have problem with formatting.
So, the answer is: use hidden-print, and visible-print :).
I am actually kinda new to html, but i cant figure out why i have to scroll to see the footer when there isn't any content between the container and it.
HTML
<head>
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<![endif]—>
body {
background-color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container">
<div class="content">
<!-- end .content --></div>
<!-- end .container --></div>
</div>
<div class="footer">
<p> FOOTER CONTENT </p>
</div>
</body>
</html>
CSS
.wrap {
position:relative;
margin:0 auto;
width:100%;
}
.footer {
background-color: black;
bottom: 0;
float: right;
height: 240px;
left: 0;
overflow: hidden;
padding-top: 5px;
width: 100%;
}
Edit, I added the full HTML body, Please refer to the top HTML section for information.
Looks like you have some malformed html. It seems to work fine in jsfiddle after stripping everything out before <body> and the last </html> tag. http://jsfiddle.net/g6gDS/
Edit. I also made the text white in the footer so you can actually see it against the black background.
I think i figured part of it out. My body height was set to 100%. So i backed it down to 85% and it eliminates the scroll but there is a black spot of the background showing at the bottom. Hmm
I am using jquery-mobile, and I have these two buttons:
<p id="propart">Pro:
<select id="chosenpro" data-inline="true"></select>
<button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button>
</p>
I would like them to be displayed side by side (inline).
But I can't figure it out. I did this but it doesn't work. Can you help ?
Here is my css:
#propart .ui-select {
width:75%;
}
#propart .ui-select .ui-btn-icon-right {
width:100%;
}
#propart .ui-btn {
width:25%;
}
Use ui-grid classes, and override their width.
Demo
Markup
<div class=ui-grid-a>
<div class=ui-block-a>button 1</div>
<div class=ui-block-b>button 2</div>
</div>
CSS
.ui-block-a { width: 75% !important; }
.ui-block-b { width: 25% !important; }
There is no need to define any css rules.
jqm has Layout grids
All you need to do is:
<div class=ui-grid-a>
<div class=ui-block-a> <select id="chosenpro" data-inline="true"></select></div>
<div class=ui-block-b><button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button></div>
</div>
I am trying to select only the outer container for the drop target with jQuery UI.
I am trying to drop in media-content but not in media-list-items.
The reason is that media-list-items is not the full width of it's parent and I only want to drop to the right side which is a different background color the full height.
HTML:
<div class="media-content clearfix ui-droppable on" style="">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="media-list-items clearfix">
<ul data-gallery_id="18" class="media-list ui-sortable" style="">
<li id="media_17"></li>
<li id="media_15"></li>
</ul>
</div>
</fieldset>
</form>
</div>
JS:
var $trash = $('.media-content:not(.media-list-items), .media-content');
$trash.droppable({
accept: '.media-list > li',
drop: function(event, ui) {
console.log('trashed');
}
});
I'm not sure you can achieve what you want without adding another element as your "trash" droppable. With some neat css you can make it look pretty much the same :)
html
<div class="media-content">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="trash"></div> <!-- added a trash element -->
<div class="media-list-items">
<ul class="media-list">
<li id="media_25"></li>
<li id="media_26"></li>
<li id="media_27"></li>
</ul>
</div>
</fieldset>
</form>
</div>
css
.media-content {
position: relative; /* makes it contain absolutely positioned descendants */
}
.media-content .trash {
position: absolute;
top: 0; bottom: 0; /* stretches to full height of .media-content */
right: 0;
width: 100px;
background:#f5f5f5;
}
js
$('.media-content .trash').droppable({
drop: function(event, ui) {
console.log('trashed');
}
});
Demo at: http://jsfiddle.net/KazeG/6/