Responsive Textarea on Image (Bootstrap)

Question

Somehow i cant figure that out. Hello everyone.

Ive got a simple frontend with a navbar and 2 Cols underneath. left col got fixed size of 80px, and the right one got an image inside (so this image is fluid / responsive).

To add an input field over the image isnt the problem at all, but here comes my blockade. I cant get the inputfield to be responsive to the size of the image.

So my thoughts was, to get the scale of the image and downscale the input.

something like this in JS

$(window).resize(function() {
    // 1192 is the original imagewidth
    let scale  = $(".step:visible").width() / 1192;

    let inputposition = document.getElementById(testid);
    inputposition .css('transform', 'scale(' + scale + ')');
    inputposition .css('transform-origin', 'top left');
});

now i thought about transform: scale(scale); on but this downscales the image too.

maybe someone of you can give me some food for thoughts.

So my goal is, that the inputfield minimizes as well reposition if the window resizes.

heres the sample code im workin with:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Test</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
    <script src="assets/js/jquery.min.js"></script>
</head>

<body>
    <nav class="navbar navbar-light navbar-expand-lg bg-danger clean-navbar">
        <div class="container"><a class="navbar-brand logo" >Test</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav ml-auto">
                </ul>
            </div>
        </div>
    </nav>
    <main class="page landing-page">
        <section class="clean-block clean-info dark" style="padding: 0px;">
            <div class="container" style="">
                <div class="row align-items-start" style="">
                    <div id="sidebar" class="col-1 d-md-flex flex-grow-0 flex-shrink-0 bg-danger active" style="max-width: 80px;min-width: 80px;height: 100%;padding:0px">
                        <ul class="list-unstyled components" style="padding:0px">
                            <li class="active" id="page1_li" style="position: relative; padding: 10px;">
                                <a onclick="function(this);" id="page1">
                                    <img src="thumb_page1.jpg" class="img-fluid" alt="Responsive image" style="width:100%">
                                    <div class="overlay">
                                        <i id="overlay_page<?= $i ?>" class=""></i>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col text-center bg-primary" style="padding: 0px;">
                        <form class="form-horizontal form" action="submit.php" method="post">
                            <div class="step " id="page1">
                                <div class="fullpage" style="" data-fullpage="fullpage">

                                    <img class="img-thumbnail align-items-center" src="page1.jpg" alt="" draggable="false" contenteditable="false">

                                    <!-- input that needs to be scaled -->
                                    <input type="textarea" id="testid" name="testid" value="" style="position:absolute;left:100px;top:150px;width:300px;height:100px">

                                </div> 
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

With best regards.

Answer 1

This is really simple. Don't add position:absolute to <input> but use <div> for that.

You need a <div> with position:relative as container. Add image with classes w-100 d-block to make it responsive. Create a <div> overlay and place content inside. <input> and <textarea> with class .form-control will have width:100% by default.

 /*DEMO*/body{padding:3rem} #overlay{ position:absolute; top:50%; right:3rem; left:3rem; transform:translateY(-50%); }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <div class="position-relative"> <img class="w-100 d-block" src="https://via.placeholder.com/400x300/007bff/ffffff" alt=""> <div id="overlay"> <input class="form-control" placeholder="Lorem Ipsum"> <hr> <textarea class="form-control" placeholder="Lorem Ipsum"></textarea> </div> </div>

Responsive Textarea on Image (Bootstrap)

Question

1 answers

solution1
0 2020-05-31 23:51:31

Responsive Textarea on Image (Bootstrap)

Question

1 answers

solution1 0 2020-05-31 23:51:31

solution1
0 2020-05-31 23:51:31