How to not allow tagfield to change its width according to its content? - extjs6.5

I am using extjs 6.5.3 classic toolkit. I have tag field. I am allowing adding items in tag field by typing in tag field. If I type string with more characters in it tag field is taking the width of the content. How can I avoid this?
I tried by giving width, maxWidth, shrinkWrap:false, grow: false, matchFieldWidth : false all this configs are not working.
Please help.
Thank you in advance.

Related

ObjectPageHeader: titleSelectorTooltip Not Working

I am using title selector for my object page header. However, I am not able to overwrite default tooltip for the user-defined string.:
<ObjectPageHeader id="idOpreationObjectPageHeader"
showTitleSelector="true"
titleSelectorTooltip="myOwnString"
titleSelectorPress="handleTitleSelectorPress">
</ObjectPageHeader>
Using this code, it still shows me default string in a tooltip like this:
Can anyone guide me what am I doing wrong?
titleSelectorTooltip is a property from sap.m.ObjectHeader
only.
sap.uxap.ObjectPageHeader doesn't have that kind of setting.
Update: As of 1.56, the property titleSelectorTooltip is available in ObjectPageHeader too.
titleSelectorTooltip
The custom tooltip will be visible if the showTitleSelector property is set to true.
Note: If the aggregation is destroyed or set to invalid value, the default tooltip will be set. The default tooltip text is "Related options".

Declarative Initialization list width kendo autocomplete

Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.

ActiveReports <LI> tag spacing

I've a rich textbox in activereports detail section. Its assigned with html dyanmicaly. That HTML includes LIST tags too(UL and LI). But the problem I cant change the spacing between each LI tags. I tried all CSS methods on the LI's style property. Like Margin, Padding , Line height. But nothing helped me to solve that issue. But I need some noticeable spacing between each LI tags on the Richtextbox..
This is an emergency requirement from my boss.
Requesting your valuable support..
Thanks in Advance..
There are list of supported HTML elements and CSS style attributes in the ActiveReports documentation. You could look through that reference and try the mentioned style attributes. I'd try the line-height, margin, and padding properties of the LI elements. Or maybe try putting a P element on one of the LI elements? If that doesn't work you should probably contact ActiveReports Support at ComponentOne.
If nothing else, you could try to get some RTF document to look the way you want (i.e. increased spacing between list items) and try importing that RTF document into ActiveReports instead.
Here's what works for me:
The paragraph tag supports the inline style attribute in an ActiveReports RichTextBox. So you can enclose each list item within open/close paragraph tags, and then use margin-top, margin-bottom in the inline paragraph style to get the line spacing how you want it.
I used style='margin-top:0;margin-bottom:5'

Disable escape in Zend Form Element Submit

I can't disable escaping in a Zend_Form_Element_Submit, so when the label has special characters it won't display it's value..
This is my actual Zend Form piece of code:
$this->submit = new Zend_Form_Element_Submit('submit');
$this->submit->setLabel('Iniciar Sesión');
$this->submit->setIgnore(true);
$this->addElement($this->submit);
I've tried $this->submit->getDecorator('Label')->setOption('escape', false); but I obtain an "non-object" error (maybe submit isn't using the "Label" Decorator)..
I've also tried as suggested $this->submit->setAttrib('escape', false); but no text will be shown either.. Any idea? Thanks
Should be as simple as doing this:
$element->addDecorator('Label', аrray('escape'=>false));
Or see setEscape(). http://framework.zend.com/manual/1.12/en/zend.form.standardDecorators.html
Regarding failure to retrieve named decorator... Try getDecorators() Do you see 'label' in the results?
There is no Label decorator for submit form element by default (this is why you get the error).
The $this->submit->setLabel('Iniciar Sesión'); value goes to Zend_View_Helper_FormSubmit, which always does escaping and uses the label as a value.
The helper used by the Submit element escapes by default. Unlike with the label decorator, submit labels are included in a HTML attribute so they need to be escaped.
Your label - Iniciar Sesión - is a perfectly valid UTF-8 string, so the escaped version of it will be the same. If your label is not appearing then something else is going wrong. I'd guess that your page is being served using a charset that doesn't match what Zend View is using (UTF-8 by default).
View the page source to see what actually gets output - that might give you some more clues. Alternatively if the page this form is on is public, if you can provide a URL we might be able to spot the issue.
I ran into a similar issue. In my instance, I added both a label and a description to a text field element. This line of code allowed me to turn off the html escaping for the description attached to that field element:
$form->getElement('txtUPC')->getDecorator('description')->setOption('escape', false);
In my testing, the setEscape() was not recognized by the form elements or their decorators.

Can jQuery be used to select a div based on its height? Or is the tutorial wrong?

I am trying to select a div based on its height, as shown in this tutorial,
jQuery Selection. I cannot get it to work: jsbin example . The line not working is:
$('div[height=50px]').css('background-color', 'orange');
That's an attribute equals selector, so the HTML it would match is:
<div height="50px"></div>
You could change it to:
$('div[style="height:50px"]').css('background-color', 'orange');
According to comments, the above doesn't work in Internet Explorer. Try the following instead:
$('div').filter(function() {
return $(this).css('height') == '50px';
}).css('background-color', 'orange');
If you want to match other elements with a height of 50px not specified using an attribute, take a look at the .filter() function.
If your HTML is...
<div style="height:50px;"></div>
Then your selector should be...
$('div[style*="height:50px"]');
If you are setting height to the value of "50px" and " 50px" (common), you will need to adjust accordingly...
$('div[style*="height:50px"], div[style*="height: 50px"]');
If you change the CSS of this element, the div's style attribute might become: "height:50px;background-color:orange", and it would cease to get picked up by this selector.
Docs: https://api.jquery.com/attribute-contains-selector/