Kendo MVC Spreadsheet - Modifying cell text orientation to a 90-degree angle

My issue may seem trivial, but I'm struggling to achieve the desired behavior.

Working with the Telerik MVC framework, my current task is to create a Spreadsheet that matches a specific template. However, in this template, there are cells in the header rotated by 90° (or 270°). It appears that Telerik does not have a built-in feature to rotate these cells through properties or functions. Therefore, I am attempting to use CSS for rotation.

I have managed to rotate the cells using basic syntax (tested in Chrome - one line of code is sufficient).

transform: rotate(270deg);

Now, I've encountered a new problem. The rotated text extends out of the cell, making some parts of it invisible. I cannot figure out how to adjust the positioning. While setting the verticalAlign property to center works as a temporary fix, I prefer the text to align to the left after rotation (which means towards the bottom of the cell). Since the div containing the text is relatively positioned, I have attempted adjusting the top values, but it doesn't yield the desired result.

Do you have any suggestions on how to keep the text rotated and positioned towards the left (bottom)?

Here's a dojo example for reference: Cell A1 is vertically centered, while B1 should be placed at the bottom-left with text extending outside the cell.

DOJO Example

csskendo-uiteleriktelerik-mvckendospreadsheet

Answer №1

You can enhance your design by utilizing the CSS properties of text-orientation and writing mode. For more information, check out this useful resource.

Remember that when using the background property for a cell, the color will be applied to the entire cell area, not just the text within it.

<style>
  .k-spreadsheet .k-spreadsheet-cell > .k-vertical-align-bottom {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: grey;
}

  .k-spreadsheet .k-spreadsheet-cell > .k-vertical-align-center {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: grey;
}
  </style>
    <div id="spreadsheet"></div>
    <script type="text/javascript" charset="utf-8">
        $("#spreadsheet").kendoSpreadsheet();
        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
        var sheet = spreadsheet.activeSheet();
        sheet.rowHeight(0, 75);
        sheet.range("A1")
             .value("Lorem ipsum")
             .verticalAlign("center")
             .background("rgb(167,214,255)");
        sheet.range("B1")
             .value("Dolet semper")
             .verticalAlign("bottom")
             .background("yellow");;
    </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can we implement a variety of site designs based on the size of the window?

Utilizing media queries allows us to modify the CSS for various screen sizes. My inquiry is: can we switch to a completely different page layout (or View in MVC) when the window size, specifically when the width is less than 500? Assuming that the control ...

cssasp.net-mvc

Enhance Chart JS by adding scroll functionality for handling large amounts of data

I'm encountering an issue with chart js. When displaying thousands of entries in a single chart, the density makes it difficult to read. I am looking for a way to implement a scrollbar when the data surpasses a certain threshold (or when there is a sp ...

javascripthtmlcsschart.js

Creating a Bootstrap layout with columns of varying heights

My current setup looks like this: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content&l ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Leveraging bootstrap for achieving vertical and horizontal centering of images

My webpage uses bootstrap to display content, and while I've managed to center my images vertically, I'm facing an issue with horizontal centering. I want to ensure that any image, regardless of size, remains within the column/row and adjusts it ...

htmlcssbootstrap-4

What is the best way to disable the appearance of an HTML checkbox?

Is there a way to make a checkbox readonly, but still have it appear disabled or grayed out? I want it to function like this: <input type="checkbox" onclick="return false;"> If anyone knows how to accomplish this, please share yo ...

javascriptjquerycss

Adjust the height of the card body to match the horizontal bootstrap 5 card image

Is there a way to use Bootstrap 5.1.3 to make the image fill the height of the card's body and footer, while also ensuring the card-footer is placed at the bottom of the card? The desired outcome: <link rel="stylesheet" href="https://cdn.jsdeli ...

htmlcssbootstrap-5

After incorporating some movement effects into my menu, suddenly none of the buttons were responding

While working on my website and trying to add a close menu button, I encountered an issue where all the menu buttons stopped functioning. Here is the HTML code snippet: <div id="openMenuButton"> <span style= "font-size:30px;cu ...

javascripthtmlcss

Tips for effectively handling repetitive bootstrap CSS code

As part of my coding routine, I often utilize the following code snippet to center specific content: <!-- horizontal --> <div class="d-flex align-items-center justify-content-center h-100"> .. </div> <!-- vertical --> & ...

cssbootstrap-5

Changing the Row's Background Color in Angular When the Button is Clicked

My code includes a list where each row has a button to open a sidebar. Due to the large number of elements in the list, I want the background color of the row to turn yellow when the button is clicked, as a way to indicate what has been selected. Currently ...

javascripthtmlcssangulartypescript

Removing margins in Bootstrap 5: A step-by-step guide

Currently facing an issue with removing margins in bootstrap. I am looking to set up two graphics that indicate the under construction status of the page - one for desktop and one for mobile devices. This is what I have tried so far: <!DOCTYPE html> ...

cssbackgroundbootstrap-5paddingmargin

toggle the outer div along with its corresponding inner div simultaneously

On one of my pages (let's call it "page1"), I have multiple divs, some nested within others. These divs are initially hidden and toggle on when a specific link is clicked (and off when clicked again). To view a nested div, the outer div must be opened ...

javascripthtmlcssnested

What is the best way to modify tabulator styles?

Is there a way to update the column header in Tabulator using inline style when trying to avoid ellipsis as the column size is reduced? <VueTabulator ref="tabulator" v-model="receipts" :options="options" style="white ...

cssvue.jstabulator

Using CSS to break or wrap long words in text

I have a div that spans the width of the page. I'm looking to ensure that a very long word in this div breaks and wraps properly, so all the content stays within the screen width and doesn't overflow beyond 100%. Although I've attempted usi ...

htmlcss

Are you searching for a stylish tabbed navigation menu design?

I am searching for a tabbed navigation menu specifically designed to showcase images as the tab items. Here is an example of what I have in mind: <div class="menu"> <a href="#"> <img src="images/Chrysanth ...

jquery-uicss

Struggling with aligning two divs side by side on an HTML page

Recently, I've been experimenting with Electron and attempting to create 2 divs side by side. Despite trying various alignment options found here, nothing seems to be working for me. Here's the code I have so far: Code body, html { hei ...

htmlcss

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...

javascriptcss

Adjust the size of the font in accordance with the value of the span text

I am looking to adjust the font size based on the value within the span element. The numbers in the class name may vary. Issue: using text() retrieves all values (e.g. 50020) I want to incorporate each() and $this in some way. How can I do this? Thank ...

javascriptjqueryhtmlcss

The concept of CSS div wrapping and managing vertical whitespace in web design

My goal is to make multiple div elements wrap to the next line when the width of their container is changed. The wrapping part is working fine, as the boxes drop to the next line when there isn't enough width for them to fit. However, I am facing an i ...

jquerycsshtml

Why does Chrome DevTools evaluate JavaScript before recalculating styles?

According to an article, CSS is considered render-blocking, so JavaScript will evaluate after constructing a CSSOM (also known as recalculating styles in dev tools). However, it appears in Chrome dev tools that JavaScript is evaluated before CSSOM. Why is ...

javascripthtmlcssgoogle-chrome-devtools

The Bootstrap column is causing a cropping issue on the left side of my rows

I'm currently working on a Python/Flask/HTML project that utilizes Bootstrap 4 for a grid system with multiple rows and columns. However, when I attempt to run the project, a few pixels get cut off on the left side of the screen. I've thoroughly ...

htmlcssbootstrap-4