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;
}
Related
So I've got this dropdownlist and I want to change the whole websites background color using it.
This is my MasterPage body:
<body style="overflow: auto;" runat="server" id="bodyMasterPage">
And I'm trying to set the background like this.
var body = Master.FindControl("bodyMasterPage");
if (ddlColor.SelectedValue == "Green")
{
body.Attributes.Add("background-color", "Green");
}
But when I try add the Attributes to the body, I get an error saying:
"Control does not contain a definition for 'Attributes'..."
So my question is, how should I go about actually changing the background color of the MasterPage from here?
The compiler is telling very well exactly what kind of error you are dealing with, Master.FindControl returns an object of type Control which doesn't an Attributes property. Control objects, however, can be casted to a specific type they correspond to. In our case HtmlGenericControl can do the job.
You have to include the appropriate namespace first by adding the following line on top of the page:
using System.Web.UI.HtmlControls;
And then you can adapt your example with this:
var body = (HtmlGenericControl)Master.FindControl("bodyMasterPage");
body.Attributes["style"] += " background-color: green;";
Be careful how you are using the attributes, what you have shown in your code would have created an attribute of type background-color with value Green, and what you really want is either add a class to the body or directly access the style attribute like I did but adding your value to it.
I specifically used the addition assignment operator, in case you have any other styles on the body so you don't overwrite them and just include your change. However if you want to completely rewrite it you can change it around or use your approach with proper attribute name (style).
Am using This modal in angular2 and i would like to position the modal popup to the left this is what ive tried
<modal #categoriesmodal [cssClass]="modalchecklist">
<modal-header [show-close]="true">
<h4 class="modal-title">I'm a modal!</h4>
</modal-header>
<modal-body>
Hello World!
</modal-body>
<modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
On the css class
.modalchecklist{
position:absolute;
top:0;
left:0
}
Ive tried adding //background color:red on the css class but this fails and adds the css to the background document not on the modal
Where am i going wrong on the css classes
Ive checked also on the chrome developer tools but they too dont solve the issue.
What could be wrong
To apply a style attribute in Angular2 you can use the [style] directive, like this
<what-ever [style.backgroundColor]="'red'">I am red</what-ever>
To apply a class, use ngClass:
<what-ever [ngClass]="'first'"><what-ever>
<what-ever [ngClass]="['first', 'second']"></what-ever>
<what-ever [ngClass]="{'first':true, 'second':conditionExp}"><what-ever>
See the ngClass link above for multiple syntax options and using expressions.
Please note all these methods are directives and, being directly bound to the scope, they expect expressions. In order to pass strings, you need to qualify your expression as string: use single-quotes inside double-quotes, and they'll be correctly evaluated as strings.
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
}
is there a way to add jquery ui classes into my own css file per element, IE:
input {
ui-corner-all /* <- JQuery UI class */
}
as opposed to adding the class to every input, IE:
<input name="myinput" type="text" class="ui-corner-all" value="" />
You can check out LESS, here is a very similar question on SO Can a CSS class inherit one or more other classes?
LESS is an extension for CSS a great level of abstraction with variables, nested rules, function, operations, etc
You can use the jQuery .addClass method to add a class to elements at any time, including page load, such as:
$(function() {
$(input).addClass('ui-corner-all');
});
This would add the ui-corner-all class to every input element in the html when the page loads. If you would like to select only certain elements on the page, use a more specific selection, such as:
$(function() {
$('#myInput').addClass('ui-corner-all');
});
This will add the ui-corner-all class to all of the elements on the page that have the ID of myInput.
You might want to look into checking out Sass. This will give you the option to extend css classes to your own classes via #extend.
This is a handy Sass + Compass video
Then after you can do this
This way, you don't have to depend on javascript to add classes. It's all done through css.
Hope this helps!
You could also use a preprocessor like LESS to achieve this. You would have to save your ui.css as ui.less and then you could do something like this:
#import url(ui.less);
input {
.ui-corner-all;
}
After compilation of your less to css, it would take all the styles of the ui-corners-all class and apply them to your inputs. And that is just one of the many advantages of using a css preprocessor. It is really worth looking into and is not very hard to learn if you are familiar with css. You can find more info here: http://lesscss.org/
I have a table that i want to "highlight" during onmouseover/onmouseout. I already know this is required in IE but not in other browsers.
I have managed to detect the events triggering and this TR tag effectively works. (Note that the originating class "contentTableRow" doesn't seem to be causing any issues.)
class="contentTableRow" onclick="openForm('SomeID');" onmouseover="highlight('someRowID', true);" onmouseout="highlight('someRowID', false);" id="someRowID"
All is fine and dandy, the "highlight" function fires and actually sets the appropriate class.
It's just that IE won't process the CSS class name change.
Here is a snippet of the CSS I am using to make the change.
.HighlightOn {
cursor:pointer;
background-color: #D1DFFF;
}
.HighlightOff {
background-color: #E1EEFE;
}
I can see that the Class names are getting updated when I debug it, and also check it in Firebug. But it seems that IE doesn't like this usage of classes with a TR tag.. Is it the way I am structuring the class for Tables ? Any advice ?
Are you changing class instead of className? class is reserved in Javascript as the actual class declaration keyword, so the property is called className:
function highlight(id, b) {
document.getElementById(id).className = (b ? "HighlightOn" : "HighlightOff");
}
Incidentally, you might just want to pass "this" to highlight instead of the id, so it doesn't need to do the document.getElementById() call
Thanks for all the pointers. But this seems to have worked.
TR.HighlightOn td {
cursor:pointer;
background-color: #D1DFFF;
}
TR.HighlightOff td {
cursor:pointer;
background-color: #E1EEFE;
}
Basically have to be explicit in this case about where the class is used in the HTML.
Note that I had to reference the TR tag and the TD tags relative to where I am using the Highlighton/off classes in the table. Thanks jensgram.
Hope this helps anyone else with the same problem.
(thanks Jensgram for the lead)
IE won't recognize "class" in JavaScript. You must use "className" as the property in IE.