I'm using the PrimeFaces picklist component, but the "move" buttons (add, addAll, remove, removeAll) have all been rotated by 90 degrees. They should point left and right, not up and down. They work ok; they just don't look right. Does anyone have any idea why this is happening or how to correct the problem please?
I'm using PrimeFaces 8.0; Java 11; Wildfly 21.0.1.
The theme is nova-light, but it's the same with nova-colored and luna-blue. Using theme omega, the button icons are different, but correctly orientated. If I set showSourceControls=true the sort buttons all corrrectly show up and down. It's just the middle buttons that are pointing the wrong way.
The component is defined as:
<p:pickList value="#{postController.tagPicklist}" var="tag"
rendered="#{postController.mode eq 'Add' or postController.mode eq 'Edit' }"
itemLabel="#{tag.name}" itemValue="#{tag}"
converter="myTagConverter"
>
</p:pickList>
This has been reported to PF and appears to be a problem with the themes CSS.
Issue: https://github.com/primefaces/primefaces/issues/6880
Related
I have an angular project I am developing using angular material for a slide toggle and text fields, and cdk drag and drop for drag and drop functionality. I am pretty new to angular libraries and angular in general.
I have run into an issue where the slide toggle is only toggling the first element inside an *ngFor loop. I have tried adding a let i = index to the ngFor and it is always passed as 0 no matter which toggle you select, however if I place {{ i }}, it will show up as the correct index. I am at a loss.
https://stackblitz.com/edit/angular-yezv9a
If you go to the project at that link, and toggle the test 2 or 3 toggle, it will shift the first 1 and I can not seem to figure out why
Any help is appreciated
If I understand you correctly, There is one issue in your code is mat-slide-toggle element has an id which is repeating in ngFor
<mat-slide-toggle id="toggle" color="primary" (change)="onToggle(button)" [checked]="button.enabled"></mat-slide-toggle>
I removed the id attribute and found working correctly, based on my understanding you can find a fork of working example in below url
https://angular-yezv9a-bac1jz.stackblitz.io/
Make the id attribute as empty
Will work as expected
I'm using Vuetify 0.16 with VueRouter and Vuex and noticing an issue using v-tabs with the v-tabs-slider with v-if vs v-show.
<v-tabs icons grow light centered v-model="activeTab">
<v-toolbar>
...
<v-tabs-bar v-show="showTabs" class="grey lighten-4" slot="extension">
<v-tabs-slider color="primary"></v-tabs-slider>
<v-tabs-item v-for="tab in tabs" :key="tab.name" :id="tab.name" :to="tab.to" class="primary--text" router>
<v-icon>{{tab.icon}}</v-icon>
{{tab.name}}
</v-tabs-item>
</v-tabs-bar>
</v-toolbar>
</v-tabs>
activeTab, showTabs, and tabs are computed variables that reference getters in my vuex store.
With the code above using v-show, everything works well, including the v-tabs-slider; however, when showTabs is false, the space for the tabs (heigh-wise) is still present. I want the toolbar to show no matter what, but I want to control the display of tabs depending on the route and taking up that space is not desirable (especially for mobile).
If I change it to use v-if, the height issue is resolved and everything works except that the v-tabs-slider only works when the v-tabs-bar is initially loaded (when showTabs becomes true). When showTabs becomes false and then becomes true again, the v-tabs-slider no longer displays. The active tab's icon and text highlight correctly, but the v-tabs-slider does not highlight after it is unloaded and reloaded.
<v-tabs icons grow light centered v-model="activeTab">
<v-toolbar>
...
<v-tabs-bar v-if="showTabs" class="grey lighten-4" slot="extension">
<v-tabs-slider color="primary"></v-tabs-slider>
<v-tabs-item v-for="tab in tabs" :key="tab.name" :id="tab.name" :to="tab.to" class="primary--text" router>
<v-icon>{{tab.icon}}</v-icon>
{{tab.name}}
</v-tabs-item>
</v-tabs-bar>
</v-toolbar>
</v-tabs>
I'm not sure if this is a bug or if I'm just not using this correctly...
Does anyone know?
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 problem with menu icons in PrimeFaces : the UI icon seems to be in conflict with the FontAwesome one.
Here is a screenshot:
When I look in my browser's inspector, I can see that four classes are applied to the div: ui-menuitem-icon, ui-icon, fa and fa-terminal.
Removing one or both of ui-menuitem-icon or ui-icon solves the problem. But, I would like to do it without some ugly script.
Here is how the menubar is displayed (please note that this line is in a layout (as a header)) :
<p:menubar model="#{menuGenerator.menu}" style="margin-bottom: 20px"></p:menubar>
My model is generated with the following method :
public MenuModel getMenu(){
MenuModel result = new DefaultMenuModel();
result.addElement(new DefaultMenuItem("SQL", "fa fa-terminal", "/"));
//...
result.generateUniqueIds();
return result;
}
The parameter primefaces.FONT_AWESOME is set to true.
I'm currently using Primefaces 5.0, and Mojarra 2.2.12.
How do I make the menu appear without the conflict between the UI icon and the FontAwesome one (e.g. with only one of the two classes ui-menuitem-icon, ui-icon applied to the div)?
Someone was able to so quickly help me with a problem I'd spent hours and hours on, that I'm hoping I'll get lucky and someone can point me in the right direction on this one, too.
I didn't see anyone else with quite my issue here - and I'm new to working with WP templates instead of plain old HTML/CSS/JS stuff.
Basically - on a site we did (www.opted.org) with a purchased WP theme - I can't get the mobile version collapsible menu to stop defaulting on page load to the last item in the Main Menu.
So instead of something that makes sense - like About ASCO, or even being able to add "Select Page" - the drop down shows "-- past issues"
I don't care how I fix it really, but the client just doesn't want that page to be the default. I tried adding an extra menu item at the end called "Select Page" with an href='#' and using CSS to hide it on screens above 480px - but I couldn't get it to work no matter how I tried to refer to it.
I feel like this should be easy - but I don't know where to set the selected LI among the many WP files.
Thanks!!
I had a look at the plugin.js file on the site www.opted.org.
On line 22, there is 'header' : false // Boolean: Show header instead of the active item
and on line 41 there is jQuery('<option/>').text('Navigation')
Try setting line 22 to true, and text('Navigation') to your 'Select Page' if you prefer that over the text 'Navigation'
Or, according to the tinynav.js page (http://tinynav.viljamis.com/), you can customize that as an option like this:
$("#nav").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});
In your main.js file, your calling it on line 14. You should add that header: 'Navigation', option there.
It's hard to answer this question without knowing how the theme you are using works. However, you can certainly change the selected attribute using javascript.
Here's the code you would use to set it to 'About Asco' using jQuery:
jQuery('.tinynav').val('/about-asco/')
alternatively (a little clearer, but more verbose):
jQuery('.tinynav option:first').prop('selected', true);