Rotating an input 90 degrees within a div for unique positioning

I used JavaScript to make an input range vertical, like so:

var range_pitch = document.createElement("input");
range_pitch.setAttribute("type", "range");
range_pitch.style.webkitTransform = "rotate(90deg)";
range_pitch.style.mozTransform = "rotate(90deg)";
range_pitch.style.oTransform = "rotate(90deg)";
range_pitch.style.msTransform = "rotate(90deg)";
range_pitch.style.transform = "rotate(90deg)";

However, I am having trouble placing it inside a created <div>:

vertical_slider.appendChild( range_pitch );
document.body.appendChild( vertical_slider );

You can view my question on this JSFiddle link

If anyone has a solution, please let me know. Thanks!

javascriptjquerycsshtml

Answer №1

Visit the fixed jsfiddle link for more information

If you inspect the DOM in your browser console, you will notice that the input element is already nested within the div. All you need to do is adjust the CSS accordingly as shown in the example below.

I hope this explanation proves useful to you.

  var vertical_slider = document.createElement('div');
  vertical_slider.id = 'vertical_slider';

  var osa_y_panorama = 0.6;
  var range_pitch = document.createElement("input");
  range_pitch.setAttribute("type", "range");
  range_pitch.style.webkitTransform = "rotate(90deg)";
  range_pitch.style.mozTransform = "rotate(90deg)";
  range_pitch.style.oTransform = "rotate(90deg)";
  range_pitch.style.msTransform = "rotate(90deg)";
  range_pitch.style.transform = "rotate(90deg)";
  range_pitch.min = "0";
  range_pitch.max = "218";
  range_pitch.step = "0.6";
  range_pitch.defaultValue = osa_y_panorama;


  vertical_slider.appendChild( range_pitch );
  document.body.appendChild( vertical_slider );
#vertical_slider
{
  float: left;
  width: 40px;
  height: 218px;
  border: 1px solid blue;
}

input{
  position: relative;
  top:93px;
  right: 83px;
  width:200px;
}

Answer №2

Your issue stems from the CSS rotation applied to the input element. Although the element is technically inside, the rotation gives it the appearance of being outside.

To resolve this problem, you can apply the following CSS hotfix:

input {
  position: relative;
  right: 70px;
  top: 100px;
}

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

What is the equivalent of defining conditional string types in Typescript similar to flow?

type UpsertMode = | 'add' | 'update' | 'delete'; interface IUpsertMembers { mode: UpsertMode; } const MagicButton = ({ mode: UpsertMode }) => { return ( <button>{UpsertMode}</button> ); } const Upse ...

javascriptreactjstypescript

If element Div is labeled as either A, B, or C, it should smoothly fade out and then fade in as Div

I'm currently working on enhancing the navigation of my portfolio website and I’m facing a challenge in adding additional properties to my toggle() function. This basically involves creating a filter system with four possible options, which are: ...

jqueryhtmlcss

Center text in the v-text-field label

Greetings! I've attempted various methods to center the label in my v-text-field, but unfortunately none of them have been successful. Please see the code snippet below: HTML Code <v-text-field dark class="centered-input" label="your code">< ...

htmlcssvue.jsvuetify.js

Error: The addDoc() function in FireBase was encountered with invalid data, as it included an unsupported field value of undefined during the execution

As I attempt to input data into the firebase database, an error arises: 'FireBaseError: Function addDoc() called with invalid data. Unsupported field value: undefined'. The registration form requests 2 inputs - name and email. The function handle ...

javascriptreactjsfirebasegoogle-cloud-firestore

Refreshing data within HTML table through PHP and AJAX calls

I am struggling to find a way to dynamically update the table content on my web page using PHP and MySQL without having to refresh the whole page. I believe combining Ajax with PHP is the best approach for this, but I'm unsure of how to proceed. Desp ...

phpjquerymysqlajax

Unshifting values in a JavaScript array only if they exist in another array

