I was wondering if anyone knows if it's possible and how to limit a calendar entry size so it doesn't look like in the example. I don't want to span all the way to the right I want to have a fixed width as the size to the right doesn't define time as the height.
There is no option to limit the width of calendar entry in declarative way but here is an alternate solution. Although, I wouldn't recommend limiting the width as it goes against the responsive design of Oracle APEX Theme UI.
Step 1: Update SQL Query, specifically CSS_COLUMN to have something specific to get handle of the entry. It is better than using predefined classes.
select
1 id,
sysdate start_date,
sysdate + 1 / 24 end_date,
'sample text for calendar entry' task_name,
'event-style apex-cal-green' css_class, -- update class
'Assigned to KD' as supplemental_info
from
dual
Step 2: Enter inline CSS in page property to limit the width of calendar entry. Try to work with different property values of CSS style width if the example below does not help.
.event-style {
width: min-content;
/* width: 100px; */
/* width: 20%; */
}
That's it. Final result should look like the one in the image.
Related
My goal is to make functionality that inserts N (chosen by user) inline images into a block (where N is greater than 2) and sets calculated width for each of them in order to make them all the same height.
Visual representation: link to image
In documentation I didn't find how to make it programmatically. Do I miss something?
If I select manually an image, then apply the command:
editor.execute( 'resizeImage', { width: '25%' } )
... the resizing is OK.
But if I set the height while inserting an image:
editor.model.change( writer => {
let oImageElement = writer.createElement( 'imageInline', {
src: sFile,
linkHref: sLink,
height: '25%'
});
});
... it doesn't work.
Any idea how to achieve the desired result?
UPDATE (23 Sep 2022):
The same day I published the question here, I found a workaround by inserting html fragment as described here:
https://ckeditor.com/docs/ckeditor5/latest/support/faq.html#how-to-get-the-editor-instance-object-from-the-dom-element
But I am curious if anyone have a solution or actual answer to the question.
I need to randomly select a single cell from a 5X5 table and change its background color. I would like to do this by choosing a random index location in the table.
I want to do this:
table > tr:nth-child(Random Number between 1 and 5) > td:nth-child(Random number between 1 and 5){
background-color: aqua;
}
I figured it out. Used this:
let selected = document.getElementById("table").rows[Math.floor(Math.random() * 5)].cells[Math.floor(Math.random() * 5)];
selected.id = "selected";
Ideally I would generate the random numbers, one for the and one for the in javascript and then pass the value to the css style sheet.
assign an id to the tds and make an array that contain the ids of these cells choose randomly from the array and change the style color of the cell matching the id
you might need to use javascript
PS if my answer helped you please upvote or choose it as answer if it was what you're looking for
I am facing a problem with the Kendo Grid width. I want the grid to stretch to fit the content of the grid. This grid which I am working on is created dynamically, so at times it may have just 2 columns and at times it may have max 5 columns. I don't want the grid to expand and take the whole page for showing just two columns.
To get this working I added the following css
.k-grid table{
display: inline;
}
The problem is that when this style is applied, it completely messes up the column header and column alignment. Does anyone know how to fix this?
Actually this is really simple. But I wasted lot of time cause I did not get the correct source. You just need to implement following things.
Make the grid sortable: false
and use this CSS
#gridId table {
width: auto;
}
But with this you loose the scrolling feature. But you can wrap your kendo grid in another container and implement your own scrolling.
var grid = $("#kendoGridName");
grid.width(400);
Rather than trying to apply some css you could use some jQuery to perform this task. I do something similar in terms of height. So maybe something like this would work for you (I have modified this to do height and width).
function resizeGrid(size) {
if (size === null || size === undefined) {
size = 0.6;
}
var windowHeight = $(window).height();
var windowWidth = $(window).width();
windowHeight = windowHeight * size;
windowWidth = windowWidth * size;
$(".k-grid-content").height(windowHeight)
$(".k-grid).width(windowWidth);
}
so all this function does is scale the grid based on the current window size so for example if you want the grid to take up all the available space ie max height and width you would call resizeGrid(1) if you wanted it smaller say to take 50% of the screen size then you would use reszieGrid(0.5) if no value is used then the function just goes with a default of 60% of the available width/height.
so you could call this after your initialization of the grid and then scale the grid to an appropriate size.
by targeting the kendo css classes it makes this function easier to reuse.
if you need more info let me know.
Here is the plunker created http://plnkr.co/edit/5DhDmI1Odhrys4jYDwIB?p=preview
I have associated textbox with ng-grid filter.
$scope.filterOptions = {
filterText:''
}
$scope.$watch('filterText',function(){
$scope.filterOptions.filterText=$scope.filterText;
});
If you enter "moroni" in the text box, only one row in grid will be displayed. But at the right, white space is visible. Is there a way to fix it.
First row in the plunker example is having very big string, When text is very long, only part of it is displayed. Is it possible to break the string and display it in multiple lines.
You can fix the text not wrapping issue by setting the rowHeight in gridoptions to value that fits your longest string:
rowHeight:50
And add this definition to your css:
.ngCellText {
white-space: unset;
}
The width whitespace issue is clearly a bug in ng-grid. This grid is not really a table but a lot of positioned and measured divs that look like a table. Seems the developers forgot to add some extra width to the row when no scrollbar is visible. You can only overcome this if you patch the code (not recommended) or setting the gridheight to a value in which all rows can be displayed without scrollbars.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px;
height: 300px
}
Look at this Plunker.
Anyhow, since these are mere unpractical hacks, I suggest you have a look at table based directive like trNgGrid which has all the features of ng-grid but is way more flexible when it comes to dynamic row heights.
When I have a result set with several hundred columns, the header wraps back to the left side of the web page and takes up two rows. The correlation between header positions and column positions in the data also is not correct toward the end of the first line of header cells.
It appears that the width of the header is fixed to 10000px and the width of the row cells can be much wider and this is what is causing the rendering problem.
The style for slick-header-columns is set explicitly by slick.grid.js to: style="width: 10000px; left: -1000px".
When I inspect the css via firebug in this wrapping state, I see that the width of each slick-row is set to: 12805px. When I manually change the width of the slick-header-columns width to 15000px, the rendering is correct and the header no longer wraps.
Is there a way to programatically update the header width so that it can hold all of the column cells?
My solution to this problem was to modify the setCanvasWidth function in slick.grid.js so that it updates the header width as well as the canvas width:
function setCanvasWidth(width) {
$canvas.width(width);
if (width > $headers.width()) {
$headers.width(width + 1000);
}
viewportHasHScroll = (width > viewportW - scrollbarDimensions.width);
}