when I create a component ng g c my-component, the content is rendering fine in ie11 once I turn on the polyfills. However, that component breaks the CSS, refusing to be styled -- in particular, it refuses to take any height, regardless of contents. Debugging, at first I thought that it refuses a background color (which I use to identify blocks in ie since there is no highlight-on-hover), but when I add an explicit height suddenly the background color renders.
example (inside of app-my-component):
<article class="my routable component">
<app-child-component></app-child-component>
<footer>should be under the inner component content</footer>
</article>
inside app-child-component:
<!-- this section will never have a height -->
<section class="child component">
<app-inner-component></app-inner-component>
</section>
inside app-inner-component:
<!-- this section naturally will have height after the async returns results -->
<section class="inner component">
<div *ngFor="const item in asyncResultItems">hi mom!</div>
</section>
The footer text will render on top of the app-inner component's content.
I would prefer the footer text to follow -- basically, IE11 should treat app-* elements like divs, but it seems to refuse to count them when giving a height at all (styles inside work just fine, though).
What can be done about that (simply wrapping the component in a containing div also does not work, by itself)?
full example: https://stackblitz.com/edit/angular-fhmded
Note, thanks to amazing help, I have diagnosed the problem (I added more and more of the differences between the minimum example and my actual code til I reproduced it). Flex column is breaking on the child component.
IE11 does not properly support flexbox. As you can see on https://caniuse.com/#feat=flexbox there are a number of known issues. It is also very sensitive to syntax. If I change your flex: 1 rules to flex: 1 1 auto then it seems to work correctly for me at least.
Related
I'm using bootstrap, angular and angular-ui-router
what I want to achieve is this mockup:
where the menu on the left is a navigation bar, a toolbar on the top, some breadcrumbs, content and a footer.
I can get all these elements in place. However, I need to populate the content with a variable number of elements from a rest data source. I want to wrap these nicely, so I am using the following angular / html
<div class="col-lg-12 ">
<div class="row">
<div class="col-md-4 " ng-repeat-start="item in $ctrl.items">
<div> card details here </div>
<div class="clearfix" ng-if="$index % 3 === 2"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
this works, and shows all the data. However, as there is more data than can fit into the div, scrollbars appear on the window
What I would like to acheive is to get the scrollbar to appear in the content div , like the screenshot
I have tried all sorts of css, like overflow: scroll-y, but can't figure it out.
Your problem seems to be related to dynamic heights. Using fixed heights (also %, vh, ... are useable), you can get that layout to work properly. There are a lot of solutions for that.
1. Using %
If you're going to use %, and that would by far be the best option, you have to start at the root tag which basically is <html>. After that you've to add the proper height value to it's child elements you want to use. Keep in mind to start at 100% and shrink your child element to the desired heights.
2. Using vh
The vh value is kinda same as %. You just don't need to set a height to every parent element. Demo
Note: You may have to check if that's working with your target browser.
3. CSS3 calc() function
Propably the newest method. You can calculate values through CSS(3), by using e.g. calc(100% - 100px). That's pretty cool though, but also isn't supported by every browser. See here.
4. Fixed layout
You could also use some fixed positionings. Setting up your footer, header and nav to position: fixed; would also keep up everything smooth and clean. I'd use a fixed layout in order to get that done, since I'd like it the most. Also it doesn't have any incompatibility with legacy browsers.
instead of overflow: scroll-y,
please try:
height:100%;
overflow-y:scroll
*giving it a height enables the scroll bar to appear.
Following on from this question I further evolved the demo messages example in an attempt to create page transitions between two pages with core-lists.
I'm trying to achieve the following:
hero transitions on the fabs on each page
slide transitions (in opposite directions) on the two pages
this to work as expected no matter where you are scrolled on the lists
Note the pages change when the fabs are clicked.
I've had some success but can't get it to work correctly in all aspects as can be seen from my jsbin.
I suspect part of the problem relates to sizing the divs that wrap the core-lists. I can't figure out how they to size these but I believe they are important to the transition effect.
Note also that the flexible padding on the sides of the lists is also important to preserve (similar to what exists on the real inbox)
First, there's no slide-from-left transition. You will need to remove everything related to it in your code.
I have found that the hero-transition doesn't work well with slide-from-right transition. A possible alternative would be, wrap those two paper-fabs in another core-animated-pages.
<core-animated-pages id="pages" selected="{{selected}}"
transitions="slide-from-right"
on-show-snooze="{{showSnooze}}" on-show-inbox="{{showInbox}}"
content
layout vertical flex>
<inbox-editor scrolltarget="{{$.panel.scroller}}" flex>
</inbox-editor>
<snooze-editor scrolltarget="{{$.panel.scroller}}" flex>
</snooze-editor>
</core-animated-pages>
</core-scroll-header-panel>
<core-animated-pages selected="{{selected}}" transitions="hero-transition" style="position:absolute; bottom:48px;">
<section>
<paper-fab class="fab-yellow" icon="add" hero hero-id="primary"
on-tap="{{showSnooze}}">
</paper-fab>
</section>
<section>
<paper-fab class="fab-red" icon="done" hero hero-id="primary"
on-tap="{{showInbox}}">
</paper-fab>
</section>
</core-animated-pages>
Please see this jsbin for reference. Notice that the paper-fabs move just like they are animated with a slide transition ('cause hero-transition animates the shape and position between elements, in this case, the animation transition should look identical to a slide one)! So maybe, you don't need to apply the hero-transition at all?
I am looking at different CSS modularising methodologies and trying to implement some of their ideas into a new project. Some I am looking at are SMACSS, BEM and MVCSS.
I understand that in SMACSS layout rules should be in my _layout.sass file which is fine so my styles are as follows:
.container
+container
+margin-leader
+margin-trailer
+container sets this element as a grid container from Compass Susy and then adds top and bottom margin.
I now want to add a border radius and box shadow to this element.
Where do I place these styles as they don't fit within the layout stylesheet?
2nd issue is:
I have created a media block which basically allows an image to be floated left and some text to be floated right. It has a flipped variation that flips the two around.
I need to be able to specify the width of the image but where does this go? I have for now placed it as part of the media block module code but surely that means that ALL images inside future media blocks will be that width. It seems like the width of the image needs to be elsewhere but I am just not sure where. I know I could add classes to the image in the markup like "small", "large" etc but to be that sounds like adding presentational stuff to the markup which I thought was what were were trying to get away from.
3rd issue:
I have created a title-box module that is marked up as follows:
<div class="title-box">
<h3 class="title-box__header">Upcoming Events</h3>
<div class="title-box__content">
</div>
</div>
I want 3 of these boxes side by side. I know how to do it but unsure of the correct modular way to do this. Any thoughts?
1) According to BEM methodology you can use mixes to solve your first issue:
<div class="container widget"></div>
This means that there are 2 different blocks on the same DOM-node: container (knows about layout) and widget (styles the block with border radius and shadow).
2) You can add class to these images making them elements of media block and then specify types of images with modifiers:
<div class="media-block">
<img class="media-block__image"/>
<div class="media-block__description">Some text</div>
</div>
<div class="media-block media-block_float_left">
<img class="media-block__image media-block__image_type_important"/>
<div class="media-block__description">Some text</div>
</div>
So image elements of media block which are important can be styled with bigger size.
Also you can use modifiers to set float direction.
3) I'm not sure if I got your question right but I think you have two options:
Style title-box itself (e.g. as float with some margins).
Add styles to title-box in it's parent file with cascade if it's possible to use title-box somewhere outside with different layout.
This question relates to Why are the images no wider than 500px in Chrome?
See http://abmphotography.beta.cjbm.net/aileen-kevin
This has now been fixed, but now when the page initially loads in Chrome, the wider images overflow their div.thumbnail containers. See:
Weirdly, if you have the inspector open, focussed on <html> or anything within, the issue immediately corrects itself. Also if you have the console open and evaluate "$('body')" it immediately corrects (this doesn't work when in the javascript file).
Additionally, if you resize the browser above or below width:980px, then it also corrects itself (this is the point that the media queries switch, and the padding between the li's changes.
Update:
I have worked around this issue with the following jQuery:
$('ul.thumbnails img').each(function() {
$(this).closest('li').width($(this).width());
});
However I'd welcome a pure CSS solution.
Any particular reason why you're not using the row and span classes? I think I've had my divs spill outside of the window too, but immediately noticed that I wasn't using those. My structure for one row of content will generally look like this:
<div class="row">
<div class="span12">
<h1>Some Heading</h1>
<p>Some content</p>
</div>
</div>
span12 can be any size you'd like. Since it's a 12 column grid, 12 would use the whole width of the grid. This may not necessarily solve your issue, then again maybe it will! Either way it's just good practice in general.
Sorry, I don't have the exact code with me, but hopefully this works with the example I provide.
Why is it that in IE, some nested divs pop out and sit in the wrong place (example, 200px down from where it should be).
<div style="width:1024px;height:103px;background-color:green;">
<div style="float:left;width:300px;height:103px;"><img src="LOGO URL"/>
</div>
<div style="float:right;width:180px;height:103px;">
</div>
</div>
Does anyone understand what I mean? I'm pretty sure it has nothing to do with double margins. Should I still bother making website compatible with IE7 and 6?
I'm trying to learn html the proper way. I want to be able to ensure my code is always compatible with all browsers and accessible to the disabled. Is there somewhere you would recommend that I can learn the "correct" practices? I understand most HTML, but compatibility can have issues.
Does it work the same in a modern browser? Parent elements are never to expand to contain floated elements. To do what you want, you either need to float the parent or give it an 'overflow:auto' CSS property. But fixing the height of the parent div to 103px will still restrict things.
Your IE problem is most likely because float:right element is appeared after it's siblings. (see number 3 below).
Speaking about how to learn HTML and CSS best practices, I would recommend playing around with CSS Zen garden to see how different amazing designs are built using a "static" html.
Looking at the HTML I see following issues:
Specifying static width and height is not a good idea
float right element should appear before any other sibling (otherwise IE can not render it properly) - (this is most likely the issue).
Having float:left for the other element is not necessary
adding a clear:both in the end of all siblings will ensure that parent will expand in height (without the need to specify height)
so I would change your HTML to this:
<div>
<div style="float:right;"></div>
<div><img src="LOGO URL"/></div>
<div style="clear:both"></div>
</div>