I just discovered the "CustomScrollPanel" and it seems to be a great piece of GWT. I also noticed that is is also possible to add a custom "NativeVerticalScrollbar".
However, I could not find out so far how to apply CSS to this object. I searched the web but did not find anything. In the source repository on github I discovered the file https://github.com/gwtproject/gwt/blob/master/user/src/com/google/gwt/user/client/ui/NativeVerticalScrollbar.css however, it is empty.
So, can anybody please give an example what kind of css can be applied in order to style the scrollbar?
You you familiar with ClientBundle? Take a look at the source code of the CustomScrollPanel or the NativeVerticalScrollbar
They both have a declarion of a Resources interface, all you need to do is to extend this interface and bundle a new CSS (or GSS) with your style.
This is the current Resources interface for the NativeVerticalScrollbar
/**
* A ClientBundle of resources used by this widget.
*/
public interface Resources extends ClientBundle {
/**
* The styles used in this widget.
*/
#Source(Style.DEFAULT_CSS)
Style nativeVerticalScrollbarStyle();
}
Create the CSS (or GSS) that you want, customize it away. It has to respect the Style Interface declaration (and the compiler fails if you don't)
public interface MyNewResource extends com.google.gwt.user.client.ui.NativeVerticalScrollbar.Resource {
/**
* The styles used in this widget.
*/
#Source("/PATH_TO_YOUR_CSS/newCss.css")
com.google.gwt.user.client.ui.NativeVerticalScrollbar.Style nativeVerticalScrollbarStyle();
}
Then when you create a new widget, just pass MyNewResource instance to the widget
MyNewResource resources = GWT.create(MyNewResource.class)
NativeVerticalScrollbar myScrollBar = new NativeVerticalScrollbar(resources);
Related
I'm trying to inject a CSS file to a third party iframe that I need to change the styling.
I thought of using
ngOnInit() {
...
this.myIframe.nativeElement.document.head.appendChild('style.css')
}
but it is not working for some reason beyond my grasp.
Any help will be appreciated.
Cheers
This workaround will work if your Iframe is not from a different domain. You will get a cross-browser error.
Template
<iframe #myIframe></iframe>
Component
#ViewChild('myIframe') public myIframe;
..........
ngAfterViewInit() {
const iframDoc = this.myIframe.nativeElement.contentWindow.document;
.....
iframDoc.head.appendChild('style.css');
}
.....
It isn't possible to inject code like I thought it was so I ended up overriding the CSS when the SCSS file that controlled that page was compiled.
In some occasions, I had to use the whole inheritance chain to get a field to behave the way it was required.
Thank you for your input #SuhelKhan
Consider the following scenario:
Test class:
class Test{
protected $title;
protected $description;
}
Base Question class:
class BaseQuestion{
protected $Test
protected $question;
}
Text Question class:
class TextQuestion extends BaseQuestion{
}
Checkbox Question class:
class CheckboxQuestion extends BaseQuestion{
protected $options;
}
So I have all this setup, now I need an easy way for people to create new tests with questions.
I first started by using Sonata Admin as a CMS, which was working fine as long as I didn't use polymorphism and just used 1 type of question. Using the inline option you could create questions when you were creating test. However including the inheritance to Sonata Admin with their inline option proved to be unsuccessful.
I then tried to remove all the Sonata Admin stuff and just build a plain form to do this but again, with only 1 type of question this works very well with embedded forms. But as soon as I tried implementing it with the inheritance classes, things proved more difficult.
I tried using the Infinite PolyCollection Bundle but couldn't find anything on how to display the form. I then found the Arse Polycollection bundle (which uses the Infinite bundle) but can't get it to work even though I was following the tutorial step by step.
Currently it's giving me the following error:
FatalErrorException: Error: Call to undefined method Symfony\Component\Form\FormBuilder::getTypes()
I am getting clueless on how to proceed with this, has anyone got the above bundles working before?
Or do you have other suggestions on how to set up a (small) CMS system for this?
Update:
I basically did everything manual now and it's working but I do hope they include a way of doing this with the framework in the future.
We are looking into providing users of our application the ability override the default site CSS.
Currently they can choose a site theme but it would be nice to allow them to change properties such as background color, font color, font face etc.
I'm torn between giving each site a "user defined" stylesheet that can be edited from the administration area or providing some kind of CSS builder.
The first option provides the most flexibility but could also be the most problematic and requires the user to have some basic understanding of CSS.
So aside from the obvious, (which is the best solution?) I have a few additional questions:
User Defined Css:
Is there a web based CSS editor available?
Is there a server side (.net) CSS validator available (for verifying the css the user enters)
Css Builder:
Is there a web based CSS builder already available?
What is the best way of generating the CSS based on the rules provided by the user (I thought about using some kind of templating engine to do this (NVelocity, Razor etc.)?
Thanks
Solution
I've added an answer below with the solution we went for.
however never used, recently I looked at Brosho Design in the Browser jQuery Plugin
With this Plugin you can style your
markup right in your browser with a
build-in element selector and CSS
editor. Generate the CSS code of
altered elements with one click and
use it in your own stylesheet.
demo here
I'd recommend to build a custom css editor since it's the easiest way to limit which elements and attributes the user will be able to edit / customize, and how. Just keep it simple and you will do just fine.
To validate CSS you could use the API of the W3 CSS Validator, http://jigsaw.w3.org/css-validator/api.html
I've built an application that does exactly this. It's a little more involved as there are multiple master pages and themes, and the user can attach custom urls to load themes - example: /someclienturl would load a specific theme.
Anyway, here's the schema I used. One thing I wish I added is the ability for power users to add custom styles to the stylesheet that's eventually written. Basically, a theme section would apply to a selector #header, for example. And ThemeSectionCssStyle holds user added customizations for that selector. If you have any more questions let me know. It ended up being a fairly involved sub-project. I'm curious to see what anyone else came up with.
I think the key factor here is whether you want your users to 'play with the codez'
If you do then something like this (posted by #Caspar) can be helpful in generating the css. If you do allow direct access to the css then the W3 CSS Validator (posted by #Trikks) is definitely necessary.
In my case I didn't want to provide direct access to the Css. Looking around at various sites that allow you to change simple style properties (background-color, font-face, color etc.) it seems that they have just created their own interfaces for this. There are plenty of javascript plugins around for making this process quite slick (color pickers etc.).
Once you have the styles stored somewhere you need some way of rendering them out.
I couldn't find any .net Css writers. I think it may be possible in Less but the solution was quite simple just using what's built into asp.net mvc.
I created a Css action result (courtesy of #Darin Dimitrov):
public class CssResult : PartialViewResult {
public override void ExecuteResult(ControllerContext context) {
context.HttpContext.Response.ContentType = "text/css";
base.ExecuteResult(context);
}
}
Then in my controller (a simple example):
[HttpGet]
public ActionResult Index()
{
var styles = new Dictionary<string, string>()
{
{ "color", "red" },
{ "font-family", "Consolas, Courier, Serif" },
{ "font-size" , "12px" }
};
return this.Css(styles);
}
Then my view (views/css/index.cshtml):
body {#foreach (var item in Model) {
#string.Format("{0}: {1};", item.Key, item.Value)
}
}
This will essentially render out the styles in the passed in dictionary. Of course you may want to create a specific class for holding these styles so that you could also specify the dom element name/class/id.
Finally to render out the stylesheet on our page we can call Url.Action("index", "css").
Intro: After reading Brad Wilson Metadata series and searching unsuccesfully on google, I was wondering:
Question: Has any OS project / code been created that allows you to tag CSS styles in the Meta information, for example in my (buddy) Model, I want to be able to decorate a property with multiple CSS styles (a single style you can fake with UIHint, I want to set many possible styles - and be able to "cross-utilise")
eg.
public class MyModel
{
[DisplayCssHint("h5")]
[DisplayCssHint("color:#777;")]
[EditorCssHint(".myCoolTextClass")]
[EditorCssHint(".myOtherCoolTextClass")]
public string Title{ get;set; }
[DisplayCssHint(".normaltext")]
[EditorCssHint(".myCoolTextClass")]
[EditorCssHint(".myOtherCoolTextClass")]
public string Message {get;set;}
}
Thoughts: I know that this does not seem like a logical place to put styling information, however as it is metadata and is discriptive... besides it would be nice to do this while prototyping - (especially being able to apply class styles and extending it further - to generate .Less files would really be cool! more to the point I would hate to write it, if its already been done ;). Any links/pointers/idea's would be appreciated.
Thanks,
cannot get the comments to show in actionscript file when running asdoc.. is this a known bug?
[Bindable]
/** test comment */
public var currentSearchTextValue:String;
does not show anything in the generated documentation... am I doing something wrong?
[Bindable] actually generates code that wraps the property, so it might not be possible. Try moving [Bindable] to after your comments, but failing that you might be out of luck I'm afraid.
Although I don't see anything wrong here, I would follow the ASDOC best practices - putting the comments in separate line with a preceding asterisk as suggested here and see if that works.
[Bindable]
/**
* Test comment
*/
public var currentSearchTextValue:String;
I am having the same issue and have posted a detailed question here. no answers yet.
One workaround is to use an event name along with the Bindable tag
[Bindable("someEvent")]
/*
* asdoc comment
* */
public var currentSearchTextValue:String;
but this wud require u to dispatch "someEvent" manually to get binding work. So u might wanna use this for generating asdoc alone and change it back to the older version afterwards.