Allow users to manually resize <td>'s within a platform

Looking for a way to allow users to manually resize a textarea and iframe in a system I am developing. Here's an example of what I mean:

<body>

    <table width="100%">
        <tr>

        <!-- I want the user to be able to resize the width of the <td>'s manually -->

            <td width="30%">
                <textarea style="width:100%; height:100%;"></textarea>
            </td>
            <td width="70%">
                <iframe style="width:100%; height:100%;" src=""></iframe>
            </td>
        </tr>
    </table>

</body>

Would appreciate any assistance, thank you :)

htmlcssresize

Answer №1

Give this a shot:

<!DOCTYPE html>
<html>
<style>
    td
    {
        position:absolute;
    }
    .adjustable
    {
        min-width:80%;
        min-height:80%;
        width:80%;
        height:80%;
        position:absolute;
        display:inline-block;
        resize:vertical;
        overflow: hidden;
        border:2px solid red;
        box-sizing: border-box;
    }
</style>
<body>
    <table width="100%">
        <tr>

        <!-- Try allowing users to manually change the height of the <td>'s -->
            <td style="width:40%">
                <div class="adjustable"><textarea style="width:100%; height:100%;"></textarea></div>
            </td>
            <td style="width:60%">
                <div class="adjustable"><iframe style="width:100%; height:100%;" src=""></iframe></div>
            </td>
        </tr>
    </table>
</body>
</html>

Check out the Demo

Just wanted to spark some creativity.

What I've done is straightforward, for each td, insert a resizable div that fills the td entirely, then place all content inside the div. Resizing the div will automatically adjust the size of the td.

Feel free to tweak the styling to meet your requirements.

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

Adjust the GTK3 tooltip color exclusively for Eclipse when it is operating on Ubuntu

I am using Eclipse Mars on Ubuntu 15.04 and looking to customize the GTK3 tooltip fg/bg color specifically for Eclipse without impacting other applications. I have come across instructions for changing this color system-wide, but I need guidance on how t ...

javacsseclipseubuntugtk3

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

Can anyone guide me on how to show the text above an image contained within a scroll bar, similar to the picture below? Despite trying position property and searching online, I haven't found a solution yet. Your help would be greatly appreciated. ...

htmlcss

Tips for designing a three-line label: positioning text in the middle, above, and below

I have a label that looks like this: https://i.sstatic.net/q0DaR.png Is there a way to position 'Lorem ipsum' perfectly in the center between 'dolor' and 'amet'? https://i.sstatic.net/aJapG.png - reference image T ...

htmlcssbootstrap-4css-position

Obtaining JSON data using Jquery results in the output of "undefined"

I am struggling to extract the correct values from a JSON document in order to display schedules in list view. Currently, when accessing the JSON document, I keep receiving "undefined" as the result. Below is an example of the JSON document: { "Ferries": ...

jqueryhtmljson

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...

cssreactjswebkitkebab-case

Troubleshooting problem with AngularJS and jQuery plugin when using links with # navigation

I have integrated a specific jquery plugin into my angularjs single page application. The primary block can be found in the following menu: http://localhost:81/website/#/portfolio This menu contains the following code block: <li> <a href=" ...

javascriptjqueryhtmlangularjs

Troubles with CSS Child Hover, Rotation, and Clipping in Pie Chart styling

The issue I am facing is with a 3-section pie chart where all sections look virtually identical. However, the :hover effect does not trigger on the first section, but it works on the other two. Each element has an equal number of overlapping parent divs, ...

htmlcsshoverclip

The video link was not found during the page scraping process

I'm trying to download a video from the page below: After inspecting with Firebug, I found the video url, <video src="https://09-lvl3-pdl.vimeocdn.com/01/1449/2/57246728/138634997.mp4?expires=1457996449&amp;token=089e435c20e7781d36fce" preloa ...

pythonhtmlseleniumvideoweb-scraping

Tips for creating a mobile-friendly Bootstrap carousel that is both scalable and zoomable while maintaining the default slide functionality

I have a website using Bootstrap 4.x carousel. The layout is user-scalable with the following viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, shrink-to-fit=no">. Currently, users can pinch to z ...

csstwitter-bootstrapbootstrap-4

What is the best way to create a repeating Jquery loop in code?

Hey there! I've been working on creating a button that toggles the background color from white to yellow and back again using Jquery. However, I've hit a bit of a roadblock with implementing a loop function. If you'd like to take a look at m ...

jqueryhtmlcss

Tips for customizing Bootstrap theme color schemes in a React/Redux application that has been bootstrapped

As a newcomer to REACT, I am facing an issue with changing the theme colors in my freshly bootstrapped react application. I have gone through some solutions suggested by others but none of them seem to work for me. My entry point looks like this: import ...

cssreactjssassbootstrap-4

PHP data insertion using filters and validation

I have created a database and implemented a validation system to ensure that fields are not left empty. If the fields are filled and pass through the sanitization function, I then proceed to save the data in the database. <?php // Define variables as ...

phphtml

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

How can I display selected cities on a different webpage after clicking a button? Currently, I can only get the results on the same page. For example, if a user selects NYC and Delhi, those cities should be displayed on another HTML page. ...

javascripthtmljquerycss

Obtain the checkbox status using node.js

I'm trying to access the checkbox value from req.body in a node.js application. However, when I log it, it keeps showing as 'undefined.' HTML <label> <input name='sell' type='checkbox' value='fals ...

htmlnode.jscheckboxrequest

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...

jqueryhtmlcss

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Trying to apply a filter effect using CSS but encountering issues in Firefox: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80 ) opacity: 0.5; -moz-opacity: 0.5; Any s ...

cssfirefox

JavaScript code to modify a table row

I have a dynamic table that increases with Firebase data, and I am trying to incorporate a delete and edit button on each row. While the remove button is working fine, I am facing issues with implementing the edit functionality. Although I came across some ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

The title in my div class doesn't seem to be properly centered, even though I have set the margin to auto. What steps can I take to correct this issue?

My div is set to have a margin:auto, but the h1 inside is not centered as expected. I've tried various solutions, but none seem to work. Can someone please help me get it centered properly? body { background: #5D6D7E; color: wh ...

htmlcsswebmargin

A step-by-step guide on using a loop to display three images per row

The issue at hand is quite logical... I'm attempting to create a photo gallery by fetching image URLs from a database... The problem arises when I try to display them in HTML. I'm using bootstrap for the layout, where each row should contain 3 im ...

phphtmlbootstrap-4logic

Navigating through sibling elements can be accomplished by using various methods in

Can someone help me figure out how to assign unique IDs to 6 different Div elements as I step through them? The code snippet below is not working as expected, giving all Divs the same ID. What is the correct way to accomplish this task? $('#main-slid ...

javascriptjquerycssiterationstep-through