In ExtJS is .x-form-arrow-trigger css class used only for down arrow image on ComboBox or there are some other places where this class can be used?
Given that the only style rule for this class is a background image pointing to this file...
http://cdn.sencha.io/ext-4.0.7-gpl/resources/themes/images/default/boundlist/trigger-arrow.png
...then you can safely assume that it is only used where a down arrow trigger is implemented (and to my knowledge that is only on the combobox component - someone correct me if I'm wrong).
Ocasionally found in documentation for Ext.form.ComboBox
Section Configs:
triggerClass : String
An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger' and triggerClass will be appended if specified (defaults to 'x-form-arrow-trigger' which displays a downward arrow icon).
Defaults to: "x-form-arrow-trigger"
Related
In Codename One, I need a class MyButton that extends Button. I want that every myButton instance is a Button which width and height are always equal (to the maximum of their values).
I know that every Component has setWidth and setHeight methods, but they are for the use of the layouts, I suppose that I should not use them directly.
I also know that I can create a Container with a custom layout and place a Button inside it... but in that case I’m not extending the Button class.
My question is if I can extend Button to create square buttons, or if the use of a Container with a custom layout is the only option.
You can use GridLayout which gives everything the exact same width/height but I'm guessing that what you are looking for is:
Container.setSameSize(Component...);
Container.setSameWidth(Component...);
Container.setSameHeight(Component...);
It's static and the components don't need to be in the same container. They'll get the same width/height by returning the preferred width/height of the largest among the set.
I have a component that contains an md-autocomplete. This component is essentially being used as a searchable select list.
So, I'd like to change the icon of the clear-button from the 'X' to a down arrow.
I've tried the solution mentioned here, but that doesn't work for me, because I need the button to remain clickable.
Is there a way I can override the button styling in the component's CSS to specify a different icon to be used?
I am trying to implement a finite number of colors (like square icons) on the Draftail editor itself. What will be the best way to approach this?
It should be similar to how Microsoft Word displays the font color or something along those lines.
Thanks in advance.
I'm not sure if it's the best approach but here is what I came up with:
https://gist.github.com/benoitvogel/46022124d46de03ed2078603fb24ca97
This defines a new inline style which encloses the selected text between <span class="mycustomclass"></span> (change feature_name according to the CSS class you want to use).
Then, you just have to define the corresponding .mycustomstyle CSS class in your frontend as usual:
.mycustomstyle {
color: purple;
}
You can also modify control['style'] to change the way this style will be displayed in the editor.
You will get 1 icon/label per CSS class, so it's not really like in Word as you won't get a proper selector. I haven't tried it myself, but according to Wagtail docs icon can reference SVG, so you might be able to display color squares instead of labels.
Hope it fits your needs.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
Is there a built-in icon and class for making a trigger with a help icon (like there is a class 'x-form-clear-trigger' for a trigger with a delete icon)?
More general: is somewhere in the extjs documentation a list of predefined styles for the trigger field type?
Native ExtJS have this four possible trigger class (list you can find in the first comment on triggerCls documentation):
x-form-clear-trigger // the X icon
x-form-search-trigger // the magnifying glass icon
x-form-trigger // the down arrow (default for combobox) icon
x-form-date-trigger // the calendar icon (just in case)
Native class for help icon does not exists, but you can define your own css class and use it as triggerCls