I have a simple HTML structure, which works fine in most browsers, but in IE 10 / 11 the top div is not shown.
As can be seen from the code segment below, I use knockout to control the visibility of the div that contains the problematic div (ClassA) by adding a class to make it visible and add animation. Except for the first div, everything else contained in the parent (ClassA) works fine.
<div class='ClassA' data-bind="css: { 'classB': isVisible } ">
<div class='selectionHeader'>
<h2 class='selectionTitle'>Select Data</h2>
</div>
<div class='selectionContent'>
...
The div is there in the DOM in IE, but is not taking up space and when you hover over it, it shows above the div that contains it, instead of being inside it.
I found that if I play with the div's display status in IE's developer tools, going to display:none and then back, the div suddenly shows, but this does not persist and if I reload the page, it's hidden again.
I tried clearing the cache but that did not help.
Anyone have any idea what's going on here?
Thanks in advance!
Related
I have a p-multiselect component from primeNg inside a div,at first the menu, when expanded, was being cut by the accordion. We solved the problem using appendTo="body" in the element. Now the values are shown correctly, the problem is that when i open the console or when i use a mobile device to open the web app the menu from the component moves to the right/left, but if i remove the appendTo this problem disappear. We tryed with z-index properties as alternative to appendTo but didn't work. How can i solve this?
We are using Angular 8.
EDIT: the first image is when the console is close, the second one is when the console is open (if you read above i wrote the exact opposite case, this is because at first we tried to solve this aligning the left margin, in these picture we are not aligning the margin).
Below i added the html code we used.
Try this one, I'm also facing this issue on p-dropdown via Angular10;
When you inspect to html. left position of the panel is a bit shift that cause by resizing of the screen.
The solution
style.scss - is one this a must, or you need ::ng-deep if you paste this class on other .scss file
.force-left {
left: 0 !important;
}
.component.ts
<p-multiselect
...
panelStyleClass="force-left"
...
></p-dropdown>
We found the solution 1 week later i posted this question. We solved this problem defining an attribute inside a div (the outermost) and, in the multiselect, we used appendTo with the attribute we defined in the outer div. This solved the problem.
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
I've recently added a facebook like button to my site and it's causing a horizontal scrollbar to appear when it's not needed. It doesn't appear in Chrome but is there in Firefox and IE.
I've checked the created code in Firebug and can't see what's going wrong.
Here's a link to the site so you can see: http://www.swiftfurniture.com/
As you can see, on Firefox and IE (possibly other browsers too), there's a horizontal scrollbar when it isn't needed. It's definitely the Facebook like button causing it, because when I comment that out, they disappear.
I've added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.
I know there's plenty of other questions similar to this, but with using PrestaShop I don't really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the "social module" I've created... i.e - just one file rather than messing around with header files etc of PrestaShop.
I've looked into your problem a bit with Firebug and can share some observations that might be helpful.
There is code that is being injected into your <div id="fb-root"></div> and within that is an iframe with an inline style width of 575px.
That is what is causing the scrollbars.
You can add to the "fb-like" attribute data-width="100px"
The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.
You can resolve this issue by placing the fb-root div as the first child of your body element
<body>
<div id="fb-root"></div>
The script tag and fb-like div can remain in their original place.
Ref: Facebook documentation and bug report
I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.
Good Luck, hope that helps.
There is a DIV just after
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">
Remove position absolute from this and that horizontal scroll will disappear
after that it will show some content saying
Given URL is not permitted by the application configuration.
so either just remove this DIV or apply
display:none; to get this working perfectly
See this screenshot
having Problem see there is a horizontal scroll
having solution see there is no horizontal scroll but unwanted
content in circle.
applying display none; to this div or by removing this div
completely from the code, will lead you to the solution
None of the answers here worked for me so I tried it myself. I found a solution:
Put following CSS in your site head:
#fb-like-wrapper iframe {
width:100px!important
}
Put following HTML where you want to show your like button:
<div id="fb-like-wrapper">
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="false"></div
</div>
There you go :)
Add this to your css
.fb-like{height:20px}
Add attributes data-width and data-height to
<div class="fb-like" data-width="124px" data-height="20px"></div>
This also prevents the vertical scrollbar from appearing if it is not needed.
You can view the issue on:
http://www.caterinaligato.com/
We can't reproduce the issue on IE7 or any of the Firefox versions. Using the DeveloperTool on IE8 its showing that the padding is inside the <div id="bannerArea">, however, we have tried #bannerArea * { padding:0; margin:0; display:block; } and that hasn't helped.
Please note that the 'Compatibility View' is off.
If anyone has any advise that would be great!
Start by adding overflow: hidden; to your BannerArea class. I'm not convinced that the star hack is necessarily the best option either. I would suggest removing that until it's proven that you absolutely need it.
Finally, make sure your <a> tag has its content all on one line. IE has historically had a degree of difficulty with the correct layout when anchor tags have line-breaks in the markup, displaying whitespace where there shouldn't be any.
Your line of markup:
<div id="bannerArea"><span class="bannerContainer first"><a href="#" class='banner-95 bannerImage' title='' rel='nofollow'><img src="/media/pics/site/imagecache/683C6A596432B154340F913300D76915.jpg" width="958" height="346" alt=''/></a> </span></div>
...splits the tag across three lines, which may be contributing to the issue.
use float:left for "bannerArea" it will reduce the white space in IE8, But the position will move right, need to reset the position.
I'm pretty sure this is happening because of your drop-down menu. If you add overflow:hidden to you "bannerArea" div, then the white space vanishes, but the placement is ruined. When added overflow:hidden to "nv" div, the image came back to it's place. So you have take care of the drop-down menu. Perhaps you can use scrip drop-down instead of pure css?
I want to have an anchor with a specific height and width.
There is no text on it since it's meant to be put in front of a certain area of the page.
Here is the code:
It's working fine in everything but IE6 and IE7. If I add a border, I can see that the anchor has the correct size, but if I try to click it, only the top part will be clickable.
I don't know why it's doing this. I tried adding a onclick even with an alert, and the same thing, it's impossible to click on the bottom part of the anchor.
It's really weird, did this happen to anyone before? Anything will help.
another way of handling this issue is a little "hack/workaround", when the block element got a background-color everything is fine, as you aspect it. make use of something like this:
a {
..
background-color: white;
opacity: 0;
filter: alpha(opacity=0);
..
}
In previous versions of IE, its not possible to register the onclick event on block level elements themselves. Instead, IE applies the onclick to the text or inline elements inside the block.
I've found that putting a transparent image inside the anchor that is the same size as the full anchor will register the onclick.
<a href="/" style="width:370px;height:80px;display:block;position:absolute;">
<img src="Transparent.gif" style="width: 370px; height: 80px"/>
</a>
Since this link is absolutely positioned it sounds to me like there is another block partially overlapping it thus hiding half of it from the click event.
Any image placed in the anchor background, and then positioned out of sight will fix your problem for IE6 and IE7. You need not have an image the full size of the anchor as suggested.
This means you can use a sprite or other image that is already being loaded on the page to save another call to your server.
<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a>
it could be that this is a z-index issue with another div/span/etc.