How can I change the size of images inside a p-galleria of PrimeNG? - gallery

I have a problem while using a p-galleria of PrimeNG with angular6.
The images inside it are coming with an automatically size and I don't have any idea how to change their size.
Hence I use a panelWidth or panelHeight : it changes the panel but not the images inside it.
Any answer will help my, thanks!

You can do this with "frameWidth" and "frameHeight".
Example:
<p-galleria [images]="images" panelWidth="573" panelHeight="430" [frameWidth]="120" [frameHeight]="80"></p-galleria>
I hope it will be usefull to somebody.

Related

how to fix the styling of component

I'm trying to set the position of this component in the body, the issue is when I minimize the page , it changes as in the right picture.
I hope my question is clear.
use % instead of px while u set the width,height,padding,etc of the element

How to make a img-div relation like Reddit did?

As you can see in image, even image size too high,we only see image size where Reddit let us see. The rest of image only can see by clicking button. There is no squeeze. So how could i do this?
Thank you.
https://i.stack.imgur.com/7Uj0I.png
Perhaps something like this. https://jsfiddle.net/x3gh29vt/1/
You create a container with a set height and width and hide the extra content with overflow: hidden
Then add an eventlistener to the button to toggle the container's overflow value;

Dynamically set background-image-url

In my gwt-application i got a tree with a few images. These images can be copied by drag and drop to a panel. Now i want to make them resizable in this panel. when i test my css-code with a concrete image-path for "background-image", resize:both and background-size:cover works! My problem is, that i cannot set a concrete url to the css, becacuse the imagepath is dynamic.
when i delete background-image from css and set backgroundimage in my code, the surrounding container resizes, but the image not. Is it possible to set 'background-image' to the image that I choose during runtime? how can i solve that with css?
Thank you!!
You can set background image at any time in your code. For example:
myPanel.getElement().getStyle().setBackgroundImage("url(/myImage.jpg)");
To make it resizable, you need to apply the correct CSS to this panel. There are several CSS options for you to consider.

how to adjust the height of two adjacent cell without using dispaly:table-cell

Can any one help this..
I want to adjust the two adjacent cell height using div tag without using the display:table-cell. Please reply as soon as possible..
I don't believe you can do what you're trying to do using simply CSS.
I'd recommend using a jQuery Equal Heights plugin like this one:
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
You simply load jQuery and the plugin onto your page then use it like so:
$('.myCLASSorIDorWHATEVER').equalHeightColumns();
Hope that helps.

How do you change the color of a Telerik GridGroupByExpression arrow?

Does anybody know how to change the color of GridGroupByExpression arrow shown at the link below?
http://demos.telerik.com/aspnet-ajax/grid/examples/groupby/outlookstyle/defaultcs.aspx
I haven't figured out how to change the color from the default black. I'd like to change the several I have in my project to white (in the above demo it's a shade of blue) but I have no clue how to pull this off (the demo doesn't show how to change it), so if anybody knows how I can accomplish this I'd greatly appreciate it. Thank you in advance.
The easiest thing to do would be to just subscribe to the OnColumnCreated event and use the following code-snippet:
if (e.Column is GridGroupSplitterColumn)
{
(e.Column as GridGroupSplitterColumn).ExpandImageUrl = "image.gif";
(e.Column as GridGroupSplitterColumn).CollapseImageUrl = "image.gif";
}
The images that are used for these groups are the "SingleMinus.gif" and "SinglePlus.gif" images that you can find within the local Telerik install folder. They should be found in the Skins/[Skin Name]/Grid/ folder.
#Kswift : we can not change the colour of an image , we have to use the OnColumnCreated event what Carl suggested ,if you want to change the color of an image , you can do it with any photo editor and than use the above method to bind with the grid.

Resources