I have a grid panel with a bottom toolbar:
this.bbar = [
"->",
{
text:"<font color = white><b>Save</b></font>", itemId:"save",
},
"<-",
{
tooltip:"Back to Home Screen", itemId:"backhome", text:"<b>< back</b>"
}
];
the right arrow -> moves the save button all the way to the right. So I thought adding a left arrow <- would center the two buttons that did not work. Both buttons are pushed to the right and the left arrow can be seen so i dont think "<-" is valid.
Is there another approach i can take to center my two buttons?
thanks..
Append layout config to your toolbar.
layout: {
pack: 'center',
type: 'hbox'
}
Documentation (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.layout.container.Box-cfg-pack)
Related
I have a Kendo listbox with a toolbar that allows sorting (up/down) and delete of a list item. When my listbox has enough items that extends it beyond the view of a mobile device, scrolling down causes the toolbar to scroll off screen. Because of this, if a user wants to move the bottom item of the listbox up, they have to scroll down, select the item, then scroll back up to access the toolbar actions, which makes for poor user experience. How can make the toolbar scroll along with list, or even just duplicate the toolbar at the bottom of the list?
Here is my widget definition:
$("#myMenus").kendoListBox({
selectable: "multiple",
toolbar: {
scrollable: true,
tools: [ "moveUp", "moveDown", "remove" ]
},
reorder: function(e) {
e.preventDefault();
var UID = $(e.items[0]).attr("data-uid");
var dataSource = e.sender.dataSource;
var dataItem = e.dataItems[0]
var index = dataSource.indexOf(dataItem) + e.offset;
dataSource.remove(dataItem);
dataSource.insert(index, dataItem);
e.sender.wrapper.find("[data-uid='"+UID+"']").addClass("k-state-selected");
},
});
I was able to fix the location of the toolbar using CSS. This is needed if your listBox is going to use a non-fixed height, as in my case, I needed to use "height:100%" so the size of the listBox would equal the content. You'll need to play around with the width and margin-left values to suit your situation.
<style>
.k-listbox {
width: 275px;
height: 100%;
}
.k-listbox-toolbar {
top:10;
position:fixed;
width:auto;
z-index: 1;
margin-left: 42px !important;
}
</style>
I have HichChart with subTitle. I want to style it, that one part of this text was on left and another on right side.
I've tried to do this using inline css and turn on html for subTitle.
Sample what I have
subtitle: {
text: '<b>This is</b> <span style="float : right !important;text-align: right !important;">the subtitle</span>',
floating: true,
align: 'left',
x: 100,
y: 60,
useHTML : true
}
But this doesn't help.
It is not optimal , but you can overwrite the css style like this fiddle
#container .highcharts-container .highcharts-subtitle {
width:calc(100% + -120px); /*customize this to your needs*/
}
Hope it helps
I added a right position to the subtitle so that it has a full width, otherwise your float does nothing, the only thing i don't understand is why i have to add the left position with the same value as x so that the "subtitle text" doesn't end up outside the chart.
this what i added
style: { "right":"10px", "left": "100px" }
if you want more margin to the right, just increase the right property
full fiddle here http://jsfiddle.net/h70sj57r/4/
and this is how it look like if i don't add the left position(again i have no ideea what calculations it does so that you need to add this) http://jsfiddle.net/h70sj57r/5/
I'm trying to create a custom menu for an icon in the datatable header. The main idea is to show this menu for the one specific column (on icon click)
Here's my current code:
http://webix.com/snippet/b5259f40
{
view:"datatable",
columns:[
{ id:"info", header:"Info", fillspace:1},
{ id:"props", header:"<i id='settings' class='fa fa-list' style='text-align:center;'></i>", width:150}
],
data:[],
on:{
onHeaderClick:function(id, e, node){
$$("mymenu").show(node);
}
}
});
webix.ui({
view:"popup",
body:{
view:"menu", data:[],
on:{
onMenuItemClick:function(id){
webix.message(id);
this.getParentView().hide()
}
}
})
For now, the popup opens when I click anywhere in the header.
How can I append menu for the icon only? TIA
[update]
You are required to add an onClick function for your icon. In order to align the popup window with the icon, you have to manually adjust its x and y offsets according to your needs. Please check below:
onClick:{
"fa": function(id, e, node){ //"fa" is the classname in your header
$$("mymenu").show(
{
x : 780, //left offset from the right side
y : 30 //top offset
});
}
}
Please check the snippet here.
There are 3 divs, each having a panel in them. Initially, only 2 panels are displayed and the other is hidden. On clicking 'Update' in one of the panels, these 2 div are hidden and the 3rd one is shown.
There is a set of buttons in the 3rd panel. The below is the code for it
buttons: [{
xtype: 'checkbox', id:'usapCheck', boxLabel: 'I Accept', allowBlank: false, margin: '1 1 4 230'
},{
buttonAlign: 'right',margin:'0 0 0 3.6',text: 'Save',width: '30',iconCls: 'save',
handler: function() {
//code to save form details
}
},{
buttonAlign: 'right',margin:'1 1 0 3.6',text: 'Clear',width: '30',iconCls: 'clear',
handler: function() {
//code to clear the fields
}
},{
buttonAlign: 'right',margin:'1 1 1 1.6',text: 'Back',width: '30',iconCls: 'back',
handler: function() {
//code to hide this div and show other divs.
}
}]
When I click the back button, the 3rd panel is hidden and displays the 2 other grids in the same js. But when I again click the 'update' button, to display the 3rd panel, the alignment of these buttons change.
So, on hiding and showing the panels, the alignment changes in a strange way.
I am totally lost, without any clue. Can anyone please help me?
Off the top of my head:
You shouldn't use buttonAlign: 'right' there and your width is set as a String for all your buttons, using ExtJS, when you specify your width value as String it works like CSS values, so you have to pick:
width: 30 // 30 pixels
// or
width: '30px' // 30 pixels
Correct this and your buttons shouldnt look messed up anymore.
In general, I am trying to have an icon which stays to the right of a field. I need it to work in Firefox, Chrome, IE11 and IE8
JS Fiddle: http://jsfiddle.net/e8f6N/3/
There is a fieldset which can be expanded or collapsed. When the fieldset changes, the fields below it move up or down to compensate for the movement. When this happens, Firefox is unique in that the icons do not move with the field's body.
I find that if I use relative positioning rather than absolute, the icon will move with the field like it should. However, then there is some white space being put below each field, which I do not want.
Advice is appreciated in the following questions:
A way for firefox to move the icon with the rest of the field?
A way to use relative positioning and not have the extra space being
inserted below the field?
Alternatively, a better way to skin this cat?
Code used in fiddle:
Ext.onReady(function () {
Ext.QuickTips.init();
var fieldSet = Ext.create('Ext.form.FieldSet', {
title: 'Simple Collapsible Fieldset',
collapsible: true,
items: [{
xtype: 'label',
text: 'Watch the icon and collapse this fieldset'
}]
});
var textBoxWithInfoIcon = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Example',
listeners: {
afterrender: function (me) {
var icon = me.getEl().down('.x-form-item-body').createChild({
cls: 'x-form-info-icon',
tag: 'img',
src: 'broken',
width: 16,
height: 18,
'data-qtip': 'an example textfield to simulate this icon which does not move',
'data-qtitle': 'Field Information'
});
var xPosition = 130;
var yPosition = 0;
icon.alignTo(me.getEl(), 'tl-tr', [xPosition, yPosition]);
}
}
});
var textBox = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Example'
});
var textBoxWithInfoIcon2 = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Example',
listeners: {
afterrender: function (me) {
var icon = me.getEl().down('.x-form-item-body').createChild({
cls: 'x-form-info-icon',
tag: 'img',
src: 'broken',
width: 16,
height: 18,
'data-qtip': 'an example textfield to simulate this icon which does not move',
'data-qtitle': 'Field Information'
});
var xPosition = 130;
var yPosition = 0;
icon.alignTo(me.getEl(), 'tl-tr', [xPosition, yPosition]);
}
}
});
var panel = Ext.create('Ext.panel.Panel', {
title: 'Title',
frame: true,
width: 400,
height: 200,
items: [fieldSet, textBoxWithInfoIcon, textBox, textBoxWithInfoIcon2],
renderTo: document.body
});
});
p.s. There are a lot of questions with similar titles, yet as far as I've found they don't have to deal with a collapsing fieldset and just use absolute positioning in their css.
EDIT
More details after working with it for a while: After trying to add an info icon to a field's body, the input of the field is at the same level as the icon, but the input is set to take up 100% of the width. I am not sure where/how I can change this.
Absolute positioning of the injected icons is not the best solution for the info icons after fields.
Much better would be to add a after the input field parent . That would solve everything: Input would get shorter to make space for the icon, no need to calculate and set position of the icon, no problems with collapsible fieldset as of now.
I think you need this plugin: Form Field Icon Plugin