Is there any config option to put the lavel on top with center align for a textfield.
{
xtype:'numberfield',
labelAlign:'top',
labelSeparator:'',
fieldLabel: 'Title',
flex:1
}
Its working fine with label on top but aligned to left. I want to be centeraligned with top.
Thanks for your help in advance!!!
Just add a class to the label using labelClsExtra:
An optional string of one or more additional CSS classes to add to the
label element. Defaults to empty.
For example:
labelClsExtra: 'your-class'
And in your style sheet:
.your-class {
text-align: center
}
Working example: http://jsfiddle.net/qazN3/
Related
I have a react bootstrap tooltip that works well unless I'm close to the edges of the window. In that case I want the tooltip not to be cut off but resized to accomadate the full text and have borders on all sides.
I also want the tooltip arrow to point just above the trigger element (in my case the 'i' icon).
My guess is that this requires working with the DOM once the ReactBootstrap.Tooltip has been rendered. I need to be able to calculate it's current size and window top and left offset positions and then re-position/re-size it.
Here's my current code (in CoffeeScript):
define [
'jquery',
'es6-shim',
'react',
'react-bootstrap'
], ($, _shim, React, ReactBootstrap) ->
{div, i, h2} = React.DOM
ToolTipHint = React.createFactory(
React.createClass
render: ->
tooltip = ReactBootstrap.Tooltip className: 'hint-content',
h2 className: 'hint-title', #props.fieldName
div className: 'hint-text', #props.tooltip
ReactBootstrap.OverlayTrigger(
trigger: ['hover']
placement: 'top'
overlay: tooltip
delayShow: 300
deplayHide: 150,
div className: 'hint-icon-container',
i className: 'gg-icon-tooltip hint-icon'
)
)
And here's the screenshot of the problem:
How can I fix this problem?
I had this very same problem when my trigger was close to the right side of the window. I fixed it by overwriting the max-width of the .popover class to:
.popover{
max-width: none;
}
and defining a width to the element inside the popover.
The tooltip has a "container" (just like the original bootstrap component that you can set). By default it is the body.
Try to play a bit with this option. I can't tell from what you provided what value you should use.
I'm using ExtJS 5 and am having some issues with tooltip positioning. Specifically, when I have a button in the bottom right corner of the page, the tooltip covers the entire button itself.
I've tried using the anchorTo property but it doesn't seem to affect anything. Trying to figure out how I can position the tooltip above the button instead of right on top of it. I'm sure there's an easy solution - any help would be greatly appreciated. Thanks.
See fiddle here: https://fiddle.sencha.com/#fiddle/j94
You can try by adding this attribute -
tooltipType: 'title'
here..
bbar: {
items: ['->', {
text: 'My Button',
tooltip: 'tooltip positioned on top of button',
tooltipType: 'title'
}]
}
Here's what it says in the doc - http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.button.Button-cfg-tooltipType
qtip will work if you've more space below the button, in your fiddle there is no space available to draw your qtip over the button. You can check it by changing the layout to form -
layout: 'form'
or by adding padding as
padding: '20 20 20 20',
to your fit layout
I was able to get it to work by inspecting the inner workings for the tooltip mechanism and adding a 'mouseOffset' array:
tooltip: {
text: 'tooltip positioned on top of button',
mouseOffset: [0,-60]
}
How can I set the width of a ComboBox input field? I tried to set the width and it does not work. I could not find any CSS variable for width though there is one for height ($form-field-height).
I have also tried to set width in fieldStyle.
fieldStyle: {
width: '100px'
}
I am able to change the height though. The following works.
fieldStyle: {
height: '60px'
}
code4jhon answered it, I just want to add some notes: Is your combobox is inside a parent container with a auto-fixed layout type: like hbox, vbox,...? You can't change width and height because it's controlled by its parent layout.
Width does work, you can play with this code to watch it:
https://fiddle.sencha.com/#fiddle/1g3
Best regards.
Can you try this using !important in css,
fieldStyle: {
width: 100px!important;
}
In ExtJS 4, I am attempting to create a vertically-oriented ButtonGroup with one button to start:
new Ext.ButtonGroup({
columns: 1,
region: "west",
collapsible: false,
defaults: {
scale: "large",
iconAlign: "top"
},
items: [{
text: "Your Books",
iconCls: "icon-books"
} ]
})
The CSS rule just specifies the background image:
.icon-books {
background-image: url(/images/book_open.png) !important;
}
However, the image is flush left, as is illustrated below:
I'm quite the n00b with ExtJS, so I'm sure there's something obvious that I am missing. I would have expected iconAlign: "top" to align the image centered horizontally in addition to flush-top, but that's not what seems to happen. I am seeing the same effects on Firefox 6.0.2 and Chrome 13.0.
What config option or CSS rule am I missing?
Thanks!
UPDATE: here is a sample project demonstrating the issue.
I think there is a problem with the image itself, or some other css class is causing this problem. Ext Js automatically centers the icon when iconAlign : 'top' is set. Here's the what's written in the css:
.x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
background-position: center 0;
background-repeat: no-repeat;
padding-top:18px;
}
When I tried this myself, I had no problems at all.
As you can see, the icon is aligned perfectly. Please check if some other css is interfering with the icon class defined by Ext
For ExtJS 4.0, the following works for me: I have to override the default width of 16px as set by the x-... classes.
In my button I add my own custom class (note the 'star' class simply loads the background image).
iconCls: 'star backcenter'
And then set it to be centered, with the width:auto to override the 16px. Magically it works for me.
.backcenter {
background-position:center !important;
width: auto !important;
}
iconAllign: top from extjs just sets the icon to be above the text, not centered. To make the item centered, you have to deal with the css...
.icon-books {
background-image: url(/images/book_open.png) !important;
background-position:center;
}
I think this should do it ...
I improve this issue by adding a css property (style:{paddingLeft:'10px'}) to button.
text:'<b>Cancel</b>',
name:'btCancel',
iconCls:'btCancel',
width:89,
height:37,
style:{paddingLeft:'10px'}
(This is not a question per se, I'm documenting a solution I found using Ext JS 3.1.0. But, feel free to answer if you know of a better solution!)
The Column config for an Ext JS Grid object does not have a native way to allow word-wrapped text, but there is a css property to override the inline CSS of the TD elements created by the grid.
Unfortunately, the TD elements contain a DIV element wrapping the content, and that DIV is set to white-space:nowrap by Ext JS's stylesheet, so overriding the TD CSS does no good.
I added the following to my main CSS file, a simple fix that appears to not break any grid functionality, but allows any white-space setting I apply to the TD to pass through to the DIV.
.x-grid3-cell {
/* TD is defaulted to word-wrap. Turn it off so
it can be turned on for specific columns. */
white-space:nowrap;
}
.x-grid3-cell-inner {
/* Inherit DIV's white-space from TD parent, since
DIV's inline style is not accessible in the column
definition. */
white-space:inherit;
}
YMMV, but it works for me, wanted to get it out there as a solution since I couldn't find a working solution by searching the Interwebs.
If you only want to apply the wrapping to one column, you can add a custom renderer.
Here is the function to add:
function columnWrap(val){
return '<div style="white-space:normal !important;">'+ val +'</div>';
}
Then add the renderer: columnWrap to each column you want to wrap
new Ext.grid.GridPanel({
[...],
columns:[{
id: 'someID',
header: "someHeader",
dataIndex: 'someID',
hidden: false,
sortable: true,
renderer: columnWrap
}]
Not a "better solution", but a similar one. I recently needed to allow ALL cells in every grid to wrap. I used a similar CSS-based fix (this was for Ext JS 2.2.1):
.x-grid3-cell-inner, .x-grid3-hd-inner {
white-space: normal; /* changed from nowrap */
}
I didn't bother with setting a style on the td, I just went right for the cell class.
If you only want to wrap text in certain columns and are using ExtJS 4, you can specify a CSS class for the cells in a column:
{
text: 'My Column',
dataIndex: 'data',
tdCls: 'wrap'
}
And in your CSS file:
.wrap .x-grid-cell-inner {
white-space: normal;
}
Other solution is that:
columns : [
{
header: 'Header',
dataIndex : 'text',
renderer: function(value, metaData, record, rowIndex, colIndex, view) {
metaData.style = "white-space: normal;";
return value;
}
}
]
The best way to do is by setting the cellWrap to true as below.
cellWrap: true
Its working well in EXTJS 5.0.
use
cellWrap: true
If you still want to use css always try to work with ui's, variables, etc. within themes, or set the style with the style property.