I'm trying to have in my full calendar two kinds of events. I will differenciate them.
The color is not a good idea, because I need differte colors in thw two kinds of events. Il have thought about border color. But the propriety border color has a very little border. I want to set the border width bigger.
How can I do that?
I've tried in my main css:
.fc-event-inner {
border-color: red;
border-style: solid;
border-width: 15px;
}
But it does anything.
Thanks
Best regards
PS: I'm using fullcalendar with this symfony budle: https://github.com/adesigns/calendar-bundle
I use eventRender to handle them:
eventRender={info =>{
info.el.style.borderWidth = '4px'
info.el.style.borderRadius = '0px'
}}
Just typing .fc-event didn't change border of events of Fullcalendar. So, I tried following code and it changed events border perfectly.
.portlet.calendar .fc-event {
border: 15px solid red;
}
I managed to change the width of the border by modifying the class fc-event:
.fc-event {
border-width: 15px;
}
See here
Since fullcalendar v5 there is no more eventReader callback.
Now you have to use the event render hooks eg. eventDidMount:
eventDidMount: function(info) {
info.el.style.borderRadius = '0px';
info.el.style.borderWidth = '4px';
},
Related
I've been working on a pyramid website and I'm having a problem. I have a textbox inside my td, and if the text is long, it cannot be seen already. Here is what it looks like:
As you can see the level1 portion there, if I have a name like someLongnameforever, it will only be seen like this:
Is there a fix for this using css or any trick? I am using bootstrap by the way.
If you want to see my table code, click this. I'm using twig templating also.
For now I am already using a textarea for the level 1 fields.
Why don't you try ellipsing if it exceeds the maximum width available to it. And maybe try showing the complete name in a tooltip?
That would keep the table clean too.
Demowrap word to new line if there is overflow
button{
word-wrap:break-word;
white-space: normal;
}
You can add an overflow: scroll; to allow scrolling or you could add an ToolTip attribute so when users however they will see the full content.
I guess you can do something like this.
You should be able to change the example to fit your needs.
HTML
<div id="fitin">
<div>Lorem im Lorem im Lorem im Lorem im</div>
</div>
JS
$(function() {
var $fitin = $('#fitin');
var $fitindiv = $('#fitin div');
$fitindiv.css('font-size', '1em');
while( $fitindiv.height() > $fitin.height() ) {
$fitindiv.css('font-size', (parseInt($fitindiv.css('font-size')) - 1) + "px" );
}
});
CSS
#fitin {
width: 100px;
height: 30px;
border: 1px solid black;
overflow: hidden;
font-size: 1em;
}
Check the fiddle
Hello there, I just created this datepicker thingy which turned out pretty cool except that it creates some really annoying and weird looking white space below the divs when empty and appears higher, see the fiddle > http://jsfiddle.net/VtKkM/2/ Any help is greatly appreciated!
Haven't figured out the problem as of yet, but it seems that it doesn't like it when the spans are empty. One workaround, at least for now, is to replace your blank options with just a space ( ) so that there's still the illusion that it's empty but the spans still technically contain a value. This may not be a permanent solution, but it'll work for now.
To elaborate:
Line 2 of your js would go from
var days = '<option></option>',
to
var days = '<option> </option>',
and line 32 would go from }).parent().prepend('<span></span>'); to }).parent().prepend('<span> </span>');
Its for line height and your font size of page you can fix it by
Add line height style to your datePicker class like this:
line-height: 8px;
or change font-size like:
font-size: 10px;
Edit:
and for moving when you pick a some value from select you should set your span to position: absolute;
.datePicker > div > span{
position: absolute;
}
Edit2:
or you can set space value in first time in your span, change <span></span> to <span> </span>
Edit3:
i changed this lines to add space in initial between span tag, check values that add onload datepicker:
$.each(picker.children(), function () {
$(this).wrap('<div>').change(function () {
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val() - 1]);
} else {
$(this).prev().html($(this).val());
}
}).parent().prepend('<span> </span>');
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val()]?months[$(this).val()]:" ");
} else {
$(this).prev().html($(this).val()?$(this).val():" ");
}
});
Edit 4:
and css way, you can fixed it by add padding style to empty span like this:
.datePicker > div > span:empty{
padding:5px;
}
.datePicker > div {
display:inline;
position:relative;
min-width: 18px;
min-height:28px;
padding:0 5px 0 5px;
}
Just change display:inline-block to display:inline
The part about it appearing high I could fix with giving .datePicker select a 5px margin.
I have a nested shopping-type list that is grouped by type (and has descriptions for each item).
What I'm wanting to do is have the last type scrolling in the list, until the point that it would scroll off the top of the list.
A list may declared as
<div id="items">
<item-type>Type A</item-type>
<description>a</description>
<description>b</description>
<description>c</description>
<item-type>Type B</item-type>
<description>d</description>
<description>e</description>
<description>f</description>
<description>g</description>
<description>h</description>
</div>
I'm using element types so that I can use #items > item-type:last-of-type in CSS3 to select the last element.
#items {
word-wrap: break-word;
overflow: auto;
height: 100%;
}
#items > * {
display: block;
}
#items > item-type:last-of-type {
position:absolute;
bottom: 100px;
}
So the only point now, is how do I keep it (effectively) position: relative; top: 0 to position: absolute; top: 0 using only CSS3?
I'm using FF4 and HTML5, so you can go all out; this won't be supported on older browsers. Also, using calc() is fine.
The valid view options are be something like:
______________________________________
Type A a Type B
a b e
b c f
c Type B g
d h
---------------------------------------
Where the lines are the visible area, and each column shows how it would appear given a certain amount of data (progression left to right)
If I understand the problem correctly, you want to create something like the iPhone Contacts list. Looking at the solution someone already built it uses JavaScript. Also, I've thought about it and gone through all the CSS3 specs but cannot determine anything that could be used here to achieve the same affect without JavaScript.
I knocked up a small demo, but again this uses JavaScript. I just don't think it's possible with pure CSS, although I'm sure someone will correct me if that's not the case :-)
HTML
<div id="items">
<item-type>Type A</item-type>
<description>a</description>
<description>b</description>
<description>c</description>
<item-type>Type B</item-type>
<description>d</description>
<description>e</description>
<description>f</description>
<description>g</description>
<description>h</description>
<description>i</description>
<description>j</description>
<description>k</description>
<description>l</description>
</div>
CSS
#items {
word-wrap: break-word;
overflow: auto;
height:100px;
border:1px dashed red;
width:200px;
}
#items > * {
display: block;
}
#items > item-type {
border:1px dashed blue;
background-color:#fff;
width:180px;
}
JavaScript (jQuery 1.6+)
var itemsTop = $('#items').position().top;
var itemTypeHeight = $('item-type').height();
var itemTypeBottom = itemsTop + itemTypeHeight;
$('#items').scroll(function() {
$('item-type').each(function() {
$(this).css({position:''});
if ($(this).position().top < itemsTop + itemTypeHeight) {
$(this).css({position:'fixed',top:itemsTop});
}
});
});
I think it's not possible for the following reasons (which may or may not be related):
When in normal viewing, a relative position is needed; at the top of the visible area, it would need to change to absolute
you could use calc() and min() or max() with the visible height, the current element's height and the current scroll position; except that none of these calculated properties are available to css
Another idea is making more absolute positioning of the 2nd item level, but there's no way of referencing the absolute-parent's height as well as the absolute-grandparent's height.
I think the first point is the easiest way to convince myself that it's not possible. The other two convince me that combinations of fancy css functions and absolute positioning are sunk as well.
I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:
#list { overflow-x: visible; overflow-y: hidden; }
This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:
$("#list").sortable({
connectWith: ".connectedSortable",
helper: 'clone',
appendTo: 'body',
zIndex: 999
});
The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.
I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.
My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?
EDIT:
Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.
You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.
The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/
$('ul').sortable({
appendTo: 'body',
helper: function(event,$item){
var $helper = $('<ul></ul>').addClass('styled');
return $helper.append($item.clone());
}
});
The other option is not to use append:'body', but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.
The solution is to push your whole sortable on top when dragging starts and restore it when it stops:
$('#mySortable').sortable({
start: function(){
// Push sortable to top
$(this).css('zIndex', 999);
},
stop: function(){
// Reset zIndex
$(this).css('zIndex', 0);
}
});
If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.
Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.
I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.
I added this into the area where I created the sortable.
I took the text out of the sortable and created a new list item with that as text.
Javascript:
appendTo: 'body',
helper: function(event,$item){
console.log(event);
var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
return $helper;
}
I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.
CSS:
.styled li{
margin-left: 0px;
}
.styled{
cursor:move;
text-align:left;
margin-left: 0px;
padding: 5px;
font-size: 1.2em;
width: 390px;
border: 1px solid lightGrey;
background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
list-style-type: none;
}
i am using toggle buttons in my application, i would like to set the backgound-color when the button is pressed.
how can i know what is the proper attribute?
and in general is there any place that i can know which CSS attribute has which effect on the HTML element?
If you are using GWT ToggleButton, then you may
import com.google.gwt.user.client.ui.ToggleButton;
final ToggleButton tb = new ToggleButton( "my button text" );
if (tb.isDown()) {
tb.addStyleName("pressed"); // or tb.setStyleName("pressed");
}
and in your css file:
.pressed { background-color: blue; } /* any color you want */
Another way - to change just background of this given button:
tb.getElement().getStyle().setProperty("background", "green");
I know GWT is similar to jQuery, but I've never used it... with jQuery I'd do this (I wasn't sure what kind of button tag you were using, so I included both):
CSS
input, button {
background-color: #555;
color: #ddd;
}
.clicked {
background-color: #f80;
}
HTML
<button type="button">Click Me</button>
<input type="button" value="Click Me" />
Script
$(document).ready(function(){
$('button, :button')
.mousedown(function(){ $(this).addClass('clicked') })
.mouseup(function(){ $(this).removeClass('clicked') })
.mouseout(function(){ $(this).removeClass('clicked') });
})
and in general is there any place that i can know which css atribute has which effect on the HTML element?
Yes, http://www.w3schools.com/css/ has most of what you will probably need. Check the left column for the CSS-property you're looking for.
Regarding your first question, I you can just use the btn:active, btn:hover, btn:visited properties. (i.e. your button has the class/id 'btn'.)
Good luck