Check this code: http://jsfiddle.net/j7C5B/
This is the html
<div ng-app="myApp">
<div class="searchContainer" ng-controller="SearchCtrl">
<ul>
<li class="advSearchRow" ng-show="advSearch">
<div class="todayButton">Today</div>
<div class="tomorrowButton">Tomorrow</div>
<div class="calendarButton">?</div>
</li>
<li><div class="advSearchButton" ng-click="display()">Advance Search</div></li>
</ul>
</div>
It works perfectly with Chrome and Safari but it has a weird behavior in Firefox, anyone has an idea what is wrong with it? I have been trying to only leave height, line-height and different changes with no result yet. Thanks
Edit: It's very different from what I thought, and is rather simple. Firefox requires line-height to have a unit, while Webkit browsers accept unit-less value and interpret as em. To fix it you just have to add em to the transition (or px, doesn't matter since it is 0, but there must be one unit). See http://jsfiddle.net/78rvg/
.advSearchRow.ng-hide
{
line-height: 0em;
height: 0;
opacity: 0;
margin-bottom: 0;
}
The thing is: Your code assumes that the height of the buttons (.todayButton, .tomorrorButton...) to be the height of their container (.advSearchRow); which is not true in the case of floating elements (that's why we need clearfix).
You can fix this by specify the assumption explicitly for the buttons:
.advSearchRow > div { height: 100% }
or use overflow: hidden:
.advSearchRow { overflow: hidden }
Related
I create the image button. The button should change on hover. I set the image with CSS, so there is no need to use src attribute in my code. Chrome, Safari works well, but Firefox 48 completely ignores sizes of the input. I tried both CSS and HTML way. Is it a bug? What is the correct way?
Fiddle:
https://jsfiddle.net/nyppzpqx/5/
Here is the view in firefox 48:
If you add display: block to the .btn-pay element, it works just fine. It may be something with custom browser styles.
Altough as Turnip said, it is better to avoid using img element without src attribute.
You can always restructure the way the html is written. This way you do not need the src attribute. The size is given to the outer div, and then the button is positioned on top of it with an image that spans the entire div:
<div class="btn-pay">
<input type="button" name="kind" value="test" class="btn-pay-input" >
</div>
and then update the styling:
.btn-pay {
width:135px;
height: 60px;
}
.btn-pay-input {
background: url(http://placehold.it/135x60);
color: transparent;
transition: all 0.3s;
width:100%;
height:100%;
text-align:center;
}
.btn-pay-input:hover {
background: url(http://placehold.it/135x60/fff000);
}
Here is the fiddle
Is it possible to transition css on what the computed style becomes, not what that style is explicity set to?
Example
I have the following CSS/HTML
.grow {
transition: height 1s ease-in-out;
}
.hidden {
display: none;
}
<ul>
<li>
<div class="grow">
<ul class="hidden">...</ul>
</div>
</li>
</ul>
Then if I use javascript to remove the hidden class the div will logically grow to fit the newly displayed content, however since the height property did not change, the transition does not take effect. Is there a way to overcome this behavior? If it is possible, I'd like to keep the solution to css.
You are talking about two different CSS properties: height and display. Your transition only applies to height property and, even with display: none; the element keeps the same height.
What you can do, actually, is something like this:
setTimeout(function() {
document.getElementById("hid").className = "";
}, 1000);
.grow div {
transition: height 3s ease-in-out;
display: block;
height: 20px;
overflow: hidden;
}
.grow .hidden {
height: 0;
}
<ul>
<li>
<div class="grow">
<div class="hidden" id="hid">.AaA..</div>
</div>
</li>
</ul>
Hope it helps you.
As Rolyataylor2 mentioned, you cannot animate automatic dimensions. I've encounted this problem before and have a relatively simple JS-based solution.
Check out this Codepen. It uses a small jQuery plugin that I wrote to set the height of the variable-height container to its calculated height based on the heights of its children. It actually clones the element, measures the height, destroys the clone, and explicitly sets the calculated height on the original element.
This is the full code for the plugin and here's the Gist. It's written in Coffeescript but I can convert it to JS if needed. Cheers!
$.fn.extend
setContentHeight: ->
return #each ->
$(#).css('height', $(#).getContentHeight())
getContentHeight: ->
elem = $(#).clone().css(
"height":"auto"
"display":"block"
).appendTo($(#).parent())
height = elem.css("height")
elem.remove()
return height
I have this code that has one "outerDIV" that contains an "innerDIV". On chrome the "innerDIV" size is 491px, whereas on IE it is 425px (same as outerDIV). Hence, on Chrome I can see the first two children of "innerdiv": "My test string #1" and "test2". But for IE I can only see the first child.
I am not quite sure what the "right" behavior should be, as firefox does the same as IE. However I would like to have IE do the same as Chrome.
I have been experimenting with some css styles (mainly overflow and display), but still can't make it right: IE will expand its height instead of its width to make the elements fit.
Can you guys help me figure out a way to change the css so that IE will wraps the div elements inline? As a restriction though, I cannot change the width on the HTML. As a benefit, I am using a css that only loads for IE to patch these kind of IE inconsistencies. The same css will NOT load for chrome, so I don't need to worry about messing with chrome when changing the IE CSS. Thanks in advance!
<html>
<head>
<style type="text/css">
<!--
body {
font-family: helvetica;
}
.myContainer {
overflow: hidden;
border: 1px solid rgba(0, 0, 0, .5);
font-size: 14pt;
height: 49px;
line-height: 49px;
overflow: hidden;
display: block;
}
.myContainer > DIV {
float: left;
white-space: nowrap;
display: block;
}
.myContainer .item:first-child {
padding-left: 10px;
}
.myContainer .item {
float: left;
padding-right: 32px;
}
-->
</style>
</head>
<body>
<div id="outerDIV" class="myContainer" style="display: block; width: 425px;">
<div id="innerDIV">
<div class="item">
--------My test string #1--------
</div>
<div class="item">
------test2-------
</div>
<div class="item">
test
</div>
</div>
</div>
</body>
</html>
You need a doctype tag on your page, otherwise it will be rendered in quirks mode.
What that means exactly differs from browser to browser, but basically it tries to be compatible with very old browsers. In IE it triggers the non-standard box model, which would explain the differences in size.
Look at the W3C recommended list of doctype declarations for a doctype tag to use.
set the width of .item ... container overflow: hidden hides the items which are shown verticaly because the width is more than a 'line' of container can show. When using floating is good to have the width set. DOCTYPE is very important to be set too. I personaly use loose.dtd which gives good competability.
I could not solve it purely with css. For IE, seems like the only way to fix this is to have the "innerDIV" element to have a width >= the sum of it's children offsetWidth. So I just added this to my JS code (special case for IE):
var len = innerDiv.childNodes.length,
innerDivWidth = 0,
i;
for(i = 0; i < len; i++){
innerDiv += innerDiv.childNodes[i].offsetWidth;
}
innerDiv.style.width = (innerDiv + 1) + 'px'; //Safety measure to make up for the decimal places. I guess we could write this line in a better way by rounding up, etc.
I am making a source code display which supports line folding. While it's easy enough with CSS to ensure that the replacement text ("N lines hidden") is not selectable, I would like the hidden source code to still be selected, so the user can just select a chunk of code and not worry about whether part of it is missing due to a fold. Is there a (not-too-hacky) way to do this?
Elements with opacity: 0 can be selected, although they're invisible.
.hidden-selectable {
display: inline-block;
width: 1px;
opacity: 0;
}
<div>Visible<span class='hidden-selectable'>selectable</span></div>
In the above snippet, the 'selectable' string will be present in the selection and the copy-pasted text when the elements around it are selected.
The element needs to have a non-zero width and height, otherwise it doesn't appear in the selection. Also, it has to be inside the element flow (i.e. it can't have position: absolute), otherwise, again, it's not going to appear in the selection. Therefore I give it some very small but non-zero width, so that it doesn't affect flow visibly, but is still "visible enough" to be selectable.
Here's the fiddle.
Here's what else I've tried that doesn't work:
display: none
visibility: hidden
If you have the following structure:
<html>
<body>
<div>before</div>
<div class="folded">this is the hidden source code</div>
<div class="info">N lines hidden</div>
<div>after</div>
</body>
</html>
You should be good with this CSS:
.folded {
overflow: hidden;
height: 0px;
}
.info {
-moz-user-select: none;
//add other browsers' variation
}
EDIT: another option (untested in Chrome)
HTML:
<html>
<body>
<div>before</div>
<div class="folded">this is the hidden source code</div>
<div class="info" data-lines='5'> </div>
<div>after</div>
</body>
</html>
CSS:
.folded {
overflow: hidden;
height: 0px;
}
.info:before {
content: attr(data-lines) " lines hidden."
}
I have an app built on Cordova and on some of my pages I am able to scroll horizontally out of my content into white space.
This is weird as I have nothing there that extends beyond my #wrapper, which is set to width: 100%.
So I was wondering if there was a way I could disable horizontal scrolling in the app altogether?
UPDATE:
Code on page as requested:
body {
background-color: #fff;
font-family:Arial, Helvetica, sans-serif;
color: #b7b8b9;
height: 100%;
width: 100%;
}
iframe{
border: none;
width: 100%;
/*margin-top: 50px;*/
}
#header{
height: 50px;
width: 100%;
}
<body>
<div id="wrapper">
<div id="header">
<div class="headerback">Home</div>
<div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('Refresh')</script></div>
<div class="headertitle"><h2>Get the Look</h2></div>
</div><!--HEADER-->
<iframe src="http://www.mbff.com.au/getthelook"></iframe>
</div>
</body>
Try to debug your page in Chrome (webkit) with the exact dimensions of your device. This solves most rendering issues for me.
I do not know the specific issue here, but it looks like one of your elements is flowing outside of the wrapper. You could for example try this in your css:
div.wrapper { overflow: hidden; width: inherit; }
Although it might be a better idea to find out why your page is expanding horizontally?
I was looking for the solution to this problem for a long time.
Finally I solved it in the following way.
I set style for bodyand html tags:
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
After that I've added div to body and set the style for it:
overflow-y: auto;
height: 100%;
So, I have got fixed body, which contains div with vertical scroll bar.
// Phone Gap disable only horizontal scrolling in Android.
// Add this code in your Phone Gap Main Activity.Initially Declare the variable
private float m_downX;
//Then add this code after loadUrl
this.appView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
// save the x
m_downX = event.getX();
}
break;
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP: {
// set x so that it doesn't move
event.setLocation(m_downX, event.getY());
}
break;
}
return false;
}
});
Try adding the following code to your .html file:
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
For the sake of completeness, I thought the answer which makes use of the official method of doing such a thing via the preference tag should be added:
<preference name="DisallowOverscroll" value="true"/>
Supported by Android and iOS according the documentation.
Default: false
Set to true if you don't want the interface to display any feedback when users scroll past the beginning or end of content. On iOS, overscroll gestures cause content to bounce back to its original position. on Android, they produce a more subtle glowing effect along the top or bottom edge of the content.
In my case it was broken styling like below
<body>
<div style="margin-left:5%; width:100%">Content</div>
</body>
which cause div to became horizontally bigger than body. I could see scroll when app run in browser. Set width to 90% (as it was initially intended) fixed the problem.
Generally, as it already pointed out here, enough to find element with wrong style which makes your page expanding horizontally and fix it.
BTW DisallowOverscroll was not helpful in above case.