Limit the width of columns that can be adjusted by dragging

Alright, let's talk about the current scenario:

  • I'm playing around with a fixed-width (resizeable) left sidebar
  • The left sidebar contains draggable elements
  • If one of these elements is dragged to the right, the entire sidebar seems to shift along with it.

Why is this happening? Any suggestions on how to fix this issue?


Fiddle: http://jsfiddle.net/t5nnmh94/


Main HTML:

<div id="main_wrap">
            <div id="sidebar" class="content-fluid">
                <span id="position"></span>
                <div id="dragbar"></div>
                <div id="components"><div class="panel panel-default">
                    <div class="panel-heading">Components</div>
                        <div class="panel-body">

                            <div class="col-xs-6 component-item"><div class="wrp" id="one"><i class="glyphicon glyphicon-envelope"></i><br/>E-mail</div></div>
                            <div class="col-xs-6 component-item"><div class="wrp" id="two"><i class="glyphicon glyphicon-italic"></i><br/>Input</div></div>



                            <div class="col-xs-6 component-item"><div class="wrp" id="three"><i class="glyphicon glyphicon-text-width"></i><br/>Textarea</div></div>
                            <div class="col-xs-6 component-item"><div class="wrp" id="four"><i class="glyphicon glyphicon-file"></i><br/>File Upload</div></div>

                            <div class="col-xs-6 component-item"><div class="wrp" id="five"><i class="glyphicon glyphicon-asterisk"></i><br/>Password</div></div>
                            <div class="col-xs-6 component-item"><div class="wrp" id="six"><i class="glyphicon glyphicon-check"></i><br/>Checkbox</div></div>

                        </div>
                    </div>
                </div>
            </div>
            <div id="content" class="content-fluid">
                <div class="row">
                <div class="col-xs-8" id="maina">
                <div class="panel panel-default" id="droppanel">
                    <div class="panel-heading">Main</div>
                    <div class="panel-body" id="droppanelbody" >
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="active"><a href="#ui-editor" role="tab" data-toggle="tab">UI Editor</a></li>
                            <li><a href="#code" role="tab" data-toggle="tab" data-tab="code">Code</a></li>
                        </ul>

                        <div class="tab-content" style="margin-top:40px;">
                            <div class="tab-pane fade in active" id="ui-editor">
                                <form role="form" id="theform">

                                </form>
                            </div>
                            <div class="tab-pane fade" id="code">
                                <textarea class="form-control" rows="5" id="thecode">

                                </textarea>
                            </div>
                        </div>

                    </div>
                </div>
                </div>
                <div class="col-xs-4" id="options">
                    <div class="panel panel-default">
                        <div class="panel-heading">Options</div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>

Answer №1

Got it, here's the solution:

#elements{
    overflow: visible;
}

#draggableContainer{
    z-index: 100;
}

.box{
 z-index: 99;
}

#sidepanel{
  overflow: visible;
}

This code should solve the issue.

Answer №2

Shifting an object inside your panel's body automatically adjusts the panel size to fit all the contained elements. This behavior is set as the default.

If you want to experiment, consider using:

overflow: hidden;

This will conceal any overflowing content while maintaining the original block dimensions.

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

Sorting tables using ajax-generated data

I am having trouble with a table that is generated using ajax (PHP). Even though I have included all the necessary attributes for tablesorter, it doesn't seem to be working. Can someone please point out where I might have made a mistake? Any suggestio ...

Transform the R language code into Javascript for use with highcharts.js

I am in search of a way to translate an R Script into JavaScript for the purpose of dynamically altering a HighCharts.js plot. However, I am unsure how to go about creating a JavaScript function that can replicate the functionality of the rnorm() function ...

Saving Cell in JGrid by Clicking Button

Hello, I'm currently utilizing the afterSaveCell function that triggers when a cell is modified. In my situation, I am performing batch updates to the database upon clicking the save change button. However, if a user edits a cell and then moves to an ...

Arranging Bootstrap dropdown and buttons on a single line

Check out my code snippet here: http://jsfiddle.net/52VtD/7462/ I'm facing an issue where I want to align my dropdown and buttons on the same line, but the dropdown being a div, it stays on the line below. How can I ensure they are on the same line? ...

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

