Can anyone have any idea how to make title text of groupbutton not above the icons but under in ExtJS? I was trying to do bbar to the groupbutton but the default td align is to left and I don't know how to change it by css? Thanks for any response.
You can achieve the effect by adding the following CSS to the button:
height: 64px;
background-position: top center;
padding-left: 0px
I this case, I have set the height of the button to be 64px. The will definitely distort the tool bar if you have a combination of default buttons and buttons with the above CSS.
Related
Antd buttons have a weird behavior where the text and border becomes blue ... even when I set the :focus and :hover to color: 'black'.
Is there any way to have hover events none similar to pointer-events: none ?
When I inspect element, it shows ant-click-animating-without-extra-node="false" when focused.
There is a by default class applied in Antd button (ant-btn) simply you need to give className to your button and style in global CSS
.adjust_button_hover_drawer.ant-btn:hover { border-color: white !important; }
I want to add an image inside the doughnut
you can see my doughnut here
I already tried by using background-image:url(image.png) but is there any way to do it.
Technically, it's not possible to add images in Charts.
However, you can easily work with that by adding an image as a background for chart container. I.e.:
#chartdiv {
width: 210px;
height: 210px;
margin: 0 auto;
background: transparent url(YourImage) no-repeat center 70px;
}
I am trying to customize the grid menu for angular ui grid
By default the menu icon appears in the top right corner of the table. But i want to show it on the top left corner of the table. How can i configure this?
Also I want to change the default icon to a customized one.
This is not something supported by the API, so you will have to do it by changing some of the CSS:
.ui-grid-menu-button {
left: -21px;
width: 20px;
}
.ui-grid-menu-button .ui-grid-menu{
left: -11px;
top: 27px;
}
To change the icon you will have to edit:
.ui-grid-icon-menu:before {
content:'\c363';
}
to whatever you want.
Having tried just about everything Im at a loss how to change the color of splitter bars using SASS for Ext JS 4.2.2 - they always appear as a white bar.
Say I have a hbox or vbox layout with two flex items and a splitter, the bar created by the splitter to allow the components to be resized proportionately to one another is always white- is there anyway this can be changed through a SASS config?
Many thanks!
/resources/themes/stylesheets/ext4/default/util/_splitter.scss indicates that it doesn't use a variable
#mixin extjs-splitter {
.#{$prefix}splitter {
.#{$prefix}collapse-el {
position: absolute;
cursor: pointer;
background-color: transparent;
background-repeat: no-repeat !important;
}
}
}
You'll have to override it in CSS, or create your own theme.
CSS
.x-splitter-vertical {
background-color: #abc;
}
I have application where i need to hide the default dot indicator on the carousel control, and instead for default indicator i have to replace it with customized images?
To hide the default dot indicator in Ext.carousel.Carousel component, use this,
indicator: false
I guess you can inspect the CSS for the indicator object.
For instance, go to the Kitchen Sink > User Interface > Carousel and inspect one of the dots :
.x-carousel-indicator span {
display: block;
width: .5em;
height: .5em;
-webkit-border-radius: .25em;
border-radius: .25em;
margin: .2em;
}
Then, you just need to override that CSS class