I'm building an android app with phonegap using angularJS + topcoat. I managed creating the index page, views and all the basic structure. My question is, there is some pages(partials) that doesn't have data to show. In that case, the view does not fill the height of the page. That makes a problem because I have a drawer menu hidden usin angular-snap. Because the page doesn't fill all the available height, the menu that is supposed to be hidden is visible. Does anybody know how to handle this situation? I'm attaching a image to examplify! app-example
Thank you!
Why don't use the css min-height property. Assume every page of your app is wrapped inside a div as follow :
<div classs="page">
//your page content
...
</div>
You can then create the following CSS rule
.page {
min-height :100%;
}
that will ensure that even if the height of your content is less than the total height of your screen it will occupy 100% of the page's height.
I managed solving the problem with Nicolas help. It didn't worked in the beginning because I was setting the new style on the partial's div. After trying for a while I set the class on the "main" div which holds the ng-view directive and it worked. Just an example in case others have the same issue:
<body ng-controller="MainCtrl">
<div snap-content snap-options="snapOpts" class="page">
<div ng-view ng-class="slide"></div>
</div>
</body>
.page {
min-height :100%;
background:inherit;
}
Note: I had to set a background for the page class otherwise it won't work.
Related
I am trying to give a div a dynamic height depending on screen size. In the div I have a calendar that has multiple lines of content, that can be shown or not (user's choice), e.i. the calendar's height is not fixed. With that in mind I have div's height set to auto. Which works fine (the height is set according to number of lines in calendar).
The problem arises when I make the browser's height smaller than the amount of height that calendar needs. It becomes a scroll which is not a problem, the position of the scroll is. The scroll is placed on the entire div not on the calendar in the div. The scroll is correct, if the div does not have it's height set, but it does not dynamically shrink to fit only the content (it stays the same height no mater if there is content of not) and I am trying to avoid that.
I suppose the solution is to say that if the div has enough space to use auto and if not it should have the height of it's parent. The min does not take parameters such as auto. I am a bit lost as to how to write code correctly to achieve this preferably using only CSS.
EDIT:
html:
<html>
<body>
<div class = "calendar">
<div class = "content">
<\div>
<\div>
<\body>
<\html>
CSS:
body {height: 100vh; overflow: hidden}
. calendar {overflow-y: auto;}
. content {height: auto;} \\the problem
The height of calendar in JS is set to "parent"
Well, by your answer I am sure you want to make the content responsive. So there is an easy trick or you can say a cheat sheet for your requirement.
Step 1: Include Bootstrap 4 CDN scripts
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
Step 2: In your HTML, write a classname as 'form-group' to adjust your calendar's height content as per the screen size.
<div class="form-group">
<div class = "calendar">
<div class = "content">
<\div>
<\div>
</div>
Step 3: Run your project and see how your width of the container adjusts according to the browser when you drag or make it small.
Hope this helps.
Any way i can have ckeditor consume 100% height dynamically?
http://jsfiddle.net/bobbyrne01/jejmqjxa/1/
html
<div id="outer">
<textarea class="ckeditor" id="editor1" name="editor1"></textarea>
</div>
<button>test</buton>
css
#outer {
width: 95%;
height:500px;
}
While checking the ckeditor docs it is not supported yet to set the height in %
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-height So to get the desired result I suggest to set the height to 100% by CSS but not by the ckedtior.config read the screen height with javascript, set the size on load and window resize and put it as value in the outer element height.
Might sounds like a lot of work but is not as tricky. Updated fiddle here
CSS to add (to get all ckeditors you might have on the loaded page)
div[id^=cke_editor] {
height:100%;
}
Javascript to set the height of the outer div on page load
document
.getElementById("outer")
.style.height = window.innerHeight+"px";
If you want to have this working on window resize I suggest to use jQuery but however you can do it without. Here is how (with and without jQuery): Cross-browser window resize event - JavaScript / jQuery
following situation:
<body>
<div style="position:fixed; width:100%">[place holder for header]</div>
<div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>
I need the header always visible and at the top, so this one should be with position:fixed.
A problem occurs after self adjustments of the header - height. If the header is higher than 100px a part of the content is hidden.
How can I (CSS) dynamically set the start position of the content div regarding the end of the header.
I'm still looking for a CSS only solution, but for the moment here's an idea using just one line of JavaScript – when using jQuery:
JavaScript
$(document).ready(function () {
$('#content').css('marginTop', $('#header').outerHeight(true) );
});
HTML
<body>
<div id="header" style="[…]">[place holder for header]</div>
<div id="content" style="[…]">[content]</div>
</body>
The advantage of using .outerHeight(true) is, that it takes care of borders and margins you may have applied to your header.
CSS only solution (although not super clean) could be to display the same block twice: 1st block "position: fixed", 2nd block "visibility: hidden". Since both would have the same height, the role for the 2nd block would be to push down the page content to the appropriate level.
I added two divs to hold background images for decorative purposes - as requested by the artist whom is working with me on a website.
At first, it worked very well. The images were supposed to show on each side of the wrapper div holding the website content - without affecting page width.
Then the organization owning the website got another sponsor, who's logo I had to add to a column on the right. I created a new id for the 5th "button" and created a div for it. Uploading it, I noticed that a scroll bar had suddenly appeared on the bottom of the page, for no apparent reason.
I first suspected the button to be the problem, but eventually found out that the right-most decorative div was bending the page width, despite using absolute positioning. Both of the divs use the same code, only mirrored for left and right. I have no idea what is causing the problem..
(You can see the problem in action while it lasts at www.torucon.no/no/)
Please help me out! Here is the CSS for both of the divs:
#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}
#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}
Here is an HTML snippet showing the HTML of the divs:
<div class="wrapper"> <!-- Contains the entire website for structure -->
<div id="wolf">
</div>
<div id="lion">
</div>
((In case you didn't get it: The wrapper div is supposed to be centered, and it is. But when I resize my window, I find that a scroll bar appears long before the wrapper content is even close to the browser window borders. That would be annoying on computers with low resolution or small screens!))
I think what you want is to have the lion and wolf progressively appearing as the user widens the browser viewport, but otherwise partially hidden off to the sides of the wrapper. Correct?
I think you're only safe option to achieve this without triggering the scrollbars you don't like are to combine the images into one and attach them as the background image on the body element of the page.
I believe you're right about using overflow-hidden on the body -- you'd loose the ability to scroll to see overflowed content if the viewport is resized down below the wrapper's width.
I have checked that you posted link http://www.torucon.no/no/ but i coudnt see bottom scroll bar ,
Anyway , Why you cant set background?
<body>
<div class="overlay">
<div class="wrapper">
</div>
</div>
</body>
<style>
body{width:100%; background:---;}
.overlay{width:100%; background:---;}
<style>
I am trying out Products.Carousel. I created a Carousel for my homepage,and added two Banners, which rotate automatically after n seconds.
Problem is I am supposed to set the width and height in the Carousel settings, or leave those values blank to use the ones for the first banner.
What I wished is that the carousel used the same width for the main content area. I tried to set a fixed value, but of course it won't work in different resolutions (the banners might invade the right portlet area, or might be too short for the main content width).
Any ideas on how I can work this around?
You should be able to give the Carousel a variable width by overriding Products.Carousel.viewlet (either in filesystem code or in portal_view_customizations). You'll probably want to base the Carousel width on the width of another element, like the #content div:
<div tal:condition="view/available"
tal:attributes="id view/element_id;"
class="carousel">
<tal:banners tal:define="banners view/banners;"
tal:condition="banners"
tal:content="structure banners">
Banners
</tal:banners>
<tal:pager tal:define="pager view/pager;"
tal:condition="pager"
tal:content="structure pager">
Pager
</tal:pager>
<script type="text/javascript" charset="utf-8" tal:content="string:
(function ($$) {
$$('#${view/element_id}').ploneCarousel({
height: ${view/height},
width: $$('#content').width(),
transition: '${view/transition}',
speed: ${view/speed},
delay: ${view/delay}
});
})(jQuery);
">
</script>
</div>
I don't have an answer, only ideas.
can you set a class on the banner area that will set its width the same as the main content area?
can you use a % width?
or the evil, but successful, method I've used:
flash banner using swfobject.js