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)?
Related
i have a column with mgt-person component on hover i am able to view the person card in the fluent ui detailslist the problem is that the person card is visible only half,
how do we pop it out ?
when i inspect in browser and added css
ex margin-Bottom:100% for the class person-details-container
poped out personcard
it popout like this, but when i add css in the files like this margin-bottom is not working but background color is working
mgt-person {
--person-card-background-color: pink;
--person-card-margin-bottom:100%; --- this doesnt work
}
I am using font-awesome version 4.7.0 with Angular 5. When I add an icon to a screen the icon immediately changes from tag to and I cannot access its class from an Angular component which is what I want to do.
The resulting behavior is that the first icon defined is shown properly but any subsequent changes I make that should be reflected on the UI with a change of the font awesome icon are not shown at all.
The specific problem is that I wan the icons to change when sorting a table. The initial icon is set up to be fa-sort, and it displays correctly, but when clicking on the table header, the content gets sorted and updated but the icons dont change to fa-sort-up or fa-sort-down. I've tested the logic and it works properly.
The current HTML code which should be performing this action looks like this:
<i [ngClass]="sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 'icon-sort-down'"></i>
This is because fontawesome replaces your tag with . To change icons use this template (use in class that you need):
<span *ngIf="sortAsc"><i class="icon-sort-up"></i></span>
<span *ngIf="!sortAsc"><i class="icon-sort-down"></i></span>
Try maybe assigning the icon within the component code itself, such as:
in Component
getIcon(){
sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' :
'icon-sort-down'
}
I think it has to do with change detection, or you can manually trigger it after you sort, by importing change detection.
ex:
`constructor(cd: ChangeDetectorRef) {}`
and then in your code,
this.cd.detectChanges();
I'm working on a site that was built using ASP.NET MVC and Kendo UI. I'm trying to add a custom icon to a button that is displayed within the Kendo UI grid but I'm stuck.
Here's the code in the grid to set up the button:
command.Custom("copy")
.Text(" ")
.Click("copyNAddEvent")
.HtmlAttributes(new { #class = "copy", title = "Copy this event" });
Here's the CSS for that button:
.k-grid .k-button.copy{
min-width: 40px;
}
And here's the class in the FontAwesome CSS (which is included in the project) that I need:
fa fa-files-o
I'm not great with CSS, and it looks like when you use the Kendo classes, it creates a span with their icon in it. I like the FA icon better anyway, hoping someone can point me in the right direction.
Looks like you are using the MVC wrappers. In that case, what I do is use a column template.
The client template contains the relevant code - an anchor tag with bootstrap buttons and an <i/> for the fontawesome icon. I could add text like "Edit" to the right of this if desired.
Note that this is an edit button on a kendo grid so I include the class k-grid-edit on the anchor so that kendo will perform the edit action. There are other classes for the standard grid actions like k-grid-add, k-grid-delete, k-grid-excel, etc. For something custom you can use your own selector or add onclick to the anchor and remove the unneeded k-grid-edit.
.Columns(column =>
{
column.Template(t => { }).Title("Edit").Width(10)
.HtmlAttributes(new { style = "text-align: center;" })
.HeaderHtmlAttributes(new { style = "text-align:center;", title = "Edit" })
.ClientTemplate(#"<a class='btn btn-info btn-xs k-grid-edit' title='Edit this item.'><i class='fa fa-edit'></i></a>");
With this technique you will not see the Kendo default icons - just the fa.
You can set it by using the font awesome unicode provided for that icon and putting it in the after psuedo element, just like how font awesome puts their icons on elements. You can find the unicode when looking at the icon details. Here is the fa-files-o one: http://fontawesome.io/icon/files-o/
.k-grid .k-button.copy:after {
content: '\f0c5'
font-family: FontAwesome;
}
I agree with the answer above, just be sure you have the font awesome css file included in your markup.
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).
Introduce the Problem
I would like to profoundly modify the layout of the Orchard CMS Tags list.
Here is an example page with Shape Tracing enabled.
The only alternate that it suggests for the List shape is ~/Themes/TheThemeMachine/Views/List.cshtml, because the page is rendering the default List shape. I would like to have other alternates that are specific to the page.
After reading Orchard list customization, I have been able to implement the default List.cshtml in razor. What I would like to do, though, is to add another alternate, such as ~/Themes/TheThemeMachine/Views/Parts.Tags.List.cshtml instead of implementing the default List.cshtml template.
The problem seems to be that the page is rendering the generic List shape.
In contrast, the blog post list page is rendering a Parts_Blogs_BlogPost_List shape, which means that a ~/Themes/TheThemeMachine/Views/Parts.Blogs.BlogPost.List.cshtml is available.
Search and Research
All quotes below are from the Orchard list customization blog post, which explains how to add a list item alternate (whereas I would like to add a list alternate).
What we really want is an alternate template... aptly called Shape
Alternates... [so] enable Shape Tracing... and select a post in the list...
[you will see that] we already have some possible alternates.
My example page also has some possible alternates for the List Content. Cool.
we need to somehow get into list rendering... [t]he default is defined
in code... [which] can be override by a new [cshtml] template in our
theme.
Okay. That makes sense. We can override the list rendering.
As Shape Tracing can show, we can override the list rendering for a
blog by creating a Parts.Blog.BlogPost.List.cshtml template.
This works for alog but not for the blog Tag page (example page). You see, the blog displays a **Parts_Blogs_BlogPost_List shape and suggests an appropriate alternate but the blog tags page displays the default List shape with no alternates other than List.cshtml.
Blog Page with alternates galore
Blog Tags Page with one alternate List.cshtml
So, I created a List.cshtml not a Parts.Blog.BlogPost.List.cshtml template, and save it in my theme's Views directory. (One problem here is that, once we get it working, we will b overriding the default List rendering.)
Then I add the Razor code (copy and pasted from Bertrand's post) to override the default rendering for Lists. When I refresh the site, the browser renders a blank page. It isn't working. Here's the code:
This Does NOT Work in List.cshtml
#using Orchard.DisplayManagement.Shapes;
#{
var list = Model.ContentItems;
var items = list.Items;
var count = items.Count;
var listTag = Tag(list, "ul");
listTag.AddCssClass("content-items");
listTag.AddCssClass("blog-posts");
var index = 0;
}
#listTag.StartElement
#foreach (var item in items) {
var itemTag = Tag(item, "li");
if (index == 0) {
itemTag.AddCssClass("first");
}
else if (index == count - 1) {
itemTag.AddCssClass("last");
}
#itemTag.StartElement
#Display(item)
#itemTag.EndElement
++index;
}
#listTag.EndElement
As a trouble shooting step, I replace the List.cshtml with <p>Hello world.</p>. Orchard renders the markup as expected. So, something is incompatible between the Razor code from Bertrand's blog and the Tags List.
To find out what exactly is incompatible, I try Betrand's code one line at time to see where it breaks (yup, VS would be better than WM here). At each change, I restart WebMatrix and view the results. This is the minimal code that breaks it.
The Culprit
#using Orchard.DisplayManagement.Shapes;
#{
var list = Model.ContentItems;
var items = list.Items;
}
list.Items isn't appropriate here. So I comment it out again and run the <p>Hello World</p> version again. Also, Shape Tracing reveals that on my Tags/tagname page, the Content Zone is now rendering the List twice. Is that normal?
As another step, I replace Model.ContentItems just with Model. It works. It seems that, to override the List.cshtml template, we cannot use the ContentItems property of Model. Here is the new, working code:
This Does Work in List.cshtml
#using Orchard.DisplayManagement.Shapes;
#{
//var list = Model.ContentItems;
//var items = list.Items;
var items = Model.Items;
var count = items.Count;
//var listTag = Tag(list, "ul");
var listTag = Tag(Model, "ul");
listTag.AddCssClass("content-items");
listTag.AddCssClass("blog-posts");
var index = 0;
}
#listTag.StartElement
#foreach (var item in items) {
var itemTag = Tag(item, "li");
if (index == 0) {
itemTag.AddCssClass("first");
}
else if (index == count - 1) {
itemTag.AddCssClass("last");
}
#itemTag.StartElement
#Display(item)
#itemTag.EndElement
++index;
}
#listTag.EndElement
Onward through the article.
So far so good, we have effectively taken over the rendering of the
list, but the actual HTML [will] be... identical to what we had before
[except for] the implementation.
Okay. I'm following. We want to modify the rendering not just re-implement it.
Alternates are a collection of strings that describe additional shape
names for the current shape... in the Metadata.Alternates property of any shape.
Gotcha. Now, why doesn't the Tags/tagname page show an alternate other than just List.cshtml for the rendering of the List shape?
All we need to do is add to this list [of alternates]... [and make sure] to respect the lifecycle...
Great. Maybe we can we add another alternate for the List shape on the Tags/tagname page. But, doing that is different from what Betrand is explaining. While Betrand's blog post is excellent, it is explaining how to add an alternate for an item, whereas I would like to add an alternate for the list.
The List.cshtml template is where I would add an alternate for a List Item as follows:
ShapeMetadata metadata = item.Metadata;
string alternate = metadata.Type + "_" +
metadata.DisplayType + "__" +
item.ContentItem.ContentType +
"_First";
metadata.OnDisplaying(ctx => {
metadata.Alternates.Add(alternate);
});
So that...
[t]he list of alternates from Shape Tracing now contains a new item.
Where and how, though, would I add an alternate for the List shape? Bertrand has recommended to check out the Shape Table Providers blog post for this. The quotes below are from that post.
But what if you want to change another shape template for specific
pages, for example the main Content shape on the home page?
This looks like a fit, because my example is the main List shape on the tags page. To do this we...
... handle an event that is triggered every time a shape named "Content"
[in our case "List"] is about to be displayed. [It] is implemented in a shape table provider which is where you do all shape related site-wide operations.
Great! Here is my implementation for adding another template for the main List shape.
TheThemeMachine > ListShapeProvider.cs
namespace Themes.TheThemeMachine
{
using Orchard.DisplayManagement.Descriptors;
public class ListShapeProvider : IShapeTableProvider
{
public void Discover(ShapeTableBuilder builder)
{
System.Diagnostics.Debugger.Break(); // break not hit
builder.Describe("List").OnDisplaying(displaying => {
// do stuff to the shape
displaying.ShapeMetadata.Alternates.Add("Tags__List");
});
}
}
}
The above builds and runs but does not hit the breakpoint nor add an alternate for the List shape on the /tags page. So I looked into the Orchard.Azure.MediaServices module and its CloudVideoPlayerShape which implements IShapeTableProvider. Its breakpoint does get hit. How is my code for ListShapeProvider fundamentally different than the code for the CloudVideoPlayerShape?
Also, I installed the Orchard.Themes.CustomLayoutMachine.1.0.nupkg as suggested in Bertrand's blog post. It unfortunately no longer contains an implementation of IShapeTableProvider.
I have also looked at this szmyd post, which does not explain where to put the IShapeTableProvider code.
Further, I installed the Contoso theme from the Orchard Gallery. It works and builds after adding a reference to Microsoft.CSharp. It also includes an implementation of the IShapeTableProvider. Hooray! Comparing its ContentShapeProvider with my ListShapeProvider reveals a subtle but important difference:
Contoso.csproj
<ItemGroup>
<Compile Include="Code\ContentShapeProvider.cs" />
</ItemGroup>
My implementation didn't include the .cs file in the compilation, because my theme has neither a .csproj nor a App_Code folder. So, I recreated my theme with the following code generation:
orchard.exe
feature enable Orchard.CodeGeneration
codegen theme My.FirstTheme /CreateProject:true
theme enable My.FirstTheme
feature enable Orchard.DesignerTools
When adding the ListShapeProvider.cs file, Visual Studio automatically added a ItemGroup/Compile entry for the file, which included the code in compilation. Hooray!
These two posts will help.
Shape Shifting
List Customization
Here are steps of my own minimum solution.
Download and unzip Orchard.Source.1.8.zip.
Open "\Downloads\Orchard.Source.1.8\src\Orchard.sln" in Visual Studio.
Build the solution to create orchard.exe.
Generate a new theme with orchard.exe. Use CreateProject:true because you will need a csproj to include your .cs file.
orchard.exe
setup /SiteName:SITE /AdminUsername:ME /AdminPassword:PWD /DatabaseProvider:SqlCe
feature enable Orchard.CodeGeneration
codegen theme My.FirstTheme /CreateProject:true
theme enable My.FirstTheme
In VS, add a ListShapeProvier.cs file to the root (or any folder) in your theme.
Add the following code to ListShapeProvider.cs.
namespace My.FirstTheme
{
using Orchard.DisplayManagement.Descriptors;
public class ListShapeProvider : IShapeTableProvider
{
public void Discover(ShapeTableBuilder builder)
{
System.Diagnostics.Debugger.Break();
// implementation here
}
}
}
Build the solution.
Run Orchard.Web.
Visual Studio will break at System.Diagnostics.Debugger.Break(). If it doesn't, go to the Orchard Dashboard and make My.FirstTheme the Current Theme.
Now read Shape Shifting to implement public void Discover(ShapeTableBuilder builder).
This post should give you a full response: http://weblogs.asp.net/bleroy/archive/2011/05/23/orchard-list-customization-first-item-template.aspx