In Chrome, the "div" with the style attribute "resize:both" is unable to shrink, while it functions properly in Firefox

Question

In Chrome, the "div" with the style attribute "resize:both" is unable to shrink, while it functions properly in Firefox

Here's the div code I'm working with:

<div style='overflow:hidden;resize:both;border:1px solid orange;'>
   <div style='background-color:#aaa;width:400px;height:300px;'>
   </div>
</div>

You can view it in action here: http://jsfiddle.net/4w7zd/

In Firefox, you can resize the main div to be larger or smaller. But in Chrome, you can only resize it to be bigger.

Does anyone know of a workaround so that I can freely resize the main div as needed in Chrome, similar to how it works in Firefox?

Thank you in advance!

html css google-chrome

Answer 1

Answer №1

After conducting some tests, I discovered that the content was preventing resizing in Chrome. Therefore, I have made adjustments to your case as follows:

<div style='overflow:auto;resize:both;border:1px solid orange; min-height: 10px;'>
    <div style='background-color:#eee;width:400px;max-height:300px; height:100%;'>
    </div>
</div>

It appears to be functioning correctly now: http://jsfiddle.net/4w7zd/7/

While I'm not certain if this solution is feasible for you, it may give you a starting point.

Answer 2

After conducting some tests, I discovered that the content was preventing resizing in Chrome. Therefore, I have made adjustments to your case as follows:

<div style='overflow:auto;resize:both;border:1px solid orange; min-height: 10px;'>
    <div style='background-color:#eee;width:400px;max-height:300px; height:100%;'>
    </div>
</div>

It appears to be functioning correctly now: http://jsfiddle.net/4w7zd/7/

While I'm not certain if this solution is feasible for you, it may give you a starting point.

Answer 3

Answer №2

When using the resize feature in Chrome, the minimum width is determined by its content. To achieve this in Google Chrome, you can follow this method: http://jqueryui.com/resizable/

To embed jQuery libraries:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

Javascript:

<script>
  $(function() {
    $( ".resizable" ).resizable();
  });
</script>

HTML:

<div class="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

Answer 4

When using the resize feature in Chrome, the minimum width is determined by its content. To achieve this in Google Chrome, you can follow this method: http://jqueryui.com/resizable/

To embed jQuery libraries:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

Javascript:

<script>
  $(function() {
    $( ".resizable" ).resizable();
  });
</script>

HTML:

<div class="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

Answer 5

Answer №3

Check out this clever solution:

section {resize: both;}
section:active {
  width: 0;
  height: 0;
}

This method has been tested and proven to work on Chrome, Safari, and Firefox. However, it may not be fully compatible with Internet Explorer. One drawback of this workaround is the inability to interact with the elements within the resizable section.

http://jsfiddle.net/RD9vaJhP/

Answer 6

Check out this clever solution:

section {resize: both;}
section:active {
  width: 0;
  height: 0;
}

This method has been tested and proven to work on Chrome, Safari, and Firefox. However, it may not be fully compatible with Internet Explorer. One drawback of this workaround is the inability to interact with the elements within the resizable section.

http://jsfiddle.net/RD9vaJhP/

In Chrome, the "div" with the style attribute "resize:both" is unable to shrink, while it functions properly in Firefox

Answer №1

Answer №2

Answer №3

Similar questions

If the header 1 contains a specific word in jQuery, then carry out an action

"Experience a unique website layout with varying designs on desktop and mobile devices while using the React technology to enable desktop

Troubleshooting a Next.js background image problem when hosting on Netlify

Angular Material Sidenav fails to cover the entire screen while scrolling

What is the best way to achieve consistent width in a material-ui card component?

Instructions on how to extract a specific timestamp from a video and utilize it to initiate an event

Utilize PHP to include attachments and information within an email form

Tips for updating a div element while maintaining its style and select2 plugin functionality with jQuery

Can responsive images be utilized with a DIV's background-image property?

Enhance your coding experience with code completion and autocomplete in Angular/Typescript using ATOM within

Having trouble loading the image source using JSON in Vue.js

Trigger .gif on hover using ng-repeat in AngularJS

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

What could be causing my widget to not function properly with Django and Bootstrap?

What's the best way to add line numbers to source code on an HTML webpage after parsing?

Tips for customizing the scrollbar design in iOS Safari

Three.js not rendering any objects, only displaying a blank black screen

Content in tab remains stagnant

Donut chart in SVG format failing to display properly in email messages

Struggling with setting margins effectively in Bootstrap for the desired layout