In extjs, the is this component toolbar.separator( xtype: tbseparator) which allows you to put a vertical space between toolbar items.
It's just that it shows a pipe-like character or a line to denote that component. I want to remove it. I want there to be empty space. I've played around with the configs but can't figure out how. Can anyone help?
Alternatively, you don't really need to use a spacer. Just specify a component with a width of however wide you want the space to be:
{
xtype: 'component',
width: 30
}
Just put this in your custom css file:
.x-toolbar-separator-horizontal {
border-style: none;
}
Related
With extjs 5, by default, the tab title is aligned to the center.
With extjs 6 I can not get the same result and the titleAlign config does not work.
I tried to solve with tabConfig that although it is not available in the extjs 6 documentation it still works.
Any idea how to solve it?
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2oo3
You can use
style: {
'text-align': 'center'
}
in your tabConfig. Here's the FIDDLE
I think this is a bug. The tab button is represented by the Ext.tab.Tab class.
Represents a single Tab in a Ext.tab.Panel. A Tab is simply a slightly
customized Ext.button.Button, styled to look like a tab.
And like all the buttons it has the textAlign config, the one that you are looking for. It says that by default it has the center value, but it doesn't seem to work. Although left and right values do seem to work.
EDIT
This is a css bug, to apply a global fix just append this rule to the application:
.x-tab-button-center {
text-align: center;
}
Can I have a multi line toolbar?
I need a fixed header for all my pages, but the ons-toolbar have only one line. I need two of it in my header.
It is possible to do that?
Thank you!
You can put an extra <div> with the appearance of a toolbar with class="navigation-bar": http://onsen.io/reference/css.html#toolbar
It is also possible to change the CSS of your current toolbar to make it bigger, if you want. The anwer of this question may be helpful: Doesn't show div in onsen ui and angularjs
Hope it helps!
Edit: some CSS to do this...
Fix the position to the top under a main toolbar: position: fixed; top: 44px;
Change the page content so the new toolbar does not overlap with it:
ons-toolbar ~ .page__content {
top: 88px;
}
Working here: http://codepen.io/frankdiox/pen/YXKyjX
If I set a sufficiently long label for any kind of form element, or the title of a FieldSet, it just grows horizontally forever if I set labelAlign to right. How can I force these to wrap to the next line instead of creating horizontal scrollbars?
You will need to override the default CSS which forbids wrapping (white-space: nowrap). This should do the job:
.x-form-fieldset-title,
.x-form-label {
white-space: normal;
}
Example:
I think using the labelWidth property for a field will give you the desired result.
I have multiple <apex:pageblock>s in an <apex:panelgrid>. The title of the <apex:pageblock>s wraps prematurely, and I can't figure out why. Here's an example of what it looks like.
I don't seen any reason why the title shouldn't span the entire width of the <apex:pageblock>. Anyone else? I'm also open to hacks to get around the issue.
Salesforce wraps the title in a <td> and sets its width to 30%. You can override this with some css like
td.pbTitle {
width: 60%;
}
I'd ditch the standard title="title text" and go with the same font/size/bold text with a min-width style to protect it from wrapping prematurely.
I've been looking everywhere, but I can't find an answer to my problem maybe someone out here can help me.
I have a panel with a toolbar
The toolbar has 3 items (Button, Textfield, Button)
This works fine, I can press buttons, I can't write, edit, etc. in the Textfield...
But if I change to: Button, component, button
And in the component I write a html: ''
The focus manager (maybe something else...) kicks in ... well.. not really so good with that text input, I can write... but I can't press Backspace, if I do, nothing happens, nor I can press the arrow keys....
Is there a way to supress the focus manager only in that text input??? or to the whole toolbar (I don't really need it)
I've tried the "Ext.FocusManager.disable()" but that doesn't work (also the Ext.FocusManager.enabled returns false... so maybe it's not really fault of the Focus Manager)
I've narrowed down the problem to the toolbar...
I created a Text Input some place else, and all the keys work... I moved that same input (using jquery) inside the toolbar... and the backspace and arrow keys stop working... if I move it out, the keys start working again :S
I need it to be a text input because I'm planning on using a jQuery plugin which hides the current input and replaces it with another input... so you see... even if I use textfield, the textfield will get hidden and a text input will replace it without backspace and arrow keys functionality
Any help will be greatly appreciated
Regards!!!!!!!!
ok....
Using the xtype: 'textfield' there was something odd for me....
Ext.FocusManager.enabled
returns false....
If I do a Ext.FocusManager.enable(); and after that a Ext.FocusManager.disable();
Even the xtype: 'textfield' stops working with the backspace and arrow keys :O
So I guess FocusManager has something to do....
anyway, I provisionally solved my issue :P
I left the component as textfield
{
xtype: 'textfield',
name: 'emailsi',
id: 'emailsi',
labelStyle: 'width: auto',
labelWidth: 120,
width: 500,
fieldLabel: idioma.personasInvolucradas
}
And when the text input gets created via jquery it applies display: none to the previous textfield
So... I restore the display:block and also apply a position: absolute; float: right; z-index: -1; so it gets hidden again and doesn't disturb the layout :P
And finally, to restore the Backspace and Left/Right Arrow Keys functionality........
I create a .focus() event in jQuery, like this:
$('.textboxlist-bit-editable-input').focus(function(){
$('#emailsi>div>input').css({display: 'block', 'z-index': '-2', position: 'absolute', float: 'right'});
Ext.getCmp('emailsi').focus();
});
Basically, I discovered that as long as the original textfield has the focus, I can press backspace in the text input :) (also there's where I apply the css thing, first it was outside the focus event, but when the toolbar gets repainted, the textfield goes back to display:none)
If someone has a better solution, it will be very welcomed :D
Regards!!