I want my tooltip to be on the right of the elements on desktop, because it fits my design best. However this however raises an issue when working on a smaller screen. The bootstrap 3 documentation says it supports auto right placement, which should prefer the tooltip on the right and if that is impractical it will auto pick a side. I am using bootstrap 4 and I tried using that option, but it wont work.
Is there any way to achieve the same result in bootstrap 4?
If using 'right auto' doesn't work you could use a function to return the value based on screen size:
placement: function() {
return $(window).width() > 767 ? 'right' : 'auto';
}
This isn't a responsive solution as it doesn't update if the window size changes, but it should do for most cases. If you want fully responsive behavior you'll need re-initialize tooltips on size change.
Related
I have added two customized buttons on my dialog box, but they are currently just in the middle. How can i move these buttons next to the close button on the title bar, without covering or touching the close button, and also without using anyCSS?
My fiddle: http://jsfiddle.net/ZSk6L/928/
If you are alright using css within your jQuery then you could add a class to the minus button:
$('<button class="minusButton">-</button>').appendTo(titlebar).click(function() {
$('#resultId').parents('.ui-dialog').animate({
height: '40px',
top: $(window).height() - 90
}, 50);
});
And then set the margin
$(".minusButton").css("margin-left", "105px");
If you are happy to use inline styling in the jquery, this gets you what you want (without floats or covering the close button - simply set a left margin to the first custom button:
$('<button>-</button>').appendTo(titlebar).css('margin-left', '35%').click(function() {
Fiddle
There is absolutely no way to do this without at least using inline CSS, written in through jQuery.
Your best bet is just using a float and a fixed small margin on the + button so it doesn't overlap the closing button. Be aware, that any answer written here is probably going to have a problem when the user resizes the dialog window a lot, and the only way to prevent that is to give the whole dialog window a min-width property.
Here is what you should do:
$('<button>+</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right', 'margin-right': '10px'}).click...
And for the other button:
$('<button>-</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right'}).click...
You can see the working Fiddle Here
edit
Since originally posting this question, I've gone down a couple more paths trying to solve the issue. It's still not solved, but now my questions are different. The original question is below, and then I'll add a section below that with updates.
original question
I'm working on a Rails 4 application and having some trouble with JavaScript and the Chartkick gem.
I have two JavaScript functions that make it so that a user can click an icon and an element will drop down below the icon/appear on the page, and the icon will switch from a right-pointing arrow to a down-pointing arrow. The code is this:
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
}
else
{
document.getElementById(d).style.display = "none";
}
}
$(function() {
$('.toggle-icon').click(function() {
$(this).find('i').toggleClass('fa-arrow-circle-o-right fa-arrow-circle-o-down');
});
});
And the haml:
%a{href: "javascript:ReverseDisplay('toggle-stats#{item.id}')", class: 'toggle-icon'}
%i.fa.fa-arrow-circle-o-right
%div{id: "toggle-stats#{item.id}", style: "display: none;"}
= the items to be displayed
It works. However, I expect the items that drop down to take up the full width of the page, like so:
But instead, when I first click the toggle icon, they show up squished, like this:
If I then resize the browser just a tiny bit, the graph pops out to full-width, and it stays that way no matter what I do from there. I can't figure out how to get ahold of the generated mark-up, because this chart comes from Chartkick, as a gem. The generated html in the browser has this line:
<div dir="ltr" style="position: relative; width: 300px; height: 300px;">
Where the width: 300px is what's being changed to width: 1000px when I change the browser size. I don't have to change the browser size permanently or significantly. Once that width has changed to 1000px the first time it stays there - but the minute I refresh the page and click the icon to toggle the chart again, it's back to 300px. I don't know how to hook into this div, because it's generated by the gem and I don't know how to add a class to it. I've tried adding styling to a parent element that ensures all of that parent elements' children are width: 100%, but that doesn't do anything.
Anyway, I don't think that adding a class to it is the solution here. I just have no idea what is - I don't JavaScript incredibly well. I'm pretty much completely new to all front-end work as a whole. What's going on here, and how can I make these charts always be the full width of the page when they're toggled?
Notes: Am testing this in Chrome. I tested in Firefox and it does the same thing.
OK, I'm starting to wonder if this has something to do with the fact that I'm using a JavaScript function in order to capture dynamic item IDs - a page may have any number of these toggle-able charts, and so calling a jQuery function on each id seems impossible, because I don't know what ID is.
I removed the jQuery call, however, and the problem persists.
One of those times when rubber-ducking the Stack Overflow question box has not yet answered my question. So I guess I'll submit and hope for outside help here. :/
adjusted question
This question in the Github issues for Chartkick has lead me down a different path. The solution is not necessarily in attempting to restyle the charts at all. Instead, what I'm trying to do is trigger a resize event, because the chart automatically regenerates when the browser window is resized. This is both what's causing the problem and where the solution seems to lie.
My code:
.row
.col-sm-12
%h3.title-block.second-child
Stats by Video
.panel-groupd#faqList
- #claim.presenter.videos.each_with_index do |video, index|
.panel.panel-default
.panel-heading
%h4.panel-title
%a.chart{data: { toggle: "collapse", parent: "#faqList" }, href: "#video#{index}" }
= "'#{video.title}' at #{video.event.display_name} on #{display_date(video.recorded_at)}"
%div.panel-collapse.collapse{id: "#video#{index}"}
.panel-body
- if video.impressions.count > 0
%h4
Impressions by Hours (24 hours)
= line_chart video.impressions.group_by_day(:created_at, range: 1.day.ago...Time.now).count
...a couple more charts
:javascript
$(".chart").click(function() {
window.dispatchEvent(new Event('resize'));
});
So the intention here is that when I click the .panel-heading, this both drops down the .panel-body with the charts in it and resizes the window, which makes the charts resize correctly (or, rather, should).
It kind of works, in that, when I first click the .panel-heading trigger, it does not resize the charts, but when I click it again, the charts are resized perfectly for a split second... just before they become hidden from view again. :(
I've tried adding a time out to the javascript, like so:
:javascript
$(".chart").click(function() {
setTimeout(1000);
window.dispatchEvent(new Event('resize'));
});
But it doesn't appear to do anything at all.
So what I'm wondering here is how to get this resize event to work once the dropdown .panel-body is out so that the charts will resize appropriately on their own.
Here's a screen cast of the current problem, in case I didn't describe it clearly enough:
https://youtu.be/5quMGABoDs8
I don't know anything about Ruby or Chartkick, but in order to override that inline styling, you would have to use !importantin the css.
So, if you try that technique of giving all the children of the parent element width: 100% again, you might want to implement it something like this:
.importantRule { width: 100% !important; }
$( "parentElement > childElement" ).addClass('importantRule');
(First line goes in your CSS file, second line goes in JS)
I have a link which, when clicked, opens a kendo UI window. I'd like to align the window with the link. My current logic to do so is:
kendoWindow.setOptions({
position: {
top: link.position().top + link.height(),
left: link.position().left
}
});
This works in the common case, but doesn't handle things like flowing off the page. Is there a better/more robust way to achieve this?
Nothing built-in; there is a method that handles this for popups, but appropriating this for the window will be more work than implementing it yourself.
Just calculate whether the viewport has enough space for the desired position plus width or height of your window. If it doesn't, adjust the position accordingly.
I cannot figure out how to scale fullcalendar to fit to it's parent container. I want to display week view on a single page for users without need to scroll (So they quickly review items for a week).
I'm ok if I need to make text small, slots height smaller, etc, but I just not sure how to do this dynamically based on the size of the browser window.
(In my calendar I'm using slotMinutes:10 and times from 8am to 10pm)
jsfiddle with fullcalendar: http://jsfiddle.net/bQXYp/27/
i just solved my problem with below code
.fc-day-grid-container.fc-scroller {
height: auto!important;
overflow-y: auto;
}
There are several factors to be considered.
If you want to stick to having slotMinutes set to 10, then it is going to be quite difficult to fit time ranges from 8 AM to 10 PM on to the page without manually hacking the font size to be almost illegible.
If you are okay with increasing the slotMinutes attribute to something like 30 or even 60, you have a pretty good chance of getting your weekly view showing up without the need to scroll.
Apart from that, there are two properties you could use to influence the dimensions of the calendar. The first one is height. However this sets a pixel value which does not scale dynamically. The second one is aspectRatio which allows to the define the ratio of width to height. In other words, aspectRatio value of 2 means that it will try and stretch the height to be double that of the width (if at all that amount of height is needed).
I have set up an example here that shows you the effect of having a reasonable slotMinutes value. In my opinion, this is what will be most important to be able to achieve what you need.
I use it in list view to show all upcoming events. I added to my own CSS-
.fc-scroller {
height: auto!important;
overflow-y: auto;
Hi i am using two views ( month and agendaDay ) and when i switch to day view i change contentHeight like so:
viewDisplay: function(view) {
//alert(view.name)
if(view.name == 'agendaDay')
{
$('#calendar').fullCalendar('option', 'contentHeight', 700);
}else{
$('#calendar').fullCalendar('option', 'contentHeight', 200);
}
}
Maybe it can give some direction for what you want to do ;)
Try the contentHeight property:
http://arshaw.com/fullcalendar/docs/display/contentHeight/
With your desired minTime and maxTime this removes the vertical scroll bar on the content area of the FullCalendar in that jsfiddle example:
contentHeight: 1850,
minTime: '8',
maxTime: '22',
(But be sure not to set aspectRatio as that seems to over-ride the contentHeight)
Although as Karancan mentions to fit to one screen without scrolling you'll need to reduce the font size to an almost unreadable size.
(and if you're using IE8 then you may have other issues with the height..)
This worked for me too.
I opened the fullcalendar.css and scrolled to fc-scroller.
Added the height and changed the overflow-y option as was suggested.
And the calendar month view worked 100%
It is a bit difficult to explain my issue but I will try using images.
Demo: http://jsfiddle.net/H8Qbn/13/
I try to automatically arrange jQuery dialogs using Isotope.
The first picture shows that everything is working just fine.
The second picture shows what is happening when trying to resize the 1st jQuery dialog. It is resizing just fine and all other dialogs are automatically arranged.
When I try to arrange the second dialog it first moves according its position(top, left) and then resizes and all other dialogs are not automatically arranged.
The third dialog behaves exactly the same as 2. It moves according its position (top, left) and is not arranged automatically.
Any suggestions?
Isotope is not made for draggable dialog boxes; see what the plugin author says regarding this type of functionality.
EDIT Fiddled around with a few more things and got the layout to rearrange when a dialog is closed with .remove(); however, dragging is not suported (see above) and resizing manually won't work either. Why do you need manual resizing of dialog boxes? Can't that be done programmatically?
The jquery masonry plugin can compute the new position when you call it with the masonry("reload") function on the surrounding container after you have resized the dialog boxes or add or remove items. I used it in my Javascript when I add or remove an image to my surrounding container. You can see the Masonry plugin working live in my homepage at the web address http://www.chihoang.de.
This is my prepend and append function with masonry("reload") at the end:
if (ele.Additem == "Append") {
container.append($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
} else if (ele.Additem == "Prepend") {
container.prepend($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
}
And this is my remove function:
$j('.brick').remove(":contains('" + ele.Headline + "')");
container.masonry('reload');