I'm seeing a bug that is intermittently reproducible only on iPhone Safari (not on any other mobile or desktop browser not even macbook safari). The code looks like:
<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
<ul ...><li..></li> <!-- some ul containing li omitted for brevity-->
<label class="certainClassname" style="font-size: small; font-style: italic; width: 100%; text-align: center; background-color: yellow">
{{"msg" | translate}}
</label>
</div>
In other style sheet I have:
.certainClassname {
cursor: pointer;
word-break: break-all;
}
msg = "PKtest!" for my testing though it usually has another value.
The problem is that this label is getting cropped at the edges when the bug is reproduced as below:
This bug is only seen on Safari iPhone and none of the other browsers, and seems to only happen the first time that page is loaded, and not later. It could be related to zooming because even the tiniest pinch-to-zoom on iPhone fixes it and the label text (and yellow) expands fully.
Could someone please help me diagnosing this in CSS above? I've tried to fix using each in css of label but none have worked:
display: inline;
display: inline-block;
display: block;
padding: 2px 10px 2px 10px;
margin-left: auto;
margin-right: auto;
z-index: 999;
clear: both;
(all these above tested but none fixes this issue seen intermittently and only on iPhone Safari).
The reason the label is getting cropped might be because of style="overflow: auto; height: calc(100% - 55px)" for div.
div is the parent of label. Therefore label is inheriting its style from its parent. You may consider removing height: calc(100% - 55px) to see if it works
It's difficult to get the idea without reviewing working code. But I tried to run your code, regenerate the bug and here is the possible solution. Let me know, is it something you are looking for?
.certainClassname {
cursor: pointer;
word-break: break-all;
font-size: small;
font-style: italic;
width: 100%;
text-align: center;
background-color: yellow;
display: inline-block;
}
ul {
padding: 0;
}
<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
<ul ...><li..></li> <!-- some ul containing li omitted for brevity-->
<label class="certainClassname">
{{"msg" | translate}}
</label>
</div>
I think you have to set you label around a div with width: 100% a background-color: yellow
Related
I'm currently working on a website with a standard contact form. The button for this contact form is rendering inconsistently and I can't figure out why, I believe it is a rendering bug within IE Edge.
http://jsfiddle.net/fxzj2ma2/1/
<div class="col-xs-8 pull-both form-wrapper">
<div class="col-xs-6 submit-wrapper">
<button class="submit" type="submit">Submit your message</button>
</div>
</div>
.col-xs-8 {
width: 66.66666667%;
float: right;
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
.col-xs-6 {
width: 50%;
}
.submit-wrapper {
float: right;
padding: 0;
}
.submit {
background-color: #000;
text-align: center;
padding: 11px 0;
text-transform: uppercase;
font-size: 24px;
border: 2px solid #fff;
color: #fff;
width: 100%;
}
Within Chrome, Firefox and even IE8 the button functions exactly as expected as displayed in the Jsfiddle linked above. The text within the button is centered and when the button is too small the word 'message' wraps beneath 'submit your'.
Within IE Edge the button is notably off center from the minute it renders, it stays off center while resizing the button and when the text meets the edge of the button it overflows as seen on the third image below. Yes, it is possible to resolve the overflow with overflow: hidden; but that just masks the issue and you can't read all of the text.
http://i.imgur.com/XZwS9I3.jpg - On page load.
http://i.imgur.com/j6zukux.jpg - 1080px screen.
http://i.imgur.com/Wdesph2.jpg - 720px screen.
This can be fixed within the IE developer tools by either disabling text-align: center;, adding float: left; or word-wrap: break-word; but that only works within the developer tools, any of these fixes applied within css do not fix the problem even with !important.
Is anyone able to confirm whether this is a rendering issue or if there is a fix?
I have a small website that i tested on IE,FF and it seems to work fine.
when i try it on chrome or safari some of the elements get positioned in the wrong place - but only some of the time. this happens around 50% of the time (5 out of 10 refreshes).
these are the elements and related CSS:
<div id="ctl00_mainFormPlacHolder_incidentsList" class="incidentsList">
<a href="ManageUserTasks.aspx?IncidentID=7">
<div class="incident lightBackgroundMarginBottom completed" runat="server" onserverclick="incidentClicked">
<div class="incidentName"> All Completed Incident </div>
<div class="incidentDateTime"> <span>8/12/2013 | 08:42</span> </div>
</div>
</a>
</div>
.incidentsList {
max-height: 820px;
overflow-y: auto;
overflow-x: hidden;
}
.incidentsList a {
text-decoration: none;
}
.incident {
width: 100%;
height: 64px;
line-height: 64px;
}
.incidentName {
height: 100%;
width: 50%;
text-align: left;
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
overflow: hidden;
margin-left: 10px;
}
.incidentDateTime {
height: 100%;
width: 40%;
text-align: end;
float: right;
margin-right: 10px;
}
as you can see what i want to have is a line (.incident) with 100% width, and in it on the left i should have some text (.incidentName) and on the right side some other text (.incidentDateTime).
i have several lines, but even with a single line i get the same problem -
what happens is that sometimes the right side text (.incidentDateTime) is displayed exactly 1 line below where it should be.
what am i doing wrong?
well I think its the cascading effect, like when the content on either of the div gets a bit larger, the div containing it grows since its in percentages, and maybe giving a "max-width" property to both the adjacent divs shall make it concrete.
I' using a div on my website with the following css class:
width: 100%;
margin: 6px auto 0;
height: 51px;
line-height: 50px;
text-align: center;
max-width: 1290px;
There are several links in this div with the following css class:
display: inline-block;
width: 7.5%;
Note: I've also tried the following:
display: inline;
padding: 0 20px;
This layout works fine on all major browsers (including Android stock browser), however im experiencing nasty problems on Opera Mobile when zooming in. Have a look:
It is being wrapped into 2 lines basically.
( div id="menu" )
A simple:
white-space: nowrap;
to the #menu class fixed this problem.
Have been searching the net for the past hours to find a solution to this, but couldn't find it, so here I am.
I need the width of the div to be 100% minus the width of the left div.
So that the div to the left of it stays the same width (390px) but the other div adjusts its size depending on the resolution . I have found the solution where it has a fixed width div on both sides, but just cant figure this out.
Simple solution:
<div id="content">
<div class="padder">
</div><!-- .padder -->
</div>
<div id="sidebar">
<div class="padder">
</div><!-- .padder -->
</div>
CSS:
div#content {
float: right;
width: 100%;
}
div#content .padder {
margin-left: 330px;
padding: 0 30px 0 0;
}
div#sidebar {
float: left;
width: 300px;
margin-top: -30px;
padding-left: 30px;
margin-right: -330px;
}
This will allow you to have a fixed sidebar width and a full width content area. I have used it many times and it works like a charm.
This type of calculation isn't currently supported in CSS (certainly not in Chromium 12/Ubuntu 11.04), but there is a calc() function defined in CSS 3, which would allow for this kind of behaviour, using simple mathematical functions:
section {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
p {
margin: calc(1rem - 2px) calc(1rem - 1px);
border: solid transparent; border-width: 2px 1px;
}
p:hover { border-color: yellow; }
(Above example taken directly from the W3.org.)
My own (in-exhaustive) tests show:
+----------------+-------------------+
| Browser | Ubuntu 11.04 |
+----------------+-------------------+
| Chromium 12 | Fails |
| Firefox 5 | Fails |
| Opera 11.10 | Fails |
+----------------+-------------------+
The above results were obtained using the named browsers and a css calc() demo, the code of which is below:
HTML:
<div id="box">This is the box.</div>
CSS:
#box {
width: calc(100% - 20%);
background-color: #f90;
font-weight: bold;
color: #fff;
line-height: 2em;
text-align: center;
margin: auto;
}
(If anyone would like to run the above test in the browsers on their platform, and supply the results, or edit them in to this answer, that would be much appreciated.)
As pointed out, by clairesuzy, in comments:
[Take] a look at caniuse it does work in Firefox if you use width: -moz-calc() but that's about it ;)
And, indeed, in Firefox 5 (Ubuntu 11.04) it does work (the other vendor prefixes don't appear to do anything for Opera or Webkit, though; sadly): Revised vendor-prefixed demo.
Reference:
CSS3 Values and Units.
<div id="left">...</div>
<div id="content">...<br> more content</div>
#left {float: left; width: 390px; background: #f76922;}
#content {overflow: hidden; background: #eee;}
float the left div and make a new block formatting context out of the right div (overflow: hidden is one way to do that), that way it will take the remaining space
Example Fiddle
There really isn't a way of doing this with straight up CSS right now in browsers other FireFox (see the MDN docs). You could use javascript to do the same, but I'd suggest rethinking your layout.
EDIT: actually IE 9 can handle it as well, see MSDN docs. Yay for IE?
Maybe this is not directly related to the question but I had a similar problem to arrange items in a list. The fixed-width element is to the right of each item. I've managed to solve this with the following approach. The idea is to balance a positive padding-left with a negative margin-left, while the width is set to 100%:
.item {
max-height: 40px;
}
.item-title {
display: inline-block;
height: 40px;
width: 100%;
margin-left: -70px;
padding-left: 65px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* This one should be fixed-width. */
.item-params {
width: 60px;
height: 40px;
float: right;
}
Having a problem with IE7, here is explanation.
HTML
<a class="item" href="http://google.com">
<div class="itemImg">
<img src="http://img-fotki.yandex.ru/get/4512/vmazann.0/0_52db2_1c3135a9_orig.jpg" alt=""/>
</div>
<h3>Hello World</h3>
</a>
CSS
.item {
color: #140804;
cursor: pointer;
padding: 17px;
position: relative;
text-align: center;
text-decoration: none;
width: 142px;
display:block;}
.item * {
cursor: pointer;}
.itemImg {
background: none repeat scroll 0 0 red;
height: 150px;
line-height: 150px;
margin-bottom: 10px;
overflow: hidden;
text-align: center;
vertical-align: middle;}
.itemImg img {
vertical-align: middle;}
Result
http://jsfiddle.net/qjSpS/11/
Problem
In IE7 image is unclickable
My thoughts on problem
It seems that problem is related somehow with hasLayout property setting on .itemImg. If I remove properties that trigger hasLayout (height: 150px; and overflow: hidden;) then image will be clickable
Question
Is there any way to solve this problem? height: 150px; and overflow: hidden; are required properties.
It may be that in IE you can not wrap an inline element <a> around block level elements <div> or <h3>.
Most browser will ignore it and act how you'd expect, but IE is pretty strict on the matter.
THis is how i solved this problem..instead of:
<a><div><img></div></a>
i did this:
<div><div style=background:url(img.jpg);width:10px;height:10px;></div></div>
worked like a charm.
Have you noticed that with the image the red border around the edge is clickable?
I think the div is the cause of the problem.
can you do away with the div?
I tweaked your example to show how it might work without the div:
http://jsfiddle.net/qjSpS/10/
EDIT
had another go: http://jsfiddle.net/qjSpS/14/
Not completely happy but it has made all the elements clickable.
if ($.browser.msie && parseInt($.browser.version, 10) === 7) {
$('.itemImg').click(function () {
$(window.location).attr('href', $(this).parent('a').attr('href'));
});
}