I'm using GWT for create a web-application; by default Google Web Toolkit append your style name.
For example the following code
Anchor myAnchor = new Anchor("Test");
create this HTML
< a href=".." class="**gwt-Anchor**">Test< /a>
Can i remove ALL gwt style name on ALL widget?
In example I want remove gwt-Anchor class, but I don't want run removeStyleName("gwt-Anchor")
Thanks
There's no easy way to do it, no. You have to explicitly removeStyleName(…) or more simply setStyleName("") on each widget.
setStylePrimaryName()
Anchor myAnchor = new Anchor("Test");
myAnchor.setStylePrimaryName("mystyle");
As per docs :
Sets the object's primary style name and updates all dependent style names.
If you don't want to remove the style then apply new style using setStyleName(""). So In your project style sheet file, Define gwt-Anchor style with empty brace which tag already exist in GWT style.
Thus you can inherit same style name with !important keyword in gwt project. it will apply project css. and it will remove all GWT style. so copy style name and paste in your project css. i.e.
style.css
.gwt-Anchor
{
//Any style you want to apply
}
Related
I use a tree for navigation in an Oracle APEX app, and use the "Link Column" setting for navigation.
Although, I would like to use the <a> tag attributes (target="_blank", for instance). The Link column only sets the href attribute to the link.
I would like to use another column in my table to set it as the target or other tags.
The link attributes on a tree don't support the target attribute. If you want the link to open a new window/tab you can change the link to run javascript to open the target. Set Target Type = URL, and set the URL to:
javascript:window.open("...link to page...","_blank")
e.g. if your query has a column called LINK_URL:
javascript:window.open("&LINK_URL.","_blank")
Can I edit a HTML-tag's CSS using DART?
I have done some searching but I couldn't really find out how to do it, or if it even is possible.
The reason to do this because I would like to change a button's location on a page.
You can change or view css properties through Element.style. The Element.style is an instance of CssStyleDeclaration. You can do the following:
Element element = document.querySelector("div")
..style // edit any of the properties of this variable
..style.background = "orange";
I guess you are looking for something like
var el = document.querySelector('.somediv');
// or '#someid' or other CSS selector to get hold of an element
el.style.color = 'blue';
You may want to look at the dart class CssStyleSheet which can grab a sheet and delete, insert and add rules. You need to know the index of the rule in the style sheet.
Just wanted to know if it is possible to change the font,color,font size while parsing html to pdf using xmlWorker.parser
Currently I am able to parse whatever I have given as the input.So I wanted to change the font,font size, font color etc if possible.
Thank you
You can create your own CSS style and add it to your HTML code. The CSS style will be applied according the priority given below where no 4 is the higher priority.
1)Browser default
2)External style sheet
3)Internal style sheet
4)Inline style
Example:
document.open();
String finall= "<style>h1{color:orange;} </style><body><h1>This is a Demo</h1></body>";
InputStream is = new ByteArrayInputStream(finall.getBytes());
XMLWorkerHelper.getInstance().parseXHtml(pdfWriter,document, is);
document.close();
In the Example Orange color will be set to the header.
In my JSF 2 Primeface application I have following file upload component.
<p:fileUpload id="related_image" fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advance"
auto="false"
showButtons="false"
sizeLimit="100000"
fileLimit ="1"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
style="width: 310px"/>
I want to remove progress bar from this component so I am doing
.progress {
display: none;
}
and this work but I want to remove the progress bar attached to this file upload component only and not from my entire application, so I tried
#related_image .progress{
display:none;
}
but this doesnt work, any clue guys?
Your <p:fileUpload> component can have prepended id. View the generated HTML output after deploying and check for the actual id of the component.
<p:fileUpload> is in some form (or in other wrapping component e.g. <p:panel>). Primefaces automatically add forms id to components inside this form. So the actual id of <p:fileUpload> probably looks like id="formID:fileUpID" and thats why it can't find #fileUpID.
Note: You can disable prepending ids by prependId="false" attribute.
Note 2: You can also try to specify styleClass for the <p:fileUpload>, which you can style in CSS.
First, you got an extra space in
\#related_image .progress{
the selector should be
#related_image.progress{
Second, if the fileUpload component really has prefixed id (as the Fallup suggests) you need to escape the colon from the id in the css selector - see e.g. Handling a colon in an element ID in a CSS selector for this.
in general (in css you need to escape the colon with \3a Handling a colon in an element ID in a CSS selector , while in jquery you should use \\:)
#some_prefix_id\3a your_file_upload_component_id .someClass{
display:none;
}
where the some_prefix_id might be some form id or some naming
container id ,
Although , INMO a better approach would be assigning an id to your form and using this selector in css :
#your_form_id .someClass{
display:none;
}
I have dynamically created a table using JSON inside a function . I could not find a way to apply the the qtip.js and its style to this dynamically created html table. Can anyone tell me a way to apply styles and qtip.js inside a jQuery function?
Could you add some sample code on jsfiddle.net ?
Did you consider about naming the html table in anyway and set the css rules anyways, so the come in place as soon as the table is rendered ? otherwise you could apply the styles after the table has been created by $('table').css("width","200px");
Just obtain a reference to the element you dynamically created and apply qTip accordingly:
var table = $('<table></table>')
.appendTo('body')
.qtip({
content: 'This is an empty table.',
show: 'mouseover',
hide: 'mouseout'
})