Navigating through route parameters and application logic

There is an endpoint / which may receive different get parameters for oAuth and logging in to an app. A function called queryAction has been created to handle these requests. Platforms like express can route at the path level but not the res.query level, ...

Ways to reposition Material UI tabs at the base of a container such as AppBar?

I'm looking for advice on how to position <Tabs within an AppBar at the bottom of a parent container, effectively placing them at the bottom of the header. Currently, I have divided the header into three sections: top-bar-left, top-bar-tabs, and to ...

Perform grouping and reducing operations on an array of objects using a pointfree syntax

Recently delved into the world of Ramda and am on a quest to discover a pointfree method for reducing an array of objects. Behold, the array of objects : const someObj = [ { name: 'A', city: 1, other: { p ...

Exploring HTML5 canvas hit detection using isPointInPath() method

When it comes to hit testing with HTML5 canvas, here's an idea I've been considering: 1) Store the coordinates of a shape (e.g. a rectangle) - x, y, width, height 2) When the mouse is moved or clicked, redraw the rectangle on the screen canvas w ...

Exploring the Use of data- Attributes in SVG Circle Elements

Looking for a way to dynamically update the color of a Circle element in your SVG when it is clicked? You can achieve this by using jQuery's .css() method in conjunction with the data-* attribute. CHECK OUT AN EXAMPLE: STYLING IN CSS svg { height ...

"Enhancing visual effects with personalized animations in Highcharts using setSeries or setCategories

I successfully created a customized highchart graph with 3 added buttons. An example can be viewed here: http://jsfiddle.net/eszwd420/ $(function () { var averageLabel =[1278302400000, 1286251200000, 1294203600000, 1301976000000, 13098384000 ...

Displaying Bootstrap Alert for a single occurrence

One issue I'm facing involves setting up alerts with Bootstrap. Initially, these alerts are hidden from view. However, when a rating is submitted using raty, an Ajax request is triggered. Upon successful completion of the request, an alert is displaye ...

Conceal shortcodes in Wordpress's TinyMCE editor

Would it be possible to customize the appearance of shortcodes in the WordPress TinyMCE editor? One of my clients lacks HTML knowledge, making it difficult to explain what should not be edited on subpages. All I am looking for is a way to hide the shortco ...

When utilizing jQuery post to send data to a node.js server, the request is abruptly terminated before completion

When sending a post request to my node.js server, I use the following code: $.post("/admin/google",{result: result, testName: testName}, function(data){ console.log(data); if(data.status === 200) { alert ...

D3 and Select struggling to conform to HTML layout

I've been putting in a lot of effort working with D3 to align my HTML layout, but I'm struggling to get my charts to align as desired. What I'm aiming for is: BAR CHART 1st PIE CHART, 2nd PIE CHART, FIELDSET So, what I need ...

Do I need to pass data to a V model? Is it necessary to initialize the data if it is being passed from a different component

I need to assign the value of the content data from another component to the this.newTutorial.content push function. I successfully obtained the data, but now I am facing an issue with assigning it to my v-model. It's like transferring data from one v ...

Could a standard React application be transformed into a Next.js application?

Can a plain React app be transformed into a Next.js app? I initially developed my project using create-react-app, but now I'm considering moving it over to Next.js. Is there a way to achieve this transition smoothly, or should I just start from scra ...

Troubleshooting Angular2 ngFor: Finding a Fix

I'm having trouble setting up a basic shopping list using ngFor in Angular. import { Component, View } from 'angular2/angular2'; @Component({ selector: 'my-app' }) @View({ template: '<h1>{{title}}</h1>< ...

The Protractor option is nowhere to be found on the Run Configuration popup window in Eclipse

Issue with Protractor in Eclipse: Unable to locate Protractor option on Run Configuration popup. Despite following the steps outlined in http://www.protractortest.org/#/ and this guide on configuring Protractor with Eclipse (specifically the 2 Answer step ...

Leveraging AngularJS libraries built on top of bootstrap without disrupting the styling

Currently working on an AngularJS app that is almost complete in terms of CSS styling, just looking to add functionality. Now, I am in need of features such as date pickers modals tooltips I am interested in incorporating elements from angular-strap, ...