I use Primefaces for my JSF app. In one page I have to use <h:inputFile> instead of the <p:fileUpload> equivalent. As a result, it renders without the Primeface style:
How can I apply the Primeface css style to <h:inputFile>? (to make it look like a Primefaces button for instance)
Have a look at how the basic p:fileUpload is rendered. Copy the outputted HTML for the component and you are almost there.
You will notice that the actual input type="file" has an attribute tabindex="-1", which you need add to your component. You should use a passthrough attribute to do so. See: Custom HTML tag attributes are not rendered by JSF. So, add this namespace: xmlns:a="http://java.sun.com/jsf/passthrough".
Another thing you need to take care of, is loading the stylesheets PrimeFaces is using to style the upload component. To do so, add:
<h:outputStylesheet name="components.css" library="primefaces"/>
<h:outputStylesheet name="fileupload/fileupload.css" library="primefaces"/>
Note that you can leave out components.css if you are using other PrimeFaces components on your page.
In the end, your upload component will look like:
<span class="ui-fileupload-simple ui-widget">
<span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-icon ui-c ui-icon-plusthick"></span>
<span class="ui-button-text ui-c">Choose</span>
<h:inputFile a:tabindex="-1"/>
</span>
</span>
Please note that you will be missing interactivity which is added to the PrimeFaces component by its JavaScript! My advice, just use p:fileUpload.
Related
I use ngbootstrap for popovers, but I want to override all the default styles it comes with. I have a form that should be displayed as a popover on a button click which has its own styles.
When I use [ngbPopover] it renders an element with the default class of 'popover' applied, instead of overriding each of its properties to align with my expectation, is it possible to remove it all together while rendering on the page and then I could use a custom class with popoverClass property.
<ng-template #popContent><user-form></user-form></ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent">
I've got markup and bindings in my popover!
</button>
Looking into the popover source code I see lots of classes nailed without a chance to change them. I suppose the only promising approach would be exclude the css for the popover component from the import.
How to do it depends on how you import the Bootstrap css
Tell me how to add href to a link via CSS. How to do it in the standard way is clear.
<div>
Button
</div>
But I need pure HTML. And in CSS, specify which address to make the transition to.
<div>
<a class="button-click"></a>
</div>
.button-click a {href:"https://example.com"}
How do I specify a path in CSS?
CSS cannot be used to perform action or make changes to DOM. Its used for presentation purpose.
You can use script to do the manipulation not css.
I'm about to start a new project using Aurelia and I'm considering to use it in conjunction with CSS BEM methodology.
First question: Is this basically considered a good match or are there any alternatives which "fit" better with Aurelia?
Main question:
Best explained with an example for some custom Aurelia view (an app header):
<template>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</div>
</template>
When embedded into another view, this leads to a resulting DOM like this (simplified):
<app-header>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu>
<!-- ... -->
</app-menu>
</div>
</app-header>
Obviously, the wrapper div with the AppHeader class is kind of superfluous since there's also the app-header tag. Unfortunately it doesn't seem to be possible to assign the CSS class AppHeader (which is needed for BEM) to the base element of the view (the template tag in the view file).
Are there any alternative ways that I'm not aware of or is it considered "good" practice (or at least acceptable) to have many wrapper elements inside views which somehow bloat the DOM?
I just realized, that putting custom classes on the custom elements themselves (the template) actually works, so I can simply write something like this:
<template class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</template>
Edit / Additional info
This won't work if the view is a "base view" of a route since the template element won't be rendered at all in this scenario but is replaced by the router-view element.
I believe that even a hundred extra DOM nodes is not a problem for contemporary browsers but if it's really important to avoid them you may try custom tags instead of classes (see list of restrictions here https://en.bem.info/methodology/faq/#why-are-custom-tags-not-used-for-blocks-in-bem).
Perhaps the #containerless will solve your problems:
In your view model:
#containerless
export class AppHeader {
...
}
In this way, the <app-header> container will not be rendered.
If your component is a view-only component, you can declare containerless in the <template> tag:
<template containerless>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</div>
</template>
I am adding bootstrap.css to design some elements of a certain div without messing with the rest of the elements.
Example:
...code here...
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
</div>
...some more code here...
Importing bootstrap.css:
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
But when I run my code, the bootstrap.css messes with the rest of the elements. How can I import bootstrap.css that it will only apply on btn-group class?
You need to customize Bootstrap before downloading to include the required parts only
go to http://getbootstrap.com/customize/
click "Toggle all" to uncheck all components check required components only e.g. 'Buttons'
go all the way down and click 'Compile and download'
I am using JSF 2.0
I am able to add Background image to the JSF button but am not able to add icon to the button.
My Requirement is:- JSF button with Background image and a Icon
Following code am using to add background.
<!-- Discard button-->
<h:commandButton action="discard" style="background-image: url('..\\Images\\leftMenuActiveBg.png');width: 150px;height: 30px;color: white;border-color: white;font-size: 15px; " value="#{message.discard}">
<rich:componentControl target="popup" operation="show" />
</h:commandButton>
Can somebody help me in adding a icon to the button too please.
I am updating a image for better Explainanation as what I want to achieve and I what I have achieved till now with above code.
So you want a button with two background images? That's not possible on a single HTML element. The <h:commandButton> generates an single HTML <input type="submit"> element, while you basically need a <button type="submit" class="background"><span class="icon"> instead. You'd need to create a custom component which generates exactly that HTML, or to adopt a 3rd party component librarty which has such a component in its set, such as PrimeFaces. See also the <p:commandButton> showcase.