I want to hide the 'Upload file' button of kendo upload since I am using my custom button for uploading file.
I have written the code on select file of kendo upload as,
function onSelect() {
$('.k-upload-selected').css("display", "none");
}
I have tried with the following css also,
.k-upload-selected{
display: none;
}
But the upload button is still there...
Please help me..
You can simply use
$(".k-button.k-upload-button").css("visibility", "hidden");
after initializing the widget. Example Dojo
for hide:
$('.k-upload-selected').css('visibility', 'hidden');
for completely removing
$('.k-upload-selected').remove();
Dojo example
You simply use
<style>
.k-clear-selected, .k-upload-selected{
display: none !important;
}
</style>
Dojo example
If you are using Kendo for Angular you need to set encapsulation in the component to ViewEncapsulation.None.
#Component({
selector: 'upload-selector',
templateUrl: 'upload.component.html',
styleUrls: ['upload.css'],
encapsulation: ViewEncapsulation.None
})
Related
I applied kendo editor on a div element rather using textarea as it's giving some issues in iPad. Now, I don't want the editor to have toolbar to format text.
I tried applying styles as none & set tools to an empty array but still the toolbar appears with a draggable button in it.
<div id="targetdiv" contenteditable="true" style = "resize: none;width:
100%
!important; height:150px; max-height:150px;max-width: 100% !important;">
</div>
<script>
$("#targetdiv").kendoEditor({
tools: []});
</script>
The toolbar appears though the editor it initialized with no tools, as in image below.
Approach 1: (Not working)
<style>
.k-editor-toolbar
{
display:none;
}
</style>
Approach 2: (Not working)
$('.k-editor-toolbar').hide();
Approach 3: (partially works)
Added a select event but still the toolbar appears for an instant and then disappears.
$("#targetdiv").kendoEditor({
tools: [],
//Fires when the Editor selection has changed.
select: function (e) {
let editor = $("#targetdiv").data("kendoEditor");
editor.toolbar.hide();
});
If you don't want to show the toolbar define an empty tools in the KendoUI editor initialization:
$("#editor").kendoEditor({
// Empty tools so do not display toolbar
tools: [ ]
});
If you want to disable the edition, you should use:
$(editor.body).attr('contenteditable',false);
you can try this one as well
.k-editor-toolbar
{display:none !important;}
Finally,
I have to subscribe for the open event of the editor toolbar and prevent its execution. This resolved my issue.
let editor = $("#targetdiv").getKendoEditor();
editor.toolbar.window.bind("open", function (e) {
e.preventDefault();
});
I can remove every single button from the toolbar but not this imagepicker button.
I tried to remove it with removePlugins: 'pickimage,image' and removeButtons: 'Image' plus a few more variations in the config where I could remove the other buttons.
Any hints or help is appreciated.
This Button:
try this in javascript code.
<script type="text/javascript">
$(document).ready(function () {
CKEDITOR.config.removeButtons = 'Image';
});
</script>
Open link and Check it.
enter image description here
The imagepicker in ckeditor 4.* can be removed with this setting:
"removeButtons":"PickImage"
I've tried several methods to disable scroll, including using CSS position: fixed, attribute overflow-scroll="false" and etc, but all methods failed.
When I swipe down, the buttons will go up and while I swipe up the buttons will go down, like bouncing effect.
May I know any solutions to this issue? Thank you very very much.
Tested with ionic 3 (should work on ionic 2):
<ion-content no-bounce></ion-content>
I solved same problem using css. (Ionıc 3.6)
Step1: In ion-content add a new class :
<ion-content class="no-scroll">
Step2: In your CSS add the code below :
.no-scroll .scroll-content{
overflow: hidden;
}
The ion-content has a class called 'scroll-content'.
With that in mind, go to your app.css, inside the src/app and add:
app.css:
.scroll-content{overflow-y: hidden;}
That should leave your ion-content with no scroll, but I'd rather user:
app.css:
.scroll-content{overflow-y: auto;}
since this allows the scroll-content only if the page content overflows the ion-content.
This works in ionic 5:
ion-content {
--overflow: hidden;
}
<ion-content scroll-y="false">
For disable scroll in ion-content can use setScrollDisabled() method. You should follow steps below.
In hello.ts
import { app } from 'ionic-angular';
public class HelloPage
{
constructor(private app: App) {};
ngAfterViewInit(){
this.app.setScrollDisabled(true);
}
}
If you don't want the scroll you may also don't need the ion-content itself, in my status for example I want to use the ion-grid directly.
<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">
</ion-grid>
and I added some scss for the has-header class:
ion-app {
&.md {
.has-header {
margin-top: $toolbar-md-height;
}
}
&.wp {
.has-header {
margin-top: $toolbar-wp-height;
}
}
&.ios {
.has-header {
margin-top: $toolbar-ios-height;
}
}
}
Content is placed in the scrollable area if provided without a slot. To show a fixed content add slot="fixed".
<ion-content>
<div slot="fixed">
</div>
</ion-content>
As iflagri posted in this issue and #shaneparsons pointed in the comments, using
<ion-content padding>
<div ion-fixed>
Your content here...
</div>
</ion-content>
Solve the problem.
Hope it help!
If you want to disable the content scrolling you can use
<ion-content [scrollY]="false" >
https://ionicframework.com/docs/api/content
<ion-content [attr.noScroll]="shouldScroll"></ion-content>
// scss file:
[noScroll] {
overflow: hidden;
}
Surprisingly, no-bounce attribute did work on my previous project and is not working on a new project that I am currently working on.
I tried #rodrigo-chave's solution with ion-fixed. It solved the scrolling problem, but made my content small (as if was zoomed out). Adding 100% CSS width and height properties fixed it.
<ion-content no-bounce>
<div ion-fixed style="height: 100%; width: 100%">
...
</div>
</ion-content>
I'm currently using jQuery Waypoints to highlight nav items as you scroll through sections of the page. All of that works fine; thanks to copying the code from the demo at http://imakewebthings.github.com/jquery-waypoints/.
My demo is: http://www.pandlmedia.com/index.php/index_new
However, I also want to create a waypoint at the #footer div which would trigger an event to change the color of all of the nav links.
$('#footer').bind('waypoint.reached', function(event, direction) {
$('.nav ul a').addClass('white');
});
This doesn't work, as there's nothing telling it to change back once it exits the #footer div. I'm not very experienced in writing jQuery or using this plug-in for that matter. What do I need to add to make this work? Is the fact that there are two levels of waypoints also causing problems?
well, looking closer at the "sticky elements" demo, I was able to modify the example of the disappearing '.top' button to make this work for my own needs described above:
<script type="text/javascript">
$(document).ready(function() {
$('.container .nav ul a').addClass('black');
$.waypoints.settings.scrollThrottle = 30;
$('#footer').waypoint(function(event, direction) {
$('.container .nav ul a').toggleClass('black', direction === "up");
}, {
offset: '50%'
});
});
The key was to add the .black class below the .white class in my css so that it overrides the color parameter properly.
Anyone knows a JQuery plugin for BlockUI that allows blocking a specific DIV, not just the whole page. Thanks.
You can do it thru blockui plugin
You can do this natively with BlockUI: http://jquery.malsup.com/block/#element
$('div.test').block({ message: null })
$.blockUI({
message: $("#divid"),
css: {
position: 'absolute',
}
});