I want to get the following to display in a single line. I have tried using styles float and display.
Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
<script type="text/javascript">
new Ext.form.ComboBox({
applyTo: 'filterOp',
triggerAction: 'all',
name: 'item',
mode: 'local',
lazyInit: true,
displayField: 'name',
valueField: 'id',
forceSelection: true,
typeAhead: true,
inputType:'text',
fieldLabel: 'Item selection',
style: "display: inline-block",
store: new Ext.data.JsonStore({
autoLoad: true,
url: 'reporting/json_report_filter_operators.jsp',
root: 'rows',
fields:['id', 'name']
})
})
</script>
The simplest way to do this is to override the styles on the page.
First, wrap your paragraph in a P tag with a special id.
<p id="my-inline-override">
Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
</p>
Then you can add a CSS selector to your page that makes sure the DIV tag added by Ext JS displays inline (note that "x-form-field-wrap" is the class of the inserted DIV wrapper, you can see this if you use chrome developer tools to browse the DOM).
<style>
#my-inline-override div.x-form-field-wrap {
display: inline;
}
</style>
I'm sorry, your question is a bit confusing. What exactly are you trying to get on a single line? The combo box? The code? Each item in the combo box? If it's each item just widen the combo box, or make each element have overflow hidden and a fixed width.
Related
I would like to change react-select option box width.
example here=>
If my content is larger than the option, its show horizontal scroll but I don't want horizontal scroll. How can I change the size of option box width?
Another thing is How can I show the selected value as CscID one even option box is showing CscID + CscDesc? Now when I select the option, its CscID + CscDesc is showing in the selected box.
Here is my Select =>
const formatOptionLabel = ({ CscID, CscDesc }) => (
<div style={{ display: "flex"}}>
<div>{CscID}</div>
<div>{CscDesc}</div>
</div>
);
const customStyles = {
control: styles => ({ ...styles, }),
option: (styles) => {
return {
...styles,
width: '10000px', //For testing
};
},
};
<Select
styles={customStyles}
formatOptionLabel={formatOptionLabel}
getOptionValue={option =>
`${option.CscID}`
}
options={datasource}
/>
Yes, I can edit the width of option box.
const customStyles = {
control: styles => ({ ...styles,
}),
option: styles => ({ ...styles,
}),
menu: styles => ({ ...styles,
width: '500px'
})
};
According to the documentation, Its called menu. If you want to update the other style, check here=> Style Keys
And this option is super helpful for inspecting the menu box => menuIsOpen={true}
You normally don't change width of the wrapping element in your use case. As the text limit can be any so you wont set the width of select according to the text but the text according to your select's width. Meaning the select will have a fixed width and the text exceeding the the fixed width must be converted to ellipsis through css like
.options-select {
overflow: ellipsis
}
Ellipsis on hover must show the fullname in a tooltip for better UX.
For re-size problem, you may refer to this existing answer: React Select auto size width
For second problem, I don't think it is possible by using react-Select.
If you go to github and look further into the source code of react-Select, you may find that the ValueType of value property is expected to be same as OptionsType of options.
To be precise, the code is "export type ValueType = OptionType | OptionsType | null | void;", which could be found in react-select/packages/react-select/src/types.js
For your convenience, this is the link towards its source code, which can help you figure out more hidden behaviors: https://github.com/JedWatson/react-select/tree/master/packages/react-select/src
Using a template for row data or for a column header using HTML as the value of the field, I can add a checkbox to a Kendo UI grid. For example:
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [{
field:'<input id="masterCheck" type="checkbox" /><label for="masterCheck"></label>',
width: 33,
height: 550,
}]
});
});
</script>
However, the checkbox is not styled according to the Kendo UI theme though. Adding class="k-checkbox" to the input checkbox element should style it according to theme. However, when I apply the class to the checkbox, the checkbox is no longer visible. How can I have a k-checkbox be visible within the grid?
An example of the issue is located at http://dojo.telerik.com/AjuFo
You have added the 'k-checkbox' class to the checkbox but you forgot to add the 'k-checkbox-label' class into the label. That's why after applying the 'k-checkbox' class to the input element its not displaying.
Please try with the below code snippet.
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [{
field:'<input id="masterCheck" class="k-checkbox" type="checkbox" /><label for="masterCheck" class="k-checkbox-label"></label>',
width: 33,
height: 550,
}]
});
});
</script>
Let me know if any concern.
I'm trying to build a dataview to display some pictures. These pictures I want to select (should be highlighted) and then interact with them (delete e.g.)
xtype: 'dataview',
id:'fotodataview',
scrollable: true,
inline: true,
mode: 'MULTI',
cls:'dataview-inline',
itemTpl: '<div class="img" style="background-image:url({image}); "> </div><div class="name">{name}<br/>{date}</div>',
store: dataViewStore,
listeners:{
//itemtap:'onItemTap'
}
What do I have to add to have a highlighted item? Do I have the toggle the selection on my own when tapping a item? Do I have to add a cls to simulate a selection? (e.g. like list?)
/e I'm developing a modern app only!
You need to add your own css to achieve this:
.dataview-inline .x-item-selected
{
//your selection style
}
OR
you can created your your select class & mention it in selectedCls property:
selectedCls:'<yourSelectClass>' // property in your dataview
.<yourSelectClass>{ // css class
//your selection style
}
I'm using Redactor v9.2.1. I'm trying to allow my customers to use style tags in their CMS, but redactor strips them from the content.
When I add the following:
<style type="text/css">
.red{color:red;}
</style>
redactor strips it to:
<p>
.red{color:red;}
</p>
I've made sure that deniedTags is not including 'style' in my settings object and I'm not using the allowedTags attribute since it conflicts with deniedTags.
Here is my settings object that I'm passing to the redactor init:
var settings = {
deniedTags:[
'html', 'head','link', 'body', 'meta', 'applet'
],
observeLinks: true,
iframe: true,
convertVideoLinks: true
};
Any help is appreciated.
http://imperavi.com/redactor/docs/settings/clean/#setting-deniedTags
Top-level HTML tags ('html', 'head', 'link', 'body', 'meta', 'style',
'script', 'applet') will always be removed regardless of this setting,
unless wrapped in 'pre' tag (formatting option 'Code')
Edit
So you can't add a style tag inside the editor, as I read in the docs. Seems like you have these options:
Style individual tags outside the editor: You add the parent selector .redactor-editor and then the tag name. See http://imperavi.com/redactor/examples/typography/
Add several formattingAdd options to let users pick up custom styles from the formatting dropdown:
$('#redactor').redactor({
formattingAdd: [
{
tag: 'p',
title: 'Red Block',
class: 'red-style'
}
]
});
/**
* The above would create a new formatting entry,
* which you define with 2 css selectors:
* one for the class of the entry, another for the dropdown entry
*
* .red-style, .redactor-dropdown .redactor-formatting-red-style {
* color: red;
* }
*/
Notice css selector rule for the dropdown, which is .redactor-dropdown .redactor-formatting-YOUR_CSS_CLASSNAME. This also is important:
formattingAdd can only be applied to p, pre, blockquote and header
tags.
So you can't apply it to <div>. If you need block element, use <p>. Also, if you need inline, you CAN use <span>... it works, see fiddle: http://jsfiddle.net/a4df10vj/1/
I have an item that looks like this:
items: [{
xtype: 'box',
html: '<img src="http://chart.apis.google.com/chart?mychart" alt="" style="text-align:center" />',
name: 'first',
id: 'first',
align:'center',
style:
{
float:'left',
padding: '0px 0px 10px 0px',
},
width:'100%'
}]
I am trying to get it aligned center, I have tried putting in a custom style (underneath padding:) but it says unrecognized character in "text-align". I've also tried putting align:'center' which isn't doing anything at all, but its not causing any errors.
Last thing I did (getting desperate) I added in an inline-style for text align but the box that its inside needs the style not the actual html.
I've tried looking through the documentation and couldn't find text-align under the style doc.
Thanks!
Using text-align without quoting it isn't valid syntax for an object literal. c.f. "JSON syntax for property names".
style: {
...
text-align: 'center'
...
}
... should instead be ...
style: {
...
"text-align": 'center'
...
}
It also sounds like you're likely to have more luck with vertical-align or line-height than text-align.
text-align only works on child elements, you have a couple of choices here:
Use the deprecated html properties valign="middle" and align="center", which work on the current element.
Put a div around the img and then put style="text-align:center", just remember that text-align only works on inline elements. (img is inline).
You can write a css class in Main.scss file ,declare all the aligning properties in that and apply class in your component where you're using it in js file,using
cls:"align-Items",
in scss file
.align-Items{
vertical-align: top;
}