All,
I'm using the jQuery UI Modal Form which opens up very nicely for me except for one thing. Sometimes it opens up so only half of it is in the active window and the other half is below the page and I have to drag it up so that the whole form is there. I only changed some of the form elements and colors in the CSS but didn't do anything else in terms of sizing and I also changed the height and width from 300 and 350 to 550 and 600.
How can I ensure that the modal form always opens up in the current window space instead of only half and make sure this happens each time?
Thanks!
When you launch the jQuery Dialog, it tries to center on the page. The first thing I would check is that your HTML and BODY elements are not larger than the default size. Use firebug to check if there are any styles or DOM attributes causing the HTML and BODY elements to be larger than 100%. I usually like to reset them like this...
html { width:100%; height:100%; }
html, body { margin:0; padding:0; }
Related
I have a select in a dialog box. The text for the options is long. When the page is loaded the select box should be rendered with static width (i.e. 50px), but when the dialog box will resize, this select should also resize. When I put width:100% initial size of select is adjusted to text from it. When I put width:50px the initial size is ok, but it isn't resized. An example on plunker.
The main problem is that this select is generated by Primefaces and I can't use this example.
I hope that exists pure CSS answer without using jQuery or JS.
You may apply the following css change
.mySelect{
min-width:50px;
max-width:50px;
width:auto;
}
I've looked all over google and to be honest there aren't that many articles to answer a question as specific as this one , and i've tried going through the interface.
So when you make a new page , you have a body , and by default , that body has some margin's between it and the browser window , now i've managed to take care of the top and bottom one so there's no padding on the browser window ( a.k.a. margin's on the body ) but there's still space between the browser and the body on the left and the right side.
So how can i make my body's width be 100% of the browser's window because there's no width setting for the body , but only the page ( the browser window area).
body {
margin: 0;
padding: 0;
}
Okay here is the best I can do...
Aside from going to Page > Page properties > metadata and adding your own css file. what you can do is go to the rectangle tool and expand it to whatever height you want, however you MUST make sure that you expand the width to the edges of the web canvas past the body border until the tooltip displays 100%. afterwards embed whatever you want in there. but bewarned, the more complex the object the more custom coding you need to add.
Hope this helps
There is a way to make an object 100% the width of a browser. It's not so obvious and it's hidden:
Draw a rectangular box and fill the box with photo (scale to fit), set color to none.
Resize the rectangular box to the same width of the canvas (page size).
The combination of the procedures above activates 100% width on the object.
Be sure you are using "browser fill" and not just "fill".
The fill one will fill in a box in the center....
Browser fill will literally fill the whole page. Got stuck on this for ages!
There is a simple one-click solution for 100% width, which I just came across in this awesome article after having trouble getting my footer to go all the way across on wide screen laptops...
In your top toolbar between the X/Y and W/H inuts, there is a little box with an arrow that points either way. Hover over it and you will see that it says '100%'.
click it and you're done!!!
:-)
http://www.designeasy.co/2014/07/5-very-cool-tips-for-adobe-muse-cc-2014.html
insert the following code into your header tags as follows (Where theme.css is the name of your css.)Now, go to you css and enter the css given to you by user255
Open your page in adobe muse Go to "Page properties" select "Metadata" From Page properties and add the following code to HTML for <head> area:
<style>
body {
overflow-x:hidden;
}
</style>
I'm making a website in CSS and HTML (ofc there's JS, jQuery and XML but let's stick to the point) I want to make a button whats using <ul> and <li> to darken the webpage, I found this, code:
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /*enter code here important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
Anyone of you know how to make the CSS menu button to use the div inside of itself?
Here's a demo on CodePen to demonstrate the dimming effect and button: http://codepen.io/srig99/full/pDzgj. As user1618143 suggested, jQuery will make it easy for you to achieve this in your website. I have utilized jQuery in the demo as well.
You'll have to use javascript for this, and JQuery makes it pretty easy. First, put your #dimmer div directly inside the body of your html - putting it deeper runs the risk of only dimming part of your page, if any of its parent elements have absolute, fixed, or relative positioning. Second, add a click event on your button that unhides the dimmer. This is easy with a little JQuery (which I have not tested):
$('#dim_button').click(function() {
$('#dimmer').show(); });
(You'll have to make sure that the button has loaded by the time this code runs, otherwise it won't do anything. The best way to do this is to wrap it inside of a $('document').ready(function{}); )
Note that, in some older browsers, the dimmer div will, by sitting on top of your page, prevent the user from clicking on anything in it, potentially making your page unusable. If you're dimming the page in order to place a popup window on top of that, make sure that closing the popup also removes the dimmer. Note also that in most (all?) newer browsers, users will be able to click through the dimmer and interact with the page underneath, which may not be what you want.
In css I use a class named bodyClass to set the aspx page's body width:65%;
In the page I have <body class="bodyClass".....
I can see my page is sized...
But the browser still opens itself at the last width that was in use when it was closed...
I try width:650px; as well, same result.
Any clue?
You can open a new window via javascript and specify that window size, but you cannot arbitrarily change the size of a current browser window with css; only the content inside the window is in your control.
[Update]
I actually compromised on this problem for now by foregoing the fixed footer design.
It seems that there is no problem with dynamic content moving the footer and resizing containers appropriately unless the footer is fixed to the browser bottom initially.
I hope others will eventually provide a great solution that encompasses the best of both worlds.
I spent all day trying to get the footer to move down the page to accommodate dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.
Basically:
My site has some pages that begin with only a text box and a button so that the total height of the content area is only a few inches beneath the header area.
I don't have any problem getting the sticky footer working so that the footer appears at the bottom of the browser window even when there is very little content on screen.
That same css layout works fine for other pages that have content that extends beneath the browser window.
The catch:
The content has to be rendered and passed to the browser with the initial load.
The Problem:
Any content that is added to the page via AJAX after the initial load paints down the page correctly -- but the footer remains in its initial location.
Please tell me there is a fix for this.
I can't post the css until checking with my boss first - if possible - and if needed, I will later - but it's just a very basic version of the many sticky footer css solutions floating around the web.
Thanks.
Currently fixed similar situation with small jQuery and CSS, where parameter is footer div object (i.e. $("#mainfooter")):
function positionFooter(obj){
if ($("body").outerHeight(true) > $(window).height()) {
obj.css("position","relative");
} else {
obj.css("position","fixed");
obj.css("bottom","0px");
}
}
Bound this function to $(document).ready and $(window).resize.
If ajax call resizes body, this should be called also after content load.
It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:
bottom: 0;
display: block;
position: absolute;
That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:
min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */
The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?
Without any code it´s hard to tell what the problem might be.
However, I´m using a sticky footer as described here that works very well although I haven´t added ajax content in it. Browser resizing works just fine though.
Use include in PHP and call the footer after the dynamic content appears.
I'm not sure you are looking for this, but I am also facing the same problem before and same CSS, where my content overlaps on the footer when i call the ajax through jQuery method.
Now I found the solution: Just get the div height through jQuery and apply the height to the div where you are returning your results from ajax.
var obj = $("#viewcomm").height();
if($.browser.msie) {
$("#viewcomm").height(obj).css({cursor:"auto"});
}
where here viewcomm is div ID.
I solved same kind of problem with following code, where content is the id of div where php pages load and footer is the footer tag.
var footerAdjustId = setInterval(adjustFooter, 2000);
function adjustFooter(){
$("footer").css("marginTop", $("#content").height() - $(window).height());
clearInterval(footerAdjustId);
}