Related
I am creating a book project where if audio button is clicked the book will be read. As the book is being read I am highlighting the corresponding word. Now when there is a long text a horizontal scrollbar appears as the overflow-x: scroll; property is set.
Now, if the visible part of the screen is read i need to move the thumb of the scrollbar/slide to the next part of the content. Here comes the problem. Lets say the div width is 650px and the scrolling width is 1500px. If contents of 650px are read, I need to show the contents of next 650px. If I scrollLeft: 650px a part of the next 650px of content will be missing as I scrolled too much. So, I have to find the width of the thumb too. So the part I will require to scrollLeft will be 650 - thumb's width. How do I find thumb's width? Or is there any alternate way I can do this?
This is one approach to solve what you're asking.
Setup
On pageload, it will set the paragraph to one line, due to white-space: nowrap; in CSS.
Two variables will be assigned to elements in the DOM; button and content.
Slide to right
After that, when clicking the button (it can be any trigger), the container where everything is in will scrollLeft the scrollWidth of content (which is around 5000px in this case) divided by 3. In JavaScript:
document.getElementById('container').scrollLeft += (content.scrollWidth / 3);
Play around with your needs, but this is a basic example. You can read more about scrollLeft and scrollWidth at MDN.
const button = document.getElementById('moveButton');
const content = document.getElementById('text');
button.onclick = function() {
document.getElementById('container').scrollLeft += (content.scrollWidth / 3);
};
#container {
width: 600px;
border: 1px solid #ccc;
overflow-x: scroll;
}
#text {
white-space: nowrap;
}
<div id="container">
<p id="text">Morbi eros ligula, hendrerit in imperdiet ac, porta ut ex. Suspendisse fringilla gravida turpis venenatis pharetra. Suspendisse potenti. Nunc facilisis dapibus tristique. Nunc id facilisis est, nec gravida diam. Duis feugiat quam ac velit consequat,
vel pharetra odio convallis. Donec tempor, mi id sollicitudin lacinia, nunc augue cursus lacus, at pretium nisi quam non risus. Cras faucibus enim tellus, quis sollicitudin elit commodo nec. Nam ornare auctor lectus quis porttitor. Vivamus facilisis
nisl id libero gravida, eget ornare erat mattis. Ut auctor commodo sollicitudin. Mauris lectus purus, commodo sit amet nunc non, lobortis feugiat metus. Fusce non aliquet velit. Etiam congue purus at quam pharetra porta. Etiam nec magna at elit ullamcorper
varius ut vitae metus.</p>
</div>
<button id="moveButton" type="button">Move to right</button>
I am having issues with my jQuery match height... or maybe I just don't understand it fully? Any Help?
Image 1
Image 1: This is how it looks without height matched, which i am happy with just some simple shadowed boxes. But they do not match each others height :/
Image 2
Image 2: This is how it looks currently when I am trying to apply my jQuery of match height. The shadowed boxes are tiny at the top and it pushes the content underneath them...
HTML:
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan, mi a auctor varius, nibh metus aliquet nisl, sit amet aliquam massa ipsum vitae magna. Praesent sed quam felis. Phasellus pretium tempus sapien, eu interdum turpis ultricies quis. Nam dictum nisl et nulla scelerisque venenatis. Fusce sit amet aliquam.
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Vestibulum eget sodales orci. Quisque non semper enim. Mauris suscipit malesuada nisi sit amet tincidunt. Aliquam quam arcu, imperdiet ut tortor a, rhoncus aliquam leo. Nam ullamcorper elit vitae porttitor semper. Praesent cursus id felis nec eleifend. Ut vel sapien eleifend, efficitur metus eget, lacinia leo. Fusce eu lacus pretium, pulvinar tellus vel, vestibulum dui. Nunc congue libero justo, at aliquet ipsum posuere scelerisque. Praesent nunc lorem, venenatis eu velit sed, volutpat efficitur sem. Integer nisi arcu, sodales eu dignissim et, sagittis in massa. Aenean fringilla ante sed elit convallis, ac ornare urna porta. Pellentesque vel diam luctus, accumsan metus eu, malesuada elit.</p>
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Aenean a mi quis justo ultricies posuere nec vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec felis ante. Nulla aliquet in augue id varius. Cras ut ligula a diam porta feugiat. Praesent dictum eros nisl, at interdum tellus suscipit vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(".fade").hide(0).delay(0).fadeIn(500)
$('div').each(function(){
var highestBox = 0;
$('.home-card', this).each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card', this).height(highestBox);
});
});
CSS:
.home-card {
box-shadow: 1px 0 11px rgba(33,33,33, 0.2);
padding: 5px;
margin-top: 6px;
width: 97%;
float: none;
position: relative;
left: 0.5%;
}
.home-card:hover {
box-shadow: 1px 0 11px rgba(33,33,33, 0.4);
}
.home-card p, h2 {
padding: 10px;
}
Any Ideas?? Thanks!
ALSO: How would I get it so that height matches on large screens only, and is unaffected on medium and small screens?
Have you considered using a CSS only solution?
You could wrap your columns in a container, let's use a div with a class of container. Make this container a flexbox container and child divs within it will be matching heights.
.container {
display: flex;
}
I prefer using CSS for this type of problem because it's more of a presentational concern and this approach doesn't necessitate writing any messy javascript to manipulate the DOM. Additionally, unless you need to support old versions of IE, browser support for flexbox is pretty good. http://caniuse.com/#search=flexbox
I added a border to the child divs with a class of column simply to illustrate that they are indeed the same height.
https://jsfiddle.net/eulloa/tx5jbdgf/1/
This is a pretty good reference on flexbox, in case you're interested in reading more.
Why the first div looping?
Just the second loop should do what you want.
var highestBox = 0;
$('.home-card').each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card').height(highestBox);
Because if there is another div having no .home-card child... Like a footer...
highestBox sets to 0.
Then all .homecard are setted to zero.
What you actually see as height probably is margin/padding of inner elements... or something.
I need to hide the scrollbar on a div that has overflow:scroll; enabled so that the div will scroll with mouse and keyboard but the scrollbar itself will not be displayed.
is there a way of doing this with css or is javascript the way to go?
You can do this with pure CSS (at least in webkit browsers). You have to use special scrollbar pseudo-classes to achieve this
::-webkit-scrollbar {
display: none;
}
Read this excellent blogpost for further information.
You could put the scrolling div inside of a second div with overflow hidden, then just make the inner div a little wider and taller (the amount may vary depending on the browser, however).
Something like this:
#outer {
overflow:hidden;
width:200px;
height:400px;
border:1px solid #ccc;
}
#inner {
overflow:scroll;
width:217px;
height:417px;
}
Full example at http://jsfiddle.net/uB6Dg/1/.
Edit:
Unfortunately you can still get to the scrollbars by highlighting the text and dragging, and it does make padding etc a bit more of a pain, but other than this I think javascript is the way to go.
#Maloric answer pointed me in the correct direction, however I needed fluid width, and I also wanted to be more accurate on the width of the scrollbar.
Here is a function that will return the exact width of the scrollbar based on what the browser reports.
var getWidth = function () {
var scrollDiv = document.createElement('div'),
scrollbarWidth;
scrollDiv.style.overflow = 'scroll';
document.body.appendChild(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
};
var width = getWidth();
var container = document.querySelector('.overflowing-container');
container.style.paddingRight = width + 'px';
container.style.marginRight = (width * -1) + 'px';
// Just for testing purposes
document.querySelector('.scrollbar-width').innerHTML = 'scrollbar height: ' + getWidth()
.container {
height: 200px;
overflow-x: hidden;
overflow-y: auto;
width: 500px;
}
.overflowing-container {
height: 100%;
overflow-y: auto;
width: 100%;
}
<div class="container">
<div class="overflowing-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique feugiat metus, eget mollis nibh vestibulum eu. Nullam eros orci, gravida eu quam nec, maximus posuere dui. Maecenas erat magna, elementum eget nunc eget, tincidunt varius nisl. Phasellus pretium congue consectetur. Donec rutrum nisi sed eros posuere, vel pretium nunc viverra. Praesent consequat sagittis urna, quis convallis magna gravida et. In sed eleifend arcu.
Duis ornare condimentum est luctus malesuada. Morbi nec sodales nunc. Morbi vehicula tristique massa, nec lacinia tellus vulputate fringilla. Nam eget pulvinar libero. Vestibulum ligula mi, tincidunt ac pellentesque vitae, convallis eu tortor. Cras varius dolor sit amet libero rhoncus, mattis aliquet augue porttitor. Etiam sollicitudin, sem ut mollis imperdiet, erat enim gravida tortor, et imperdiet sem nibh in ex. Aliquam ac aliquam risus. Suspendisse gravida suscipit sapien, et ultrices massa ornare eget. Nulla venenatis pellentesque arcu at auctor. Sed libero ligula, pretium in metus a, malesuada ullamcorper leo. Vivamus tempor velit in ante fringilla rhoncus. Nam ac iaculis arcu. Mauris a nisi quis arcu feugiat posuere.
</div>
</div>
<div class="scrollbar-width"></div>
The above snippet shows this in action.
You need to make use of the jquery plugin from this site http://jscrollpane.kelvinluck.com/
How can the scrollbar be hidden? I want to do this because the scrollbar is not nice.
overflow:hidden is not useful, because my div element has many other elements.
So setting overflow does not solve my problem.
You can hide the scrollbar with this...
document.body.style.overflow = 'hidden';
...and unhide it with this:
document.body.style.overflow = 'visible';
However, you have to question yourself whether this is really what you want. Scrollbars appear for people to be able to view things that are outside of their small screens.
You have to overwrite the CSS settings as follows:
<style type="text/css">
#YourSpecialDiv { overflow: hidden !important; }
</style>
And the div you should add the id tag i.e.
<div id="YourSpecialDiv"...>...</div>
I don't think there is actually a way to just hide scrollbars properly.
What overflow:hidden, overflow-x:hidden and overflow-y:hidden do is actually 'if it goes outta 100vw/100vh/100vw an 100vh then do not display it'. Overflow is only do not display what's outside of the current(initial tbh) view.
It hides scrollbar because everything that is in the HTML that should be outside will not be on the page when viewing it (nothing needing scroll so no scrollbar).
The only hide available is (here to hide the Y-axis scrollbar) :
[container]{
overflow:scroll;
overflow-x:hidden;
}
[container]::-webkit-scrollbar{
width:0;
background-color:transparent;
}
Which is a real hide of scrollbar, and sadly works only on webkit-based browsers.
If one day all vendors accept this then it will be amazing and we'll finally be able to hide scrollbars.
You can use the following on any element:
::-webkit-scrollbar {
width: 0px;
}
Source
This only works on webkit browsers, so no IE and Firefox.
You have to use the CSS property overflow, which 'manages' what should happen when the content of a certain element exceeds its boundaries. Setting it to hidden hides the scrollbars.
overflow: hidden;
or
someElement.style.overflow = 'hidden';
The best way to do this would be some sort of pseudo element css selector. But I think only webkit (Chrome/Safari) has one for the scrollbar, so it isn't very cross browser.
A hacky alternative is to wrap it in a div that hides away the scrollbar, by setting the width smaller than the contained div by the scrollbar's size
DEMO (may take a while to get the css perfect, but you get the gist)
The problem here is that scrollbar sizes differ per-browser, so you'll have to make the outer div the largest of the scrollbars' width's smaller. And to not cut off any content in the browsers with the smaller scrollbars, it'd be best to add padding of the biggest size difference for scrollbars.
var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
/*Mouse wheel scrolled down*/
if (event.deltaY > 0)
container.scrollTop += 30;
/*Mouse wheel scrolled up*/
else
container.scrollTop -= 30;
}, false);
div.container {
height: 15rem;
width: 20rem;
overflow: hidden;
padding: 1rem;
border: 1px solid;
font-family: "Seoge UI", "Calibri", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
}
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
/>diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
/>libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
/>Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>
I'm having a lot of trouble finding specific information and examples on this. I've got a number of jQuery UI dialogs in my application attached to divs that are loaded with .ajax() calls. They all use the same setup call:
$(".mydialog").dialog({
autoOpen: false,
resizable: false,
modal: true
});
I just want to have the dialog resize to the width of the content that gets loaded. Right now, the width just stays at 300px (the default) and I get a horizontal scrollbar.
As far as I can tell, "autoResize" is no longer an option for dialogs, and nothing happens when I specify it.
I'm trying to not write a separate function for each dialog, so .dialog("option", "width", "500") is not really an option, as each dialog is going to have a different width.
Specifying width: 'auto' for the dialog options just makes the dialogs take up 100% of the width of the browser window.
What are my options? I'm using jQuery 1.4.1 with jQuery UI 1.8rc1. It seems like this should be something that is really easy.
EDIT: I've implemented a kludgy workaround for this, but I'm still looking for a better solution.
I've just wrote a tiny sample app using JQuery 1.4.1 and UI 1.8rc1. All I did was specify the constructor as:
var theDialog = $(".mydialog").dialog({
autoOpen: false,
resizable: false,
modal: true,
width:'auto'
});
I know you said that this makes it take up 100% width of the browser window but it works sweet here, tested in FF3.6, Chrome and IE8.
I'm not making AJAX calls, just manually changing the HTML of the dialog but don't think that will cause any probs. Could some other css setting be knocking this out?
The only problem with this is that it makes the width off-centre but I found this support ticket where they supply a workaround of placing the dialog('open') statement in a setTimeout to fix the problem.
Here is the contents of my head tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
var theDialog = $(".mydialog").dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 'auto'
});
$('#one').click(function(){
theDialog.html('some random text').dialog('open');
});
$('#two').click(function(){
theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');
});
$('#three').click(function(){
//this is only call where off-centre is noticeable so use setTimeout
theDialog.html('<img src="./random.gif" width="500px" height="500px" />');
setTimeout(function(){ theDialog.dialog('open') }, 100);;
});
});
</script>
I downloaded the js and css for Jquery UI from http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip.
and the body:
<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>
Had the same problem and thanks to you mentioning that the real problem was related to CSS I found the issue:
Having position:relative instead of position:absolute in your .ui-dialog CSS rule makes the dialog and width:'auto' behave strangely.
.ui-dialog { position: absolute;}
Here's how I did it:
Responsive jQuery UI Dialog ( and a fix for maxWidth bug )
Fixing the maxWidth & width: auto bug.
You can avoid the 100% width issue by specifying a maximum width. The maxWidth option does not seem to work; so set the CSS max-width property on the dialog widget instead.
In case you also want to constrain the maximum height, use the maxHeight option. It will correctly show a scrollbar when necessary.
$(function() {
var $dialog = $("#dialog");
$dialog.dialog({
autoOpen: false,
modal: true,
width: "auto"
});
/*
* max-width should be set on dialog widget because maxWidth option has known issues
* max-height should be set using maxHeight option
*/
$dialog.dialog("widget").css("max-width", $(window).width() - 100);
$dialog.dialog("option", "maxHeight", $(window).height() - 100);
$(".test-link").on("click", function(e) {
e.preventDefault();
$dialog.html($(this.hash).html());
// if you change the content of dialog after it is created then reset the left
// coordinate otherwise content only grows up to the right edge of screen
$dialog.dialog("widget").css({ left: 0 });
$dialog.dialog("open");
});
});
#import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="dialog"></div>
<!-- test links -->
<p>
Image (Landscape)
Image (Portrait)
Text Content (Small)
Text Content (Large)
</p>
<p>If you are viewing in Stack Snippets > Full page then reload the snippet so that window height is recalculated (Right click > Reload frame).</p>
<!-- sample content -->
<div id="content-1" style="display: none;">
<img src="https://i.stack.imgur.com/5leq2.jpg" width="450" height="300">
</div>
<div id="content-2" style="display: none;">
<img src="https://i.stack.imgur.com/9pVkn.jpg" width="300" height="400">
</div>
<div id="content-3" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
</div>
<div id="content-4" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
<p>Aenean eu magna tempor, pellentesque arcu eget, mattis enim. Cras at volutpat mi. Aenean id placerat felis, quis imperdiet nunc. Aenean a iaculis est, quis lacinia nisl. Sed aliquet sem eget justo convallis congue. Quisque rhoncus nulla sit amet cursus maximus. Phasellus nec auctor urna. Nam mattis felis et diam finibus consectetur. Etiam finibus dignissim vestibulum. In eu urna mattis dui pharetra iaculis. Nam eleifend odio et massa imperdiet, et hendrerit mauris tempor. Quisque sapien lorem, dapibus ut ultricies ut, hendrerit in nulla. Nunc lobortis mi libero, nec tincidunt lacus pretium at. Aliquam erat volutpat.</p>
<p>Fusce eleifend enim nec massa porttitor tempor a eget neque. Quisque vel augue ac urna posuere iaculis. Morbi pharetra augue ac interdum pulvinar. Duis vel posuere risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae lectus non nisl iaculis volutpat nec vitae ante. Maecenas quis condimentum elit. Sed nisl urna, convallis ut pellentesque sit amet, pellentesque eget quam. Pellentesque ornare sapien ac scelerisque pretium. Pellentesque metus tortor, accumsan in vehicula iaculis, efficitur eget nisi. Donec tincidunt, felis vel viverra convallis, lectus lectus elementum magna, faucibus viverra risus nulla in dolor.</p>
<p>Duis tristique sapien ut commodo laoreet. In vel sapien dui. Vestibulum non bibendum erat. Etiam iaculis vehicula accumsan. Phasellus finibus, elit et molestie luctus, massa arcu tempor nulla, id hendrerit metus mauris non mi. Morbi a ultricies magna. Proin condimentum suscipit urna eu maximus. Mauris condimentum massa ac egestas fermentum. Praesent faucibus a neque a molestie. Integer sed diam at eros accumsan convallis.</p>
</div>
I imagine setting float:left for the dialog will work. Presumably the dialog is absolutely positioned by the plugin, in which case its position will be determined by this, but the side-effect of float - making elements only as wide as they need to be to hold content - will still take effect.
This should work if you just put a rule like
.myDialog {float:left}
in your stylesheet, though you may need to set it using jQuery
I had the same problem when I upgraded jquery UI to 1.8.1 without upgrading the corresponding theme. Only is needed to upgrade the theme too and "auto" works again.
For some reason I kept having this full page width problem with IE7 so I made this hack:
var tag = $("<div></div>");
//IE7 workaround
var w;
if (navigator.appVersion.indexOf("MSIE 7.") != -1)
w = 400;
else
w = "auto";
tag.html('My message').dialog({
width: w,
maxWidth: 600,
...
I had a similar problem.
Setting width to "auto" worked fine for me but when the dialog contained a lot of text it made it span the full width of the page, ignoring the maxWidth setting.
Setting maxWidth on create works fine though:
$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
I had this problem as well.
I got it working with this:
.ui-dialog{
display:inline-block;
}
All you need to do is just to add:
width: '65%',
I have the same problem and having position: absolute in your .ui-dialog{} css was not enough. I noticed that position: relative was being set on the actual element's direct style, so the .ui-dialog css definition was getting overwritten. Setting position: absolute on the div I was going to make a dialog statically also did not work.
In the end I changed two placed in my local jQuery to make this work.
I changed the following line in jQuery to be:
elem.style.position = "absolute";
at https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62
Also, since my dialog was set to draggable, I had to change this line as well in jQuery-ui to be:
this.element[0].style.position = 'absolute';
at https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48
Perhaps going through the style I have more thoroughly would fix things, but thought I'd share how I got this working.
If you need it to work in IE7, you can't use the undocumented, buggy, and unsupported {'width':'auto'} option. Instead, add the following to your .dialog():
'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }
Whether .scrollWidth includes the right-side padding depends on the browser (Firefox differs from Chrome), so you can either add a subjective "good enough" number of pixels to .scrollWidth, or replace it with your own width-calculation function.
You might want to include width: 0 among your .dialog() options, since this method will never decrease the width, only increase it.
Tested to work in IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35, and Opera 22.
Adding to Vladimir Kornea's answer.
I wanted a way to set the width unless the screen was too small, then a dynamic width. Not truly "responsive" bit works well for most cases.
, 'open': function(){
var resposive_width = ($( window ).width() > 640) ? 640 : ($( window ).width() - 20);
$(this).dialog('option', 'width', resposive_width)
}
edit this bellow:
$("#message").dialog({
autoOpen:false,
modal:true,
resizable: false,
width:'80%',