Iḿ trying to add more "columns" to a text area.
I have a form with
$f->addField('text','field');
$f->getElement('field')->setAttr('rows','8');
If I set 'rows' property I can add more rows to my textarea, but if i set the 'cols' property It doesn't display correct.
If I inspect the generated html, the textarea has correct set the property 'cols' but it doesn't expand it
Anyone as some help ?
thanks
The short answer is that CSS is affecting the textarea as #scrappedcola pointed out, but I'll give a bit more info on the matter.
Why is it 100%?
All the form fields take 100% of the width. If you need form to be more compact, you can place it into a grid column, which will limit it's width. You can also use horizontal form to conserve space or make it flow in multiple columns. Here is a demo: http://agiletoolkit.org/codepad/gui/formstyle
Where is it set?
If you open inspector for the textarea, you can find what the CSS properties are assigned to the textarea:
By clicking on the arrow under StyleRules (this is safari, but firefox's firebug addon is similar), you can see the following rules in atk-main.css file:
.atk-form fieldset .atk-form-row > .atk-form-field
input[type=text]:not([class*="span"]),
.atk-form fieldset .atk-form-row > .atk-form-field
input[type=password]:not([class*="span"]),
.atk-form fieldset .atk-form-row > .atk-form-field
textarea:not([class*="span"]),
.atk-form fieldset .atk-form-row > .atk-form-field select {
width: 100%;
}
The atk-main.css is generated from atk-main.less file:
fieldset .atk-form-row {
.clearafter();
margin-top:#margin/2;
&:first-child {margin-top:0;}
&.has-error>label {color:#error;}
&.has-error input {border-color:#error;}
>label {font-weight:bold;width:#label;margin-top:0.4em;float:left;}
>.atk-form-field {
margin-left:#label+#labelMargin;
input[type=text]:not([class*="span"]),
input[type=password]:not([class*="span"]),
textarea:not([class*="span"]),
select {width:100%;}
select {width:100%;margin-top:0.5em;}
textarea {display:block;margin-bottom:#margin/5;}
input+input {margin-left:0.4em;}
.atk-form-error {margin:#margin/5 0 0;color:#error;}
}
}
How to override?
You can create a local CSS file to set the width of YOUR textarea fields differently.
$this->api->jui->addStaticStylesheet('yourfile');
You can also set it manually:
$f->addField('text','field');
$f->getElement('field')->setAttr('style','width: 50%');
Related
I am using react-calendar-timeline and there I am using controlled scrolling feature very similar to this example. Now as you can see only current date is being displayed but user can scroll the canvas to previous and next date. That means canvas is taking 3x width of the dateRange.
I just need the current date to be displayed in canvas only.
Thank you in advance.
I have also dug a lot over the docs and internet to solve this problem.
Finally, I got it. I am sharing my solution with those who are in the same situation.
Create defaultTimeRange and set to min and max zoom props to disable the zoom.
Then write a handler function for onTimeChange and take the third callback funciton to disable the scroll.
// Set the visible start and date somewhere in the beginning like this using useEffect
setVisibleTimeStart(currentDate.startOf("day").valueOf());
setVisibleTimeEnd(currentDate.endOf("day").valueOf());
...
const defaultTimeRange = visibleTimeEnd - visibleTimeStart;
<Timeline
...
minZoom={defaultTimeRange} <--- To disable Zoom
maxZoom={defaultTimeRange} <--- To disable Zoom
onTimeChange={(_start, _end, updateScrollCanvas) => {
updateScrollCanvas( <--- To disable Scroll
moment(visibleTimeStart).valueOf(),
moment(visibleTimeEnd).valueOf()
);
}}
>
Then you have to override one css class like this
.react-calendar-timeline .rct-scroll{
overflow-x: hidden !important;
}
I have created 3 variables
const defaultTimeStart = moment().add(0, 'hour');
const defaultTimeEnd = moment().add(6, 'hour');
const defaultVisableTimeEnd = moment().add(24, 'hour');
// create calendar view of one day
const defaultTimeRange =defaultTimeStart - defaultVisableTimeEnd;
<Timeline
...
minZoom={defaultTimeRange}
maxZoom={defaultTimeRange}
//it will not allow to scroll more than [enter image description here][1]a day
onTimeChange={(_start, _end, updateScrollCanvas) => {
if (_start > defaultTimeStart && _end < defaultVisableTimeEnd)
updateScrollCanvas(_start, _end);
}}
/>
I am using ckeditor4-react package in my react app. When I want to add image to text, file browser is opening, I select the image or upload the image but I cannot change the size of the image or add alternate text. Because text fields are disabled.
let c = {
filebrowserBrowseUrl: 'http://localhost:3002/admin/photopicker',
filebrowserUploadUrl: `https://api.cloudinary.com/v1_1/${config.cloud_name}/upload`
};
<CKEditor
config={c}
ref="editor"
data={this.props.data}
onChange={this.props.onEditorChange}
onFileUploadRequest={this.onFileUploadRequest}
onFileUploadResponse={this.onFileUploadResponse}
onDialogShow={this.onDialogShow} />
I expect to edit size like in the demo: https://ckeditor.com/docs/ckeditor4/latest/examples/image.html
Alternative Text, width, height, border, HSpace and VSpace fields are not editable
It seems to me that your ckeditor react package has been installed with the
config.readOnly
property set to true.
Try including this under your CKEditor tag:
readOnly={false}
or, changing the package configuration.
See: CKEditor readOnly config property for more info on that.
In my app (ExtJS 5.0.1) I'm trying to use a grid with the gridfilters Plugin AND shortcut buttons (and also from a tree) with custom/hardcoded fiters.
I was able to partially mimic the set and clear of the filters, but I'm having the following problems:
1- When I set a filter via grid.filters.store.addFilter(..) the style of the column title doesn't change to bold, and the grid filter checkbox stays unchecked.
2- Same as 1 but reversed... first I set the filter on the column, when I clear the filter the column stays bold, but in this case the checkbox is cleared (as it should).
3- When I'm using summary feature 'sometimes' the total is not updated
So, my question is:
Is there a proper way to programmatically set/clear filters mimicking the gridfilter Plugin ?
I've put a minimal Fiddle to simulate this.
https://fiddle.sencha.com/#fiddle/akh
Best Regards,
Ricardo Seixas
Just use filter instance on column:
var column = grid.columnManager.getColumns()[0];
column.filter.setValue('J');
column.filter.enable();
Working sample: http://jsfiddle.net/3be0s3d8/7/
For List Filters use the following override to enable the setValue method:
//Enable setting filter values in list filters
Ext.define('Ext.ux.fixed.ListFilter', {
override: 'Ext.grid.filters.filter.List',
setValue: function(values) {
var me = this, len = values.length;
if(!values) {
me.callParent();
return;
}
if(!me.menu){
me.createMenu();
}
me.filter.setValue(values);
if (len && me.active) {
me.updateStoreFilter(me.filter);
} else {
me.setActive(!!len);
}
}
});
You can directly change the styles in the GridFilter.css file :
<link rel="stylesheet" type="text/css" href="js/lib/ext-4.2.1.883/ux/grid/css/GridFilters.css" />
By changing this element :
.ux-filtered-column {
font-style: italic;
font-weight: bold;
background: #56b8ff;
}
Hope this helps.
In the latest release (5.1) Ext's ChainedStore worked well for me.
I am new to NatTable. I have gone thorough the NatTable examples and its source code but am not getting a solution to one of my problems.
In the NatTable I have a column that should provide a checkbox for selection depending on the value of another column.
I have used Checkboxpainter, checkboxcelleditor, the defaultbooleanconverter and IEditableRule. This renders a checkbox irrespective of whether the cell is editable or not though it allows me to mark the checkbox only if it is enabled.
However as per our requirement user should not see the checkbox if the row is not selectable. or in worst case a disabledcheckbox should be rendered for rows that are not selectable.
Can someone please help me out?
Thanks and regards,
Pradyumna
Got a solution for this.
I had to write a custom checkboxpainter (inheriting from the one that is available OOTB) and override its getImage method to return null for appropriate cells
There is a better solution which I have just applied to a similar case in my work.
I did it by adding the following configuration to the table:
// make checkbox cells editable
configRegistry.registerConfigAttribute(EditConfigAttributes.CELL_EDITABLE_RULE, IEditableRule.ALWAYS_EDITABLE, DisplayMode.EDIT, CONFIG_LABEL_CHECKBOX);
// register the checkbox editor for DisplayMode.EDIT
configRegistry.registerConfigAttribute(EditConfigAttributes.CELL_EDITOR, new CheckBoxCellEditor(), DisplayMode.EDIT, CONFIG_LABEL_CHECKBOX);
// register the checkbox painter for DisplayMode.NORMAL
configRegistry.registerConfigAttribute(CellConfigAttributes.CELL_PAINTER, new CheckBoxPainter(), DisplayMode.NORMAL, CONFIG_LABEL_CHECKBOX);
// register the painter for empty cells in DisplayMode.NORMAL
configRegistry.registerConfigAttribute(CellConfigAttributes.CELL_PAINTER, new BackgroundPainter(), DisplayMode.NORMAL, CONFIG_LABEL_EMPTY);
Basically, this introduces the configuration labels CONFIG_LABEL_CHECKBOX for an editable checkbox, and CONFIG_LABEL_EMPTY for an empty cell.
Now all you have to do is to attach an IConfigLabelAccumulator to your bodyDataLayer:
bodyDataLayer.setConfigLabelAccumulator(new IConfigLabelAccumulator()
{
public void accumulateConfigLabels(LabelStack configLabels, int columnPosition, int rowPosition)
{
if(columnPosition == CHECKBOX_COLUMN_INDEX)
{
if(someCodeToCheckIfRowIsEditable(rowPosition))
{
configLabels.add(CONFIG_LABEL_CHECKBOX);
}
else
{
configLabels.add(CONFIG_LABEL_EMPTY);
}
}
}
}
I am using ExtJs 4.1.0 and I am new to extjs. I have used fleXcroll for applying custom scrollbars to windows and panels. They are working fine so far, but when I am trying to resize the window, the scrollbars are not getting updated and also they are getting hidden from the screen.
Here is the code:
var samplePanel=new Ext.panel.Panel({
title:'Panel1',
height:350,
width:350
});
var sampleWindow=new Ext.window.Window({title:'Window',
items:[samplePanel],
renderTo:Ext.getBody(),
height:300,
width:300,
listeners:{
afterLayout:function(c){
fleXenv.fleXcrollMain(c.body.id);
},resize:function(c,w,h,o){
if(c.body.dom.fleXcroll)
fleXenv.updateScrollBars(); }
}
});
Does anyone had similar problem? Please help me.
After struggling for long time I finally found the actual problem.
Let us see what is happening when we apply scrollbars to a window. The contents inside window goes into its body where we need to display the scrollbars. FleXcroll will add two additional divs inside the target div(in this case, body) with ids of the form targetDivID_mcontentwrapper and targetDivID_scrollbarwrapper. The contents of the body will go to _mcontentwrapper and scrollbars will be displayed in the later.
Scrollbars will be displayed if the contentSize is greater that size of contentwrapper-div which is same as target div.
Here is the structure of divs after applying flexcroll
window-body(target div)
-- mcontentwrapper
-- contentwrapper
-- actual content
-- scrollbarwrapper
After resize the window the content is going into window-body rather than contentwrapper. So the content size in contentwrapper will be zero and hence scrollbar disappears.
structure after resize:
window-body(target div)
-- actual content
-- mcontentwrapper
-- contentwrapper
-- scrollbarwrapper
Now we need to put the actual_content into contentwrapper before updating the scrollbars.
Here is the code for doing that:
listeners:{afterLayout:function(c){
fleXenv.fleXcrollMain(c.body.id);
},
resize:function(c){if(c.body.dom.fleXcroll){
var a=c.body.dom.childNodes;
var b=[];
for (var i=0,j=0;i<a.length ;i++ )
{
if(a[i].id!=c.body.id+"_mcontentwrapper" && a[i].id!=c.body.id+"_scrollwrapper")
{
b[j]=a[i];
j++;
}
}
var el=Ext.get(c.body.id+"_contentwrapper");
for(var i=0;i<b.length;i++)
el.appendChild(b[i]);
}
}
}
I hope it is useful.