Is there anyway to change the caption of the upload button from "UPLOAD FILES" to whatever is required?
Thanks a lot in advance
Initial reply - for basic Vaadin
As per the docs you can use upload.setButtonCaption("My custom caption");. Am I missing something?
Later update - for Vaadin elements
In this case you can use its i18n localization property. Unfortunately, for me the suggestion in the book to change a certain part with
document.querySelector('vaadin-upload#en').i18n.addFiles.many = 'Add Files;
did not work. However,
document.querySelector('vaadin-upload#en').set('i18n.addFiles.many', 'Add Files');
as seen in their github samples seems to work just fine. Below a sample and screenshot
<body>
<vaadin-upload id="en"></vaadin-upload>
<script>
document.querySelector('vaadin-upload#en').set('i18n.addFiles.many', 'Add Files');
</script>
</body>
Result:
Related
I'm trying to create a link on my vue app to local pdf files. Right now here's my problem.
My pdfs are located in assets/static/ and presently linking to them like this.
<template>
<div id="forms" class="view-wrapper">
<h3>Downloadable Forms</h3>
Claim Form
</div>
</template>
This brings up a link on the page, but when I click it, I'm taken to a blank page on my app with just the navbar and footer and nothing in between. I'm hoping to have it bring up the document in the browsers pdf viewer in another tab. Some help would be greatly appreciated.
Edit: SOLVED: #dan helped me realize that I just had to use one dot to access my assets folder.
To render a pdf in the browser use an <iframe src="path-to-pdf" />. Unless you're binding reactive data to the element you don't have to do anything different in vue. Check out https://stackoverflow.com/a/52644970/6890774 this is a similar issue.
JsFiddle is my laboratory but everything is at a halt at the moment because I cant get font-awesome to work in it. I tried using the space provided for external links but to no avail. I even added the link directly and it still didn't work.
I'm in the middle of an experiment and I'm not able to get it working. What is the correct way to add font-awesome to JsFiddle?
Just paste the href part of the CDN link
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
to External Resourses (on the left hand side panel) and click the plus sign.
See this jsFiddle for example.
Check this JSFIDDLE out. It is using an cdn URL in the CSS area.
#font-face{
font-family:FontAwesome;
src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix)
Import this script:
<script src="https://use.fontawesome.com/c3ef28c600.js"></script>
or
<script src="https://use.fontawesome.com/f83feeae10.js" ></script>
DEMO
Font Awesome 5
https://use.fontawesome.com/releases/v5.3.1/css/all.css
On the left sidebar of JSFiddle click Resources to open an input field.
Paste the above link into it.
Click the X button to add it to your fiddle.
For current versions and other options (free/pro versions etc) visit their info page on how to Use Font Awesome's Free CDN
I'm building a google-style text box that auto-completes typed text.
Using typeahead with typeahead.js-bootstrap.css:
$(document).ready(function() {
$('#op1').typeahead({
remote: '/search/%QUERY',
});
});
<input type="text" id="op1">
it worked but there are two problems:
I could not customize it. Whenever I make any significant style changes, or use bootstrap's form-control class for input element: the text box gets completely messed up.
The auto-completed ("hint") text was written above the typed text so I whatever color I set for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.
I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code
If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)
It gives you completely easy way to customise the look with formatresults. You can even write full html view for your results. and to customise the look of input box apply a class to the wrapper for your search box and override select2 rendered css(load the page and check from browser that from where that style is coming).
http://ivaynberg.github.io/select2/
I made a full featured customised search with this.
There is now a fork available for select2 that supports Bootstrap 3.
http://fk.github.io/select2-bootstrap-css/
https://github.com/fk/select2-bootstrap-css#readme
I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.
I am new to Extjs. I am using Extjs 4 in my project. When the ext-all.js is loaded it automatically adds classes to the <body> tag. and all my other css styles are changed with extjs styles. I found in the documentaion that to set Ext.scopeResetCSS property to true, so I add like below.
Ext.onReady(function(){
new Ext.Component({
scopeResetCSS: true
});
});
but it doesn't change any thing. I still have the same problem.
Is there any way to stop extjs from automatically adding css classes to the tags? Please help..
This is my code to generate a multi line message box.
<link rel="stylesheet" type="text/css" href="components/com_jobs/js/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="components/com_jobs/js/extjs/ext-all.js"></script>
<!-- extjs message box code -->
<script type="text/javascript">
Ext.require([
'Ext.window.MessageBox'
]);
function removeBid(bidid){
Ext.MessageBox.show({
title: 'Address',
msg: 'Please enter your address:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
//fn: showResultText
});
}
</script>
Am I doing anything wrong??? I want extjs to style only its own components. But now extjs styles are effects my whole page.. Please help.
Thanks.
The scopeResetCSS property is part of Ext.buildSettings, which is used at the beginning of the Ext JS initialization sequence. If you want to change it, you have to edit ext-all.js or change the settings in the Sencha JS Builder (which I'm assuming you're not using).
Open ext-all.js in your favorite text editor (one that can handle larger files, preferably) and search for "scopeResetCSS" near the beginning of the file, and you'll find it easy enough.
If you are using ExtJS 4.0.2a, then set the scopeResetCSS BEFORE the include.
However, I just switched to ExtJS 4.0.7 and the issue is back. :(
I asked a similar question for ExtJS 4.2.1 before coming across this one. The solution I adopted was to modify the DOM once ExtJS was loaded, and add a listener for the DOMNodeInserted event to watch for and handle the automatic creation of ExtJS components like pick lists. If you are interested you can find my answer here: https://stackoverflow.com/a/29934347/857209