I have two arrays of objects - one containing selected data and the other containing general data that needs to be displayed General data for display const arr = [ { id: "1", name: "Skoda - Auto" }, { id: "2" ...

javascripttypescriptjavascript-objects

Firing ng-change with fileModel or input type="file"

Is there a way to trigger ng-change when a change occurs with this file directive? I have implemented a custom file directive for this purpose. The Directive: app.directive('ngFileModel', ['$parse', function($parse) { return { ...

javascriptangularjsangularjs-directiveangularjs-ng-change

The object's type remains a mystery

While working on implementing jwt authentication in Ionic, React with TypeScript, I faced a typescript error when trying to add a check in my App.tsx file after successful implementation. The error stated: Object is of type 'unknown' Below is ...

javascriptreactjstypescriptionic-frameworkionic-react

Verifying unloaded images

I am new to using Selenium and I need help. I am attempting to retrieve all the image sources on a page in order to identify any images that have not loaded. How can I check the image sources? Can I use "null" as a check? Below is my code, which contains m ...

javahtmlselenium

Having trouble with submitting the code - need help resolving the issue

I'm facing an issue with my submit cancel code. The JavaScript code I implemented for preventing the submission function on my page isn't working as expected. While it does work to a certain extent, it's not fully functional. I am seeking a ...

javascriptc#jqueryhtmlasp.net

Guide to displaying a Highcharts graph in a pop-up window?

Looking for guidance on how to open a popup window and display a highcharts graph by clicking on a button in the main window. While I've come across various discussions and examples for opening a larger graph in a popup from an existing graph on the c ...

jqueryhighchartspopup

Unauthorized access detected during ajax request triggered by onpaste event

Recently, I encountered an issue with my asp.net mvc website where an ajax call to the server stopped working in IE 11, despite previously working fine in IE 8. The error message pointed to an access denied exception in jQuery 1.7.1 at h.open(c.type,c.url, ...

javascriptjqueryajaxcors

The alignment of the content within a div is mismatched compared to a div that doesn't have any

Can you figure out why the element with content is out of order compared to the other elements without content in the code below? This issue seems to disappear when all elements have content. Any insights on this peculiar behavior? (Thank you in advance fo ...

htmlcss

How to modify the background color in Material Ui's datepicker?

Is there a way to customize the background color of my Material UI datepicker modal? To change the colors, you can use the createMuiTheme function from "@material-ui/core": const materialTheme = createMuiTheme({ overrides: { MuiPickersToolbar: ...

javascriptreactjsdatepickermaterial-ui

Learn how to efficiently execute a function multiple times using pure JavaScript

I am trying to create a tabbed content functionality with multiple elements. How can I utilize the same function for various elements declared in a variable? For example, I want to clone the parent div.tabs element with similar content but different ids an ...

javascripthtmlclick

Utilizing Vue.js 2.x to send a REST API request with a collection of objects

I currently have an array of objects stored in state, and my goal is to send this entire structure to a back end API for processing and receive a new set of values in return. Below is a simplified representation of this structure as viewed in the develope ...

javascriptajaxrestvue.jsfrontend

What is the best method to adjust the scrollbar to the correct position on the table?

Currently facing an issue with adding a scrollbar on the right side of my table. I have tried using a jQuery plugin called table_scroll.js but encountering difficulties. The problem can be seen in this image: . Any assistance would be greatly appreciated ...

jqueryhtmlcssbootstrap-table

Flexible layout design for mobile devices

Check out how my desktop page looks: Desktop version If you want to see how it should appear on mobile, click here: Mobile Version This is the HTML/CSS code for the desktop version, and everything seems to be working fine. .skills { width: 80%; ba ...

htmlcss

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

javascriptjqueryhtmlcsscontenteditable

Is there a way to make all Bootstrap column heights equal using only jQuery?

I am currently working on matching the heights of two columns without using an existing library like match-height.js. In this specific case, I have a row with 2 columns where the first column contains a centered black square and the second column contains ...

javascriptjqueryhtmlcsstwitter-bootstrap