In day view when you click on a time slot, it selects a later time slot. Works fine on very early hours (upto 3 am or so) and then the time slot selected moves to 30 to 90 minutes later than what is actually clicked on.
The demo on http://arshaw.com/fullcalendar/ works fine so it's something in my custom css that may be the problem.
I am using Firefox 12.0 and FullCalendar 1.5.3 on the client side and the server side is WAMP and CodeIgniter (but all server side code works fine).
These are the previous reports I found, but no clear resolution:
code dot google dot com/p/fullcalendar/issues/detail?id=631
code dot google dot com/p/fullcalendar/issues/detail?id=1216
It won't be possible to post my code since it's part of a large app. So without that, any ideas where I should look?
This question is old, but I have just had the same problem.
It was caused by two rules in my custom css. The first was a general "line-height" setting in my reset.css (removing this made the biggest difference). The other was a padding rule applied to:
#calendar table {
padding: 10px;
}
Once I removed both these rules, the time slots could be selected accurately.
Following up on the answer from Ryan Nel:
I had the same situation where the font-family was overriden by my "theme" stylesheet forcing the calendar slot select to be off on hours late on the day.
I added the following line to my theme CSS to enforce line height on the calendar:
.fc-agenda-slots {
line-height: 1em !important;
}
It worked for me, but there might be other things like padding you want to enforce as well. Just add the rules within the same brackets.
Related
What i'am trying to do is to remove, or at least hide the horizontal scrollbar in Firefox when i visit a specific website/url. I found code which hides the bottom scrollbar, but on all websites:
:-moz-any(#content,#appcontent) browser{
margin-bottom:-17px!important;
overflow-x:scroll;
}
All i did so far is to create the chrome folder, created the userChrome.css and pasted in the above code. So far so good. Since i have literally no idea how to bind this customisation to a specific website/url i just tried to replace the first line with the following code:
#document url("https://www.example.com/"){
or
:-moz-any(#content,#appcontent), domain("https://www.example.com/") browser{
or
#-moz-document url-prefix("https://www.example.com/"){
What iam searching for is more or less a "if-condition" when the url of the website contains "xyz.com/" (like the url-prefix(): "Matches if the document URL starts with the value provided") then remove/hide the bottom scrollbar. I know this is super rude to ask something like this, but i think i just need the correct syntax to add the website/url condition in the code. And to go though hours and hours of tutorial material to find the correct syntax i though i just ask here.
Have found great help with R on SO--now for something completely different.
I am working in WordPress 5.8.3.
I am building a website using the Blank Canvas theme, a child-theme of Seedlet--Not sure whether that is all relevant. I am a novice with WP and all things web development. I have installed the Events Calendar plugin and have it all configured with some test events and dates so no issues there. I am customizing the theme colours using the Additional CSS prompt from the WordPress dashboard interface.
I haven't gotten permission to publish the site, so unfortunately I can't offer a live demo. I will try to be explicit.
I have found helpful resources with instructions on how to use this utility for menus, for general custom CSS, and some useful information for changing properties of footers with CSS. Now I am trying to modify hyperlink colours within the Events calendar widget. I have approached this problem the same way as all the others but this one has stumped me. I elaborate:
From this image, you can see the Events Calendar hyperlink text is yellow. I opened the inspector and determined that this object is called .tribe-events-widget .tribe-events-widget-events-list__view-more-link. I thought the following code should change the colour
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:#000;
}
It does not. This code makes no visible change. However, when I also change the background-color like this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
background-color:black;
color:#000;
}
The result is:
This led me to believe that there is no colour option for this element---HOWEVER, the inspector shows that this element has the 'color' property:
And I'm stumped. I'm not even sure when or how this color-link-accent got defined. This check-mark toggle is not a permanent solution and besides, I would very much like to understand what is going on here.
Any advice would be greatly appreciated.
It's a bit difficult to be certain of the problem as we don't have the context, however I was surprised that you saw just this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link
and didn't find an anchor (a) element within it.
I would have expected that you'd have to do:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link a {
color:#000;
}
as it is quite likely the anchor element will have its own special styling which will override your setting because of the increase specificity.
If that doesn't work then use your browser dev tools inspect facility to find out more about the context of that a element - you may need to give even more hints to the browser on pinning it down.
Well, this would have helped me, so I will post the solution to my question for posterity. I learned from this question and thread about overriding cascading commands. I still don't understand where the command producing the yellow text in the first place was, but I managed to override it by appending !important in my CSS. The full CSS to turn the text from yellow to black is:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:black !important;
}
Reading on, this does not necessarily mean that I was specific enough about the context although I find it hard to tell in this case. This reference has some other useful info as to when it is appropriate to use !important. It seems this is not the optimal solution.
Hope somebody else can benefit from my toiling...
I was messing around in the Ghost admin panel under Code Injection settings and succeeded in changing the text color of my HTML <code> blocks to from red to black.
Now that I've made the change, I can't figure out how to undo it.
Adding a <style> block doesn't seem to change anything, nor does a dynamic script seem to help.
Edit: I verified that it's not a caching issue, nor is it limited to a specific browser.
On the left-hand side of the Ghost admin screen is a tab titled "Code Injection". In this section, Ghost offers users the ability to inject valid HTML/CSS/JS on the top or bottom of each post.
I tried a number of possible solutions in there, but out of desperation, went back and tried using a <style> block once more. I was able to change the color by entering this value in the header, saving changes, then deleting and saving again:
<style>
code {
color: black;
}
</style>
It's possible that I entered my formatting fixes into the <footer> box or mistyped a character, but I'd be curious to know which.
Try clearing your browser cache (or holding down ctrlF5 at the same time in your browser) and then try again. Ghost makes heavy use of caching.
I'm working on a website developped with C#, ASP.Net and Telerik components. I have a RadButton that doesn't display properly an image I'm trying to set to it.
Tracing the styles with Firefox, I've seen that my image is shifted by some properties (padding) that come from a file called WebResource.axd.
I tried to play with the padding property of my button directly within the Default.CSS file but it keeps being overwritten by this WebResource.axd.
So far, I've found that the keyword important in order to force my properties to be used no matter which parameter is used later.
Within Default.CSS :
.rbLinkButton {
padding: 0px 0px !important;
}
It works but, it feels bad and I feel like I'm introducing an evil shortcut here... Is there a better way of doing that ?
Better is to increase the specificity of the CSS rule so that yours takes place. More info here: http://blogs.telerik.com/aspnet-ajax/posts/08-06-17/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin.aspx
First, thanks so much for your time in advance.
I work for a higher ed institution in Philadelphia. We're trying to utilize the nth-child pseudoclass to make every other row in our tables gray.
The line of code I've written in our Styles.css files is
table.oddrows tr:nth-child(2n+3) {background-color: #eeeeee;}
I used 2n+3 because the first row of the table will be a darker gray than every other row because it will be a header, so I want it to start applying the background color to the 3rd row, and then every two rows after that (i.e. 3,5,7, etc.)
We use Ektron's CMS (version 8.01 SP1), and for whatever reason, the class just won't show up in the available class list, and when I try to apply it manually (i.e. manually putting <table class="oddrows" width="500"><tbody> in the body of the code) it STILL doesn't work.
I've cleared my cache on several occasions, and am still drawing a blank. (I'm using IE 8, for the record)
Any ideas? Everything I've read says my syntax is correct, and I'm about ready to tear my hair out.
Thanks again for your time!
The nth-child selector isn't supported in IE8. For IE, it's only available in 9 and up.
In order to get something like that to work, you may have to stray from pure CSS, and use some jQuery. If you're already using jQUery for other things in the site, this is a no-brainer, as it would only be adding a couple lines to your document ready statement like so:
jQuery(document).ready(function() {
$('.oddrows tr:nth-child(2n+3)).addClass("darker");
});
You would also then have a CSS class of .darker:
.darker {background-color:#eee}
Now if you're not already using jQuery (or don't have the option), this obviously won't work.