I'm trying to style the fullcalendar jquery plugin, and have it mostly set, with one problem. I want to have spacing between the cells (ie. so can see background behind table), which I can do by overriding the css border-spacing property, however when I do that, the width calculations for fullcalendar get thrown off, and my far right column ('Saturday' in month view) gets shrunk. Is there any way to tell fullcalendar that I'm using spacing, or some other way to have that calculated through?
Thanks,
Alex
can you add this to the issue tracker?
http://code.google.com/p/fullcalendar/issues/list
thanks!
I was having the same issue that you are facing. As opposed to digging through the .js i just 'fixed' this with css by adding width to the fc-sat column with addclass, matching the width of the other columns of the desired #calendar width.
$(function () {
$('.fc-sat').addClass('adjustit');
});
With these classes in my css
<style>
#calendar{width:780px;}
.adjustit{width:103px !important;}
</style>
Hope this helps.
Related
I have tried every way I know how (and failed) to properly set the width on a kendoAutoComplete. My latest attempt (below) is JS based, but I've also tried numerous CSS solutions.
The issue I'm seeing is that no matter the width I choose, the actual input area remains a consistent width, and then there is a weird gray area to the right:
Here's the hover state (the gray box disappears):
But don't be fooled by the appearance of a large text box. Here's what happens when you begin to type:
I've tried:
var autoComplete = $("#gridFilter").data("kendoAutoComplete");
autoComplete.list.width(400);
And
autoComplete .wrapper.css("width", "300px");
And...various CSS solutions.
Why must it be so hard to set the width of a silly auto complete? What am I missing here?
I want the width of my auto complete to be 100% to fill its container.
Bonus points if you can help me understand why Telerik consistently makes me want to hurt myself.
EDIT
OK, I've (partially) figured it out. I temporarily removed bootstrap CSS from the page and the input works as expected.
If I find the offending CSS, I'll post an answer here.
As mentioned in the edit above, default Bootstrap CSS was conflicting with the styling. Specifically, the max-width property. The CSS below fixed it:
<input id="gridFilter" style="max-width: 10000px; width:100%;" />
[Highcharts]
Hello, is there a way to display the tooltip outside the tags? Like to make it "float" outside the container so that it doesn't get cutoff like below.
Thanks in advance.
Here's an example jsFiddle you can use to reproduce the issue. (Try hovering over the boxplot)
http://jsfiddle.net/af3g18mo/ Code
In your fiddle i can figure out the Problem:
If you go up one cascade in your stylesheet you can see that your paths and stuff is within a tag.
The tag has the fix height of 65px and no overflow attributes - but one path before there is the overflow:hidden. This is why the highchart tooltips and everything is just cut off.
You can change your height dynamically to for example 40% what doesn't really fix the problem if you have longer contents in your tooltip. but you can give a "overflow:visible;" to your <svg> and overwrite the "overflow:hidden" in your ".highcharts-container" with visible - so all the contents like your tooltips that have more than 65 px height are displayed.
You can see the solution here:
be careful changing these things, but in your example i couldn't see any bad reactions to this change. In case you have to give your css the whole path to not change it globally.
http://jsfiddle.net/af3g18mo/2/
So the concrete fixing for your css could be:
svg{
overflow:visible;
}
.highcharts-container{
overflow:visible !important;
}
I created a Twitter bootstrap progressbar and put them inside a table.
But when percentages are low, label can't be seen like this: http://jsfiddle.net/mavent/w48qH/4/
Regarding to this, adding min-width is recommended: http://getbootstrap.com/components/#progress-label
But adding min-width makes progress bar lengths illogical, all bar lengths becomes same: http://jsfiddle.net/mavent/w48qH/7/
Also table columns are very far away from each other in big screens. There is too much space between first column and second column.
What would be the better way to show progress bar for small percentages ? And better layout for table ?
Simply add this to your CSS:
.progress-bar {
overflow-x:visible;
white-space:nowrap;
color:black; /* color is for demo purposes */
}
No need to edit the HTML.
This shows the label without compromising the progress bar's progressed color part.
Demo: http://jsfiddle.net/w48qH/9/
I think the min-width might be meant for the content inside of the progress bar. So take a look at my example built upon your fiddle:
html:
<div class="progresslabel"> % 12</div><br>
css:
.progresslabel{
min-width:40px;
}
jquery:
$('.progresslabel').each(function(){
if($(this).width() > $(this).parent().width()){
$(this).css("color","black");
}
});
Now this of course looks bad but it's just an example you can do whatever you want with it but I hope you get the idea.
Here is a fiddle for you:
http://jsfiddle.net/6fLk8/3/
#Arbel answer is highly underrated. I checked a lot of stackoverflow posts until finding his answer.
It is also important to add !important in the changes he suggested, otherwise the code won't work (In my work, using react bootstrap it didn't until adding !important)
I've got a question about how to get a bootstrap popover to show above (outside) a slider, which has a wrapper of overflow:hidden, that I can't seem to get around.
I'm using this slider: http://owlgraphic.com/owlcarousel/
I'm also using Twitter bootstrap 2.3.2 popovers: http://getbootstrap.com/2.3.2/javascript.html#popovers
both work well together with the exception of the overflow:hidden on the carousel, which is similar to issues like this:
Popovers in Bootstrap 2.2.1
https://github.com/twbs/bootstrap/issues/6122
My question specifically is: Has anyone gotten this to work? I've done some moves with height and negative margin to get the vertical height showing, but if the popover is at the edge of my wrapping dive, it will get cut off at the edge.
please let me know if I need to provide any additional detail.
Thanks
Steph
Ok, so I figured this one out.
I changed:
$('.popover-with-html').popover({ html : true, });
to:
$('.popover-with-html').popover({ html : true, container: 'body'});
and it's working.
container: 'body'
was the key, I hope this helps someone.
Thanks
Steph
For other people having this problem in 2021 with newer versions of bootstrap, the solution is using the "boundary" parameter, as "container" doesn't seem to work.
I had to implement a popover inside a sidebar made with AdminLTE
This is what was happening using content:"body"
And this is how it looks using boundary:"viewport"
Without this option active the Popper fallbackPlacement takes over and flips the popover direction (the default placement is "right")
As you can see in the official documentation boundary have different options, the default is "scrollParent", but you can use "viewport" like in this case or "window"
Code used in this example:
$("#registerPetPopover").popover({
placement:"right", //Default parameter
title:"Registra un pet!", //Popover Title
html:true, //Enable HTML inside popover
trigger:"manual", //Avoid activating the popover while clicking
boundary:"viewport", //Allow the popover to go outside its parent
content:"<div class='text-right'>Clicca qui per registrare il tuo primo pet!<br><a href='#'>Non mostrare più</a><div>"
});
Add following in your CSS.
Override overflow property of slider.
.carousel-inner{
overflow:visible;
}
I hope this helps someone.
Got it from https://github.com/twbs/bootstrap/issues/6091
I resolved it by overwriting carousel-inner in my own css. Increase height to show the drop down
.carousel-inner {height: 350px; width: 100%; min-width: 650px;}
Hi i am using twitter bootstrap. I have used typeahead in my model window. My Problem is when I type in textbox the dropdown is coming perfect but its coming at very bottom of textbox. I have observed that there is attribute top set when drop down is coming. But I don't know how to change that at run time.
Here is the Image:
I am not good in CSS. Can anybody tell me that what should do to resolve this problem ?
You need to override some of the default styling of the typeahead class in bootstrap. Specifically, I am able to get it to appear properly by setting the position to relative and the z-index to 10000. The position property requires that you use the !important declaration.
.typeahead {
position:relative !important;
z-index:10000;
}
See my working fiddle at http://jsfiddle.net/technotarek/Msttw/.
Note that my typeahead values are the color of the rainbow in case you're having trouble triggering it.
Also, depending on your exact form layout, you may have to adjust the positioning of the typeahead element for your own situation by using the top/bottom or left/right CSS properties.