In this sample can I change the button select Files to this add files with the plus sign? Can I just used this k-button class and using Bootstrap4 class?
https://blueimp.github.io/jQuery-File-Upload/
https://dojo.telerik.com/#mcdevittnccn/ujOHacoM
Set the localization.select (documentation) value to specify the text. Then use jQuery to add the custom classes and icon.
$("#files").kendoUpload({
localization: {
select: "Add Files..."
}
});
$("#files").closest('.k-upload-button').addClass('btn btn-success'); // add the bootstrap classes
$("#files").closest('.k-upload-button').removeClass('k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'); // remove the kendo classes
$("#files").closest('.k-upload-button').prepend('<span class="k-icon k-i-plus"></span>'); // add the icon
Example: https://dojo.telerik.com/aJaHeMOq
Related
When placing a TinyMCE editor inside a bootstrap modal, the editor is visible and functioning, however when clicking a menu item the menu doesn't show up.
Add the folowing css
.tox-tinymce-aux {
z-index: 999999!important;
}
Bootstrap blocks all focusin calls from elements outside the dialog. To render TinyMCE instances inside a Bootstrap dialog, add the following code:
// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
e.stopImmediatePropagation();
}
});
Here is an example: http://fiddle.tinymce.com/gRgaab
I have website with user can choice date_range, so i use datepicker element-ui. But datepicker default theme, how i can change that in vue.
At present, Element-UI doesn't provide the function of highly customized theme, only simple customized size and color.
However, you can customize the style with the following configuration:
popper-class - custom class name for DatePicker's dropdown
picker-options - You can set custom class name by creating a picker-options object with cellClassName property.
You can override the default style with a custom class.
Example:
// template
<el-date-picker v-model="value1"
type="date"
popper-class="custom-date-picker"
placeholder="Pick a day">
</el-date-picker>
// css
.custom-date-picker{
.el-date-picker__header{
// custom header style here
}
}
this working for me, Element Plus with Vue 3!
In App.vue
<style lang="scss">
.el-date-editor {
--el-date-editor-width: 40% !important;
}
</style>
You need to just add style inside the tag like
<el-date-picker v-model="value1"
type="date"
popper-class="custom-date-picker"
placeholder="Pick a day"
--> style="width: 100%" />
The docs are clear on using error styles for form inputs such as text fields. But how do I use the same style on a custom element such as a text label for a file upload button, or any other custom component that might not fit the a pre-defined component?
Edit for clarity: I don't want to just choose a color I like and plop it in my css with an appropriate selector. I want to make sure I'm using the same error color as the theme, whether that's the default, some imported theme, or custom (if custom it's pretty easy, but not DRY, to just use the same value in css).
Specifically, in this use case, I want to limit users to uploading files less than 100MB, and display an error message if they have selected a file larger than this limit. I'd like to display the text in the error style of the configured theme, but from the material-ui docs I can only see how to set error properties of pre-packaged components such as text fields.
So here I have, simplified:
<input
accept="video/*"
id="file-upload-button"
type="file"
onChange={(e) => {this.fileChanged(e);}}
/>
<label htmlFor="file-upload-button">
<Button variant="contained" component="span" color="default">
Browse video
</Button>
<br /><small>(Max size: 100MB)</small>
</label>
where the input tag has display: none applied via a css file. Also,
fileChanged(e) {
let file = e.target.files[0];
let sizeMB = file.size / 2**20;
this.setState({
selectedFile: e.target.files[0],
fileTooLarge: sizeMB > 100
});
}
How do I get the theme's error color to apply it to the "Max Size" message or other element?
3 steps to solve your issue:
You have to inject the theme into your app with the theme provider (apply to v3 MUI, but should be similar with v4 now). See doc.
You can then customize the theme, like such:
const theme = createMuiTheme({
palette: {
error: {
main: "#ff604f"
}
}
}
Finally you can use your custom color by injecting styles into your component with withStyles() (or useStyles() in v4 hook for instance) and create your styles const in your component, example:
const styles = theme => ({
button: {
backgroundColor: theme.palette.error.main,
}
}
Note: using error as a palette variable name will override the
default error color value.
Possible duplicate of:How to add a class with React.js?
You could give an ID and then: getElementById.classList.add("errorClass");
Then if the user uploads the proper size: getElementById.classList.remove("errorClass");
How would i use css to style this array? my css that I am using right now is not working, I am using a separate style sheet.
enter image description here
I'm assuming, you want to stylize not the array but the html list of items, which you are creating using the array.
You can do it (stylisation) just adding to your css file next rule
li {
// your css properties go here
}
If you have more than one list on the page and you want add some styles only for this list, you can add some class name to the list you are creating by this php code. To do so you can change the code inside foreach statment:
foreach () {
print "<li class='my-list'>";
...
}
Then you might add to css next rule wich will apply only to this specific list
li.my-list {
// your css properties go here
}
Google Closure Library editor: demo, documentation.
The editable area is an iframe. How can I set the default font of the editable area? Now it is the default font of the browser. I prefer not to put a font tag around the content in the editable area**. That way, I can change the font of my website in the future, without the need to modify every HTML-content written in the editor.
** What I mean by that is something like this:
<font size="2" face="georgia, serif"><b>content</b></font>
I would prefer just this:
<b>content</b>
... and then style the editable area of the editor with the georgia font using CSS. That way, the HTML-content (produced by the editor) in my database wouldn't contain a hard-coded font, so I could change the font in the future.
Edit: maybe I should use a SeamlessField instead of a Field for the editable area?
Once you call makeEditable() on the goog.editor.Field, which creates the iFrame you referenced, the Field fires an event of type goog.editor.Field.EventType.LOAD. If you listen to that event, you can pull out the iFrame and toss in a link element to a CSS stylesheet so you can easily modify the content in your editor.
Here's the equivalent of one of my listeners that should get you on the right track. (I didn't check if the goog.editor.Field was the target of the event, but I assume it is).
some.namespace.Page.prototype.onEditorLoad_ = function(event) {
var editor = /** #type {goog.editor.Field} */ (event.target);
var iFrame = editor.getEditableIframe();
if (iFrame) {
var fieldDomHelper = editor.getEditableDomHelper();
var documentNode =
fieldDomHelper.getFrameContentDocument(iFrame).documentElement;
var head = documentNode.getElementsByTagName(goog.dom.TagName.HEAD)[0];
if (!head) {
head = fieldDomHelper.createDom(goog.dom.TagName.HEAD);
goog.dom.insertChildAt(documentNode, head, 0);
}
fieldDomHelper.appendChild(
head,
fieldDomHelper.createDom(
goog.dom.TagName.LINK,
{ 'href': '/css/myCSS.css', 'rel': 'stylesheet', 'type': 'text/css' }
)
);
}
}
Finally, in that CSS file, you can add whatever styling you want. Such as your font change.