I am using datatable component from PrimeFaces 3.0.M4 and I use the attribute scrollable = true. I would like to customize the scrollbar with my own style, but I can not find the CSS class.
Can anyone point me out the classes that customize the scrollbar? ( the arrows and the line).
Thank you
Related
In my app I have a deeply nested components structure. I have a component with a very long form which is scrolling vertically. Inside that scrolling block I have components with a 'cog' icon. When you click that icon, a popover should appear next to it (inside the scrolling block).
However, the popover should consider the height of that scrolling block. And depending on the position of the 'cog' icon should appear either to the bottom or to the top of it in order to fit within the scrolling block.
So, to summarise, I somehow need to know the innerHeight of the scrolling block contents and its absolute position (getBoundingClientRect) in order to position my popover properly.
Right now I've done it using the html element id. And then simply find element by id in the popover component constructor:
constructor(#Inject(DOCUMENT) private doc: Document) {
this.scrollingBlock = doc.getElementById('scrollingBlock');
}
And then simply get the properties I need from it. Like the following:
this.scrollingBlockHeight = (this.scrollingBlock.firstChild as HTMLElement).scrollHeight;
this.scrollingBlockRect = this.scrollingBlock.getBoundingClientRect();
Although, everything works now, I believe it's not very elegant/Angular-way solution. I'm using Angular 6 for my app. Is there any better way to achieve the same result?
So I'm starting with angular and I would like filter a list depending on which div is currently selected.
They are selected by being cliked. I suppose this is exactly how radio buttons behave but they are ugly and I would like to have a completely designed div (not just label) which is to be clicked.
I've read that you can add label with for attribute and hide the radio button to have something similar. I suppose what I would like is to be able to add for on a div to bind it.
What would be the best way to achieve this The Angular Way ?
You will find your solution at angular ui bootstrap goto buttons sections
Is there a way to do not use InputText in association with Primefaces Slider component (for attribute) ?
I just want to have only the slide bar.
I can use InputHidden component but is it another convenient way ?
Extending component ?
The problem is that the slider in Primefaces doesn't hold any values.
You could try to extend the component or create the one you want but it seems like a difficult work when you can use the InputHidden. The component translate to a div tag so it doesn't hold any values so, in any case, you'd have to add a field that posts its value with the form (if you create or extend the component).
What is the problem with InputHidden? Why don't you want to use it?
I am new to flex and i am trying to create a title window with no padding whatsoever on the sides. In the adobe documentation http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/TitleWindow.html it says that the title window has a 4px padding. I was wondering if i could get rid of it by overriding the updateDisplayList function and set the padding to 0 (I have been trying this but I cant seem to find the right attribute to set). Basically what i want to do is to have a button on the bottom left corner of the title window and the edge of the button should be 0px from the border of the window.
PS: I only need to do this for title window. There is probably another way of doing it with a Panel or some other component which im not interested in.
The link to the TitleWindow docs has a styles section. It has styles for paddingTop, paddingBottom, paddingLeft, and paddingRight.
CSS styles are set a little differently in Actionscript versus MXML. Since css styles are not properties of the object, you have to use the setStyle() method in Actionscript. You can also use a style sheet.
MXML:
<mx:TitleWindow paddingLeft="0" paddingRight="0" />
Actionscript:
var tw:TitleWindow = new TitleWindow();
tw.setStyle("paddingLeft", 0);
tw.setStyle("paddingRight", 0);
I am using Primefaces barChart in one of my projects where in a small area I need to display a chart that contains multiple data points. When the chart is rendered, the bars become very thin, which is ok for me. However, there are shadows of each of the bars that look confusing on the chart.
Is it possible to disable shadows in Primefaces charts?
The bar chart has a 'shadow' attribute. Setting it to false should make the shadow dissapear.
However, at least in version 3.1.1 I was not able to make the shadow dissapear using this attribute, it seems that it doesn't work. If you have the same issue, add the following style to your css file:
.jqplot-series-shadowCanvas {
display: none;
}
It hides the shadows of bar chart (and probably the shadow of other charts too, I haven't tested it).
I know that it is an old question but for anyone else looking for help here you can do:
BarChartModel barChartModel = new BarChartModel();
barChartModel.setShadow(false);
It work also with linecharts:
LineChartModel result = new LineChartModel();
result.setShadow(false);
and should work with other kinds of charts as well.