"ngx-bootstrap" Accordion border needs to be rounded - ngx-bootstrap-accordion

How to set "ngx-bootstrap" accordion panel rounded borders?
I tried to add bootstrap rounded class but it didn't work.
Do i need to create separate class?

Related

Scroll issue on display grid in flex container

I noticed a scroll issue when a display grid element is child of a flex one.
Here an example to explain the problem
As you can see in this screenshot, the scroll bar is at its maximum top position but the some of the grid content are hidden and there's no way to scroll them into view.
I have to use a flex box because my goal is to keep the grid centered horizontally and vertically
Any idea to solve?

Center div is not centered in Owl Carousel when the center div is enlarged

I have used this solution to enlarge a div in the center of the owl carousel:
How do I add classes to items in Owl Carousel 2?
However if I set the width of the 'big' class , it stretches right and does not center in the carousel.
Setting the height is fine, but setting the width causes me heartache. Any suggestions would be much appreciated.
PS: Ive also tried transform:scale(1.3) on the big class, but I ended up getting an overlap. I then tried setting the margins on the big class (left and right), but this created unequal lengths to the 'item' class.
How do I add classes to items in Owl Carousel 2?

bxslider - custom controls outside the slider

Iam new to css and html5.
I`m using bxslider and would like to have controls (arrow nav) outside the slider div. I made it according to http://bxslider.com/examples/custom-next-prev-selectors but I do not like it.
How to replace "onward" with an arrow image (jpg)?
How can I move my arrow image to the edge of the slider? I don't want it in the center but aside the slider.
http://www.pulik.edl.pl/WWWMG/foto.html
Why you don't use the controls of the own bxslider and change its css?
Then with left/right you can work around to make the controls to be on the edge of the slider.
Else, if you really want to use the custom controls, make a container around the controls and the slider. Then you can easily do the trick, if the container was made properly.
To move the direction controls outside of the content, you'll need to override the bxslider css in your own css file:
.bx-prev {
margin-left: -70px;
}
.bx-next {
margin-right: -70px;
}
This might cause a further issue where the controls are outside ALL of your content and not even visible. In that case you should wrap the whole slider control inside another div that has left and right padding.

How to get div X and Y (top left and bot right) , inside an image

Here is what exactly I am trying to do.
I have an image with square elements inside it. When i click on top left and bottom right corners of those elements they are surrounded with divs with border. I then have functions to drag and resize those divs(once they are created by two clicks). I want to be able to record the resized coordinates of those divs in text boxes. For example if the image is with height=700 and width=500. Then if i create a square div inside it with coordinates top left(x=190,y=150) and bottom right(x=290,y=250). Then if i drag this div around the image i want those coordinates to change accordingly. Same thing to happen if i resize it.
Here i have added the code in a web site. laughter.free.bg/imagemapping/Img1.html What you need to do is click on top left and bottom right corners of one of the snack packs. Then you`ll see a box on the right with the coordinates of this Green bordered div. I want those coordinates to change when i drag or resize this div. You can see the code in the source of the page.
Thanks a lot in advance.
It is possible to bind functions to the resize event through jQuery.
For example, ur kiroid has a class of ui-resizable. You could use something like:
$('.ui-resizable').resize(function() {
// refresh your coords here from $('kiroid').css maby?
})

changing the color of the button in selectfield/datepicker/timepicker in Sencha

Is it possible to change the color of the button (the little triangle button) shown in the right side of selectfield/datepicker/timepicker?
those little triangles are constructed using images as background so you need to change those images to change color of those triangles
for datepicker image is "resources/themes/images/default/form/date-trigger.gif" in css class .x-form-date-trigger
for timepicker/selectfield image is "resources/themes/images/default/form/trigger.gif" in css class .x-form-trigger

Resources