I'm building a calendar plugin for Vaadin (see https://vaadin.com/). Everythng works fine, the stylesheets are applied EXCEPT when I programatically change the view. The view changes but the Fullcalendar styles do not apply correctly! See sample screenshot.List View after changeView called
I need to hit refresh for the styles to apply correctly.
(If I just change the view using the full calendar 'built in' buttons at the top right, the styles are applied.)
Using FullCalendar V3.7.0 and and Scheduler trial 1.9.0
Vaadin is a GWT framework, using V6.8.
GWT code for calling changeView:
private native void changeView(JavaScriptObject cal,String view,String nid)
/*-{
cal.fullCalendar("changeView",view);
//cal.trigger( "create" ); trying to fix the not-applying .css problem
}-*/;
'cal' is the original selector returned by jQuery.
Any ideas how to fix this?
Found the problem. It was due to the Vaadin framework removing FC's style class from the topmost element. To fix, I simply added these back using the framework's setStyleName("fc fc-unthemed fc-ltr");.
Related
When I drag an image in react that has draggable set to true, I get not-allowed / no-drop cursor. I can't figure out how to target it with CSS to overwrite. The way I handle the drag is onDragStart then onDragEnd.
Without some reproducable code i just can try a shot in the dark: You have to call at the beginning of your drag handler e.preventDefault();.
I faced the same issue back when I was working on one of my React projects, so I did some research and tested several methods that I found, but nothing worked for me. You see there is a property named DataTransfer.effectAllowed that specifies the effect that is allowed for drag operation, and there is a limitation to this API as you can read here -
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
Changing the styles or attaching an eventListener won't work, you have to use a different backend for this. Use react-dnd and react-dnd-touch-backend or react-dnd-html5-backend npm packages as a custom backend.
https://www.npmjs.com/package/react-dnd
https://www.npmjs.com/package/react-dnd-touch-backend
https://www.npmjs.com/package/react-dnd-html5-backend
I have problem with client side in Task list in Sharepoint 2013. I need to distinguish maintask (set the background color for example). I tried to change styles ".ms-listviewtable .ms-itmhover" and ".ms-alternating" in core15v.css, but did not get the expected result. How i can solve this problem?
It's best to leave core15 as is OOTB and add a new stylesheet with your overwrites. Make sure this new stylesheet is called after core15 in the masterpage and use the inspector in your browser to make sure you're getting the entire selector. If you write new properties for .ms-listviewtable but core15 uses #s4-workspace .ms-listviewtable, the one defined in core15 will take precedence as a more specific selector.
I need to create an application in which we are changing the style of the application that is theme of the application based on the button click.
I have download the theme that all contains different CSS file. I need to dynamically declare the CSS for the application to apply that theme.
I have file name Theme1.css, Theme2.css, Theme3.css, Theme4.css, Theme5.css.
when I click on the Theme 1 Button then I need to apply Theme1.css file as source of style. similar like that when I click on the Theme 2 Button then I need to apply Theme2.css file as source of style.
Note : css file contains Style for both application and component of the Application.
Have a Nice DAY....
You would have to use the facility within eclipse/flex builder to compile the CSS into SWF so that the styles can be changed at runtime.
You would also have to maintain the instance variable of the current theme id.
Is this what you are looking for?
public function switchTheme(theme:int):void {
StyleManager.unloadStyleDeclarations("assets/styles/Theme"+currentTheme+".swf");
StyleManager.loadStyleDeclarations("assets/styles/Theme"+theme+".swf");
this.currentTheme = theme;
}
You would then assign the click handlers for each button to the switchTheme function - passing the theme id as a parameter.
I think you have to loop all control one by one and set theme on control.
for Eg.
If you set default theme RED and button is red then you change theme to Blue then you set button color to blue using looping of control.
May be this help to you....
Please ask me if you not getting what i am saying...
Thanks.
You need to compile your CSS files as SWF. You can right-click the CSS files in Flash Builder's explorer window and select "Compile CSS to SWF" from the menu.
Then you use the loadStyleDeclarations() method from StyleManager to load the SWF file with your CSS info.
The previous step will only add the new styles to your style subsystem. If you want to clear the old styles, you need the unloadStyleDeclarations() method first.
If you unload the currently active CSS declarations, use false as the second parameter so StyleManager does not invalidate the styles and rebuilds the style declaration chains/cache for the components on stage. This is not only be slow, but will also result on a screen refresh with the default styles before applying the new styles.
You could have something similar to this, and call applyTheme('url/to/theme.swf') with the appropriate URL whenever you want to change the theme:
private var currentThemeURL:String = 'themes/default.swf';
public function applyTheme(themeURL:String):void
{
StyleManager.unloadStyleDeclarations(currentThemeURL, false);
StyleManager.loadStyleDeclarations(themeURL);
currentTheme = themeURL;
}
I have an MVC 2 project, consisting of a MasterPageView a child View called Index and a number of PartialViews. The PartialViews are loaded into the Index View using the jQuery Ajax method $.get(....).
My problem is that I am styling the buttons using jQuery UI like:
$('button').button();
but I find that I need to do this on every PartialView. What I would like to do is define
this once in the MasterPageView, but if I do this the styling is lost. I'm guessing this
is because the styling is applied before the DOM is loaded, is this correct? Is there any
way to implement this i.e. just define it on the MasterPageView?
Thanks for the help !
This wont work when objects are added to the DOM after the initial load. In those cases you should go for the new .live() syntax in jQuery :
$("button").live("load", function(){
$(this).button();
});
It listens for new objects being added to the DOM and attaches an eventhandler to it..
Hope that helps!
I want to apply custom css to my calendar control. I have applied the same at corresponding locations for e.g.
e.Cell.CssClass = "highlight";
clndrEvt.TodayDayStyle.CssClass = "currentDay";
clndrEvt.OtherMonthDayStyle.CssClass = "OOB";
clndrEvt.NextPrevStyle.CssClass = "dayTitle";
However when i render the control, my styles are not reflected.
When i check 'View Source' it applies my classes (italic) and ALSO applies in-line styles (underlined) along with it, which overwrites my styles. For example,
class="highlight" align="center" style="color:White;background-color:Silver;width:14%"
Can anyone help me out with this? To be very specific how to remove those in-line styles (by using which properties) from the HTML by settings properties of calendar control.
I have tried few, but that did not work.
e.Cell.Attributes.CssStyle.Clear();
e.Cell.Attributes.Add("Style", string.Empty);
clndrEvt.Style.Clear(); // clndrEvt is my calendar control
I had a similar issue recently with a project I had inherited. I worked out that the styling was being added via the Master.skin in app_themes. Might be worth a check there.