Math formula field is small.
This is default behavior of the Latex plugin. Can the field can be expanded? If yes, then how can I do that?
I have browse to fix this solution but none of them match with what I want. Anyone know how to expand it?
This is the screen shot:
UPDATED
return{title:b.title,minWidth:1000,minHeight:650,contents:[{id:"info",elements:[{id:"equation",type:"textarea",rows:10,label:b.dialogInput, ..
Note: I can expand the dialog display but I cannot expand the textfield formula form. It seem like the variable rows not functioning.
Should I declare the variable rows in other file?
You can edit the code that displays this dialog.
In your ckeditor folder, under the /plugins/mathjax/dialogs/ folder, open the mathjax.js file.
To make the dialog wider change the minWidth attributes. For example, to set the width to 750 pixels:
return {
title: lang.title,
minWidth: 750,
minHeight: 100,
contents: [
To add more lines to the formula textbox, add the rows attribute with the number of lines you want (the rows attribute is not there by default so add it). For example, to make the textbox 10 lines long:
elements: [
{
id: 'equation',
type: 'textarea',
rows: 10,
label: lang.dialogInput,
Here's a screenshot with the above changes:
Save the file and clear your cache before testing.
Related
Is it possible to click somewhere unspecific on a page?
I have the issue that a drop down becomes top level in the dom and all other elements are not visible anymore for cypress. A user probably simply clicks somewhere in order to close the dropdown. However, I fail with cypress. I can only click on the dropdown-element itself and since there are multiple items in the dropdown I have to even select one (not wanted)
I need something for cypress to click on something unspecific like:
root().click
or
cy.get('body div').click
These 2 are not working not even with force: true.
I had a similar issue and I used coordinates according to the Syntax
.click(x, y, options)
So you should be able to get the body and click on position x = 50, y = 50 or some other position outside the dropdown menu
cy.get('body').click(50, 50, { force: true })
If this does not work, you can try negative coordinates
cy.get('{{dropdown-menu-name}}').click(-50, 0, { force: true})
If this still does not work use .mousemove()
cy.get("{{dropdown-menu-name")
.trigger("mousemove", 50, 50)
.trigger("mousedown", {which : 1})
.trigger("mouseup", {which : 1})
but that seems excessive
{edit} 50 is the number of pixels to move. That is just an example. of course. Pick a number of pixels what works for your project.
Is it possible to extend Fyne’s widget button to accept two different text fields with different alignment inside one button?
For example, I want a button to contain:
|FILE_NAME ....... FILE_SIZE|
I tried to add additional Text field to my structure of a button, but it was ignored.
Update
This is how I tried to add second text
func NewBasicIconButton (text, secondText string, icon fyne.Resource, action func()) *BasicButton {
b := &BasicButton{
widget.Button{
Text: text,
Alignment: widget.ButtonAlignLeading,
Icon: icon,
IconPlacement: widget.ButtonIconLeadingText,
OnTapped: action,
},
secondText,
widget.ButtonAlignTrailing,
}
b.ExtendBaseWidget(b)
return b
}
The Fyne widget.Button doesn't really do that - it provides for 1 text and 1 icon, although they can be aligned separately the icon cannot be string content.
You probably need a custom widget to do that.
Demo: https://dojo.telerik.com/OJOmaS (or http://jsfiddle.net/xfxwukqf/)
Given:
field: "salary",
format: "{0:n0}", -this means 0 decimals
The Salary field is editable and always shows 0 decimals (whole numbers).
The user can enter 99.123456... and the field will show 99, so far so good.
Problem:
When the user clicks on the field to edit again the field shows 99.12, why? Nowhere is the format for 2 decimals defined.
Second problem is that when I read the data the salary is also 99.12 (see screenshot attached). Whatever I change the format to the editor always displays 2 decimals. why?
Steps to reproduce problem:
Click in Salary Cell
Enter 99.1232343245
Click in Salary Cell again and notice the number 99.12 (also in console the value for salary is 99.12) yet the field format is n0 (no decimals
In your case, it looks at thought the format is applied to the grid cell value. When in edit mode, the format does not seem to carry over to the editor for that cell. Perhaps this is controlled by a setting??
In the meantime, you can use the code below as a workaround and place a kendoNumericTextBox into an editor template for the cell and bind it to the container. You can specify no decimals in the edit mode. This may or may not be what you envisioned.
...
{ field: "name" },
{
field: "salary",
format: "{0:n0}",
editor:customSalaryEdior
}
...
function customSalaryEdior(container, options) {
$('<input id="' + kendo.guid() + '" name="Salary" data-bind="value:salary">')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0,
min: 0,
format: 'n0'
});
}
I'm trying to set the background color of column headers in an Interactive Grid form. There are a couple of things that I've tried:
Assigned a static id to a column and made an inline css selector that targets that id - the outcome is that data cells only inherit those attributes while editing; header remains unaffected
Assigned a class to a column and made an inline css selector that targets that class - the outcome is that all data rows inherit those attributes; header still remains unaffected
I tried using the JavaScript Code option under Advanced that can use the configuration object and modify column behavior and appearance without much success. I managed to change column header text but nothing else. I suspect there is some member of that configuration object that affects header background color but I can't seem to find it.
So the question is:
How to customize Interactive Grid column header (namely, set its background color) using configuration object?
I suppose this might be considered a separate question, but if that turns out to be impossible, what would be the best alternative?
Re an alternative, if the change is static you can do it using page-level CSS. Each heading has a data-idx attribute whose value is a number unique within the grid. So if your IG region has the static ID "myRegion" then you can add CSS like the following to target a specific header:
#myRegion_ig th[data-idx="2"] {
background-color: #dff;
}
Or to make all IG headers on the page the same:
.a-GV-header {
background-color: #dff;
}
The first approach is problematic. It makes the change based on the position, not the particular column. If, for example, the first two columns in your grid are "First Name" & "Last Name", in that order. "First Name" would be data-idx = 1; "Last Name" would be data-idx = 2. If you assign the color blue to data-idx = 1 and green to data-idx = 2, then "First Name" will blue and "Last Name" will be green. However, if you swap then position of the two columns so that the order in your IG is "Last Name", "First Name", then "Last Name" will now be blue and "First Name" will be green.
The second approach works if you want to change the color of all the headers to only one color.
in my site , i have a jqgrid table.
by default, the names of the columns (header) is longer than the width for column, because that i set the name with an ellipsis.
however, when resizing the column, the short name with ellipsis stays.
how can i get it work automatic ,
like the ellipsis should disappear and change to the full name when there is enough space, when the user is expanding the column.
thanks
You can add an event handler after the resizing finishes to reset the names. How are you storing / changing the names? If they're in an array, you can add a function like:
var columnNames = ['first', 'second', 'third'];
$("#mygrid").jqGrid({
...
resizeStop: function(newwidth, index){
jQuery("#mygrid").jqGrid('setLabel',index,columnNames[index]);
},
...
});