I want to use jQuery ui-icon-close instead of ui-icon-cancel. So I go to the fileupload.js file in the primefaces jar (3.3.1), change the reference to ui-icon-cancel to ui-icon-close (line#2082, upload template). But it doesn't work. Any idea? Thanks.
I found an easier way to solve this problem:
I added an id to my fileupload control:
<p:fileUpload id="related_file" ..../>
Then in my css, I add the following lines:
div[id*=related_file] .ui-icon-cancel{
background-position: -96px -128px !important;
}
This works and the cancel button ends up using the ui-icon-closeThick icon.
But I would still like to know why my original approach didn't work if anybody knows the answer. Thanks.
Related
i'm trying to remove the light gray line that's next to the darker gray line:
After searching the rechart library through and through i decided to try and hide it with a css file.
this is the code :
.recharts-layer.recharts-cartesian-axis-tick line{
display: hidden;
}
I've also tried :
.recharts-cartesian-axis-tick-line{
display:hidden !important;
}
and still doesn't work.
it's important to note that the css file is linked and when trying to style something else it works.
this is what i see when i inspect and pick the element in the dev tools :
any help will be appreciated!
What you need to do is remove the tickLine from YAxis.
Something like that:
<LineChart>
...
<YAxis tickLine={false} />
...
</LineChart>
You can check more about it in docs API.
I'm using JavaEE with Maven and Primefaces and i want to hide (HTML hidden) a menuitem in Primfaces tabMenu.
Something like the answer in this (prior) question would be good:
.ui-tabmenuitem: {
visibility: hidden !important;
}
Just another small hint:
Adding a style class doesn't work, adding a containerStyle is not supported: See primefaces github page
Your code works for hiding them if I remove the invalid ":"
.ui-tabmenuitem {
visibility: hidden !important;
}
Tested on PF 6.0 and 5.3.
If you want to do it dynamically you can conditionally add a styleClass to the relevant menuitem's;
<p:menuitem styleClass="#{bean.something ? 'ui-tabmenuitem-hidden' : ''}" value="Social">
and hide it with some script:
<script>
$('.ui-tabmenuitem-hidden').parent().css('visibility', 'hidden'); // or toggle()
</script>
Getting the parent is not possible with pure css, that's why the script is needed (as far as I can see..). Use the inspector i Firebug or similar to figure out what's needed.
Either just put the script in the page for running at load time, or put it in an onclick-listener on a button (or somewhere else).
I can't get a custom icon to my commandButton as explained in lots of other questions.
Folderstructure:
web/resources/icons/plus.png
web/resources/css/style.css
style.css:
.ui-icon-myAdd{
background-image: url("#{resource['icons/plus.png']}") !important;
}
header:
<h:head>
...
<h:outputStylesheet name="css/style.css"/>
</h:head>
button:
<p:commandButton value="..." icon="ui-icon-myAdd"/>
If I use styleClass instead of icon, my button's background is set to the image I'm trying to use as icon (which should be correct). So i guess there is no problem with the pathing.
Still the icon of my button is empty using the icon-tag.
Where am I wrong? What am I missing?
I've tried everything I found so far. Might be something pretty basic as I just started with JSF and primefaces.
I use:
PrimeFaces-5.2
Mojaara-2.2.1
IntelliJ IDEA 2016.2
Tomcat 9.0.0.M8
I have a custom directive that I use to manage user access through my website. I use this to add a 'disabled="disabled"' attribute to html tags.
However, when I try to use this with tag-input, it doesn't work. I'm guess this is down to that fact that ngTagsInput uses it's own directive for tags-input.
I have read the documentation and cannot find a solution to what I am looking for.
Here is my code:
Html:
<div access-level="Admin">
<tags-input ng-model="tags" on-tag-added="addNewTag($tag)" on-tag-removed="removeTag($tag)">
<auto-complete source="loadTags($query)" min-length="0"></auto-complete>
</tags-input>
</div>
Is there any work around for this?
Thanks.
It's currently unsupported, but looks like will be in the next major version (2.3.0):
https://github.com/mbenford/ngTagsInput/issues/102
Edit:
2.3.0 is out; see following link for details https://github.com/mbenford/ngTagsInput/blob/master/CHANGELOG.md#features
I could not find this option in the release 2.3.0, but at least they have enabled the regular disabled attribute.
What I have done to hide the remove button and the "Add a tag" input box, was to add a couple of rules in the CSS.
tags-input[disabled] .remove-button {
display: none;
}
tags-input[disabled] input.input {
display: none;
}
Probably there is a better way to do it, this was the fastest I could find.
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
I tried to change the HTML form, input type file. Here is my code:
HTML, form id = form
<input class="upload_file" type="file" id="file" name="file" />
.CSS
I tried both:
.upload_button{
background: url('../images/upload_btn_bg.png') no-repeat;
width: 200px;
height: 40px;
}
#form input[type=file]{
background: url('../images/upload_btn_bg.png') no-repeat;
width: 200px;
height: 40px;
}
None of both of those methods works. I did see from some website, like facebook, youtube, google or twitter, they have different style. Wonder how they do it.
You can't do anything with input type file (other than huge hacks). I know this sounds horrible, but the web standards still haven't come up with a solution for that.
What I would suggest though, is that you used something more flexible, such as swfUpload, which let's you change stiles, and also check for file size prior to uploading.
Some neat examples of it can be found here
Hope this helps you
For example, try this variant http://www.quirksmode.org/dom/inputfile.html
Best hack ever. Input file HTML:
<input type="file" class="hide" id='inputFile' />
Browse File
using jQuery:
$('#triggerFile').on('click', function(e){
e.preventDefault()
$("#inputFile").trigger('click')
});
Why don't you just put the css to display: none and then trigger this button with another button? This can be easily done with javascript and then you can style the button yourself completely
Here's an example of how to trigger a button with another, but this is just one of many ways:
One button firing another buttons click event
You can change the font-Size for height or follow this url http://www.quirksmode.org/dom/inputfile.html ( which is basically what I do in my projects ).
Actually you can!
You have to do it with the SI.Files Library.
Here is a good article about how its done in details:
Good Luck!
Bhee,
just add CSS definitions to your html input tag:
like:
<select style:"...whatYoureadBelow..."></select>
or
<input style:"...whatYoureadBelow..." />
CSS definitions:
border:none;
background-image:url('somePathToImage');
background-repeat:no-repeat;
//those things below adjust according to your background image size
width:XXpx;
height:XXpx;
Thus you'll get what you have on facebook or elsewhere ;)