My problem has to do with how mobile browsers seem to be ignoring the border radius attribute when inside a div with overflow:scroll. Below is an example of the problem in a jsfiddle that needs to be opened in a mobile browser. As you scroll you will see that the red boxes poke out of the border-radius corners at the top and bottom of the grey element. If anyone knows of anyway to get rid of this problem, please help! Thanks in advance!
http://jsfiddle.net/Thatguyhampton/LLn74/
html:
<div class="card scrollable">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
css :
.scrollable {
box-sizing: border-box;
overflow: auto;
overflow-y: overlay;
position: relative;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.card {
height: 300px;
width: 100px;
background-color: grey;
border-radius: .5em;
}
.content {
height: 50px;
width: 100%;
background-color : red;
margin-top: 10px;
margin-bottom: 10px;
}
Just want to stress that I only see this on mobile browsers.
remove the -webkit-overflow-scrolling: touch; and it will fix it :)
Related
See the fiddle
https://jsfiddle.net/m942h0wm/6/
HTML
<div class="container" ng-app="app">
<div class="main">
<p>Main</p>
</div>
<div class="aside">
<canvas class="chart chart-doughnut"
chart-data="[10,20,40]"
chart-labels="['one', 'two', 'three']">
</canvas>
</div>
</div>
CSS
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
border: solid 10px;
}
.main {
flex-grow: 2;
flex-basis: 300px;
}
.aside {
flex-grow: 1;
flex-basis: 200px;
}
if you shrink the window so the layout pops to vertical, when you resize back up the layout doesn't pop back
has anyone else found this and solved it?
I found the solution here
Flex items not shrinking when window gets smaller
min-width: 0;
on the items :)
That did not work for my linechart, I had to use :
canvas
{
width: 100% !important;
}
from https://github.com/jtblin/angular-chart.js/issues/614
How to add line break in tooltip
I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code
http://codepen.io/apps4any/pen/RWQLyr
Html
<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
<md-content layout-padding="">
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip>
List1<br>
List2<br>
List3<br>
List4
</md-tooltip>
</md-button>
<div style="margin-top: 150px;">
</div>
</md-content>
</div>
CSS:
.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
box-shadow: none;
border: none;
transform: none;
-webkit-transform: none; }
.tooltipdemoBasicUsage .left {
top: 70px !important;
left: 56px !important; }
.tooltipdemoBasicUsage .right {
top: 70px !important;
right: 56px !important; }
JS
angular.module('MyApp')
.controller('AppCtrl', function($scope) {
$scope.demo = {};
});
Adding this CSS seems to work in your case (with the <br>s):
md-tooltip .md-content {
height: auto;
}
I'm not sure why Angular-Material hard-coded the height to 22px. You'll need to check whether this change breaks other tooltips.
Or you can apply it specifically to this use case only by giving it a class, e.g. tt-multiline, so you can target it in CSS:
md-tooltip.tt-multiline .md-content {
height: auto;
}
Edit: Starting from Angular-Material 1.1, some class names have changed to start with a underscore.
In this case use
md-tooltip ._md-content {
height: auto;
}
and for specific class
md-tooltip.tt-multiline ._md-content {
height: auto;
}
Since angular-material version >1.1.2 you can simply override .md-tooltip class: (JsFiddle)
.md-tooltip {
height: auto;
}
And if you want to style a particular tooltip, add a custom class to md-tooltip element:
(jsFiddle)
HTML
<md-tooltip class="tooltip-multiline">
I'm a multiline <br/> tooltip
</md-tooltip>
CSS
.tooltip-multiline {
height: auto;
}
both cases tested in angular-material 1.1.2, 1.1.3 and 1.1.4 versions
Set the max-with's below to what ever you need. Now it will do automatic line breaks or put a <br/>
into it.
md-tooltip .md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
md-tooltip {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
overflow: visible !important;
white-space: normal !important;
}
md-tooltip ._md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
You can view the styling for md-tooltip (v0.11.4) here: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css
My own overwrites to the material design styling to allow nice looking multi-line tooltips:
md-tooltip {
font-family: Roboto, 'Helvetica Neue', sans-serif;
.md-background {
border-radius: inherit;
}
.md-content {
height: auto;
width: 400px;
max-width: 400px;
padding: 8px;
white-space: initial;
}
}
#media screen and (min-width: 600px) {
md-tooltip .md-content {
font-size: 14px;
height: auto;
width: 300px;
padding: 8px;
max-width: 300px;
}
}
Or you can use white-space: pre-line; in the custom class of your md tooltip. :)
After a while searching for a solution FROM A VARIABLE CONTENT:
.ts
public matTooltipContent: string = 'Line 1 comment\nLine 2 comment\nLine 3 comment'
.html
<button mat-icon-button aria-hidden="false" class="material-icons-outlined"
[matTooltip]="matTooltipContent"
matTooltipClass="allow-cr"
(click)="onInfoButtonClicked($event)">
<mat-icon >help_outlined</mat-icon>
</button>
.css
.allow-cr {
white-space: pre;
}
See stackblitz example
I am using angular_material 1.1.8, for me single answer didn't work, a combination did.
html
<md-tooltip class="tooltip-multiline">Years ago, when I was backpacking...</md-tooltip>
css
.tooltip-multiline {
height: auto;
white-space: pre-line;
max-width:300px;
line-height: 14px; /*optional*/
font-weight:200;/*optional*/
letter-spacing: 0.5px; /*optional*/
font-size:11px;/*optional*/
}
Hope it helps..
angular material tool tip is warping all content in div so this its working
<md-tooltip class="tooltip-multiline" md-direction="left">
This is tooltip
</md-tooltip>
.tooltip-multiline div{
height: auto;
}
I'm having a really hard time understanding ngAnimate.
HTML:
<body ng-init="hide=false">
<button ng-click="hide=!hide">Toggle</button>
<div class="item" ng-hide="hide">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</body>
CSS:
.ng-hide-add, .ng-hide-remove {
display: block !important;
}
.item {
padding: 40px;
background: orange;
margin-bottom: 50px;
transition: all linear 3s;
}
.item:hover {
background: red;
}
.item.ng-hide-add {
background: red;
}
Example: http://plnkr.co/edit/rixKjjvy4TUiu1r3MSFm?p=preview
The hover transition works fine, but the ng-hide-add doesn't animate at all.
Im trying to make a fluid responsive web that contains an horizontal navbar, my problem is that at a certain width of the browser window the elements of the bar start to relocate one on top each other, is there any way to avoid this behavior in order to make the navbar just stretch until a certain media query break point. I need to website to look al least decent in the ranges where the querys are not activated.
Here's how things look so far:
http://wearehellyeah.com/test/home_formacio.html
<div class="barra">
<!--Menu Principal-->
<nav class="menu-principal">
<ul class="menu">
<li class="item sub"><button type="button" id="menu-lateral" class="sb-toggle-left"><img src="img/iconos/menu.png" alt="search"></button></li>
<li class="item">Actualitat</li>
<li class="item">Activitat de l'oficina</li>
<li class="item">Vocalies</li>
<li class="item">Formació</li>
<li class="item">Serveis</li>
<li class="item">Actualitat</li>
<li class="item no-border">El Col-legi</li>
<li class="item home">Marcar com pàgina d'inici</li>
<li class="item conectados">Conectados 103</li>
<li class="item"><button type="button" id="search"><img src="img/iconos/search.png"></button></li>
</ul>
</nav>
<!--Fin Menu Principal-->
<!--Input buscador-->
<div class="buscador">
<form action="">
<input type="text" id="ip-search">
</form>
</div>
<!--Fin de Input Buscador-->
</div>
The CSS:
.barra {
background: #00b1da;
width: 100%;
padding: 0;
}
.menu-principal {
height: 36px;
line-height: 35px;
margin: 0 auto;
max-width: 1024px;
position: relative;
width: 100%;
}
.menu {
padding: 0;
margin: 0;
}
.menu .item {
float: left;
list-style: none;
}
.menu .item a {
border-right: 1px solid #008ba9;
color: #fff;
font-size: 13px;
padding: 0 .98em;
text-decoration: none;
white-space: nowrap;
}
.menu .sub {
background: #008ba9;
padding: 0 .4em;
height: 35px;
display: block;
}
.conectados {
background: #fff;
color: #4b585b;
font-size: 13px;
padding: .1em 1em 0 2.3em;
position: relative;
}
.menu .home {
background: url("../img/iconos/home.png") no-repeat 2% #00a9a1;
border-left: 1px solid #40c2d3;
padding: 0 0 0 1em;
}
You could add a min-width:
.menu-principal {
min-width:883px;
}
Then it won't go on top of each other. However there are too many options on the navigation bar, you might want to make it a drop-down box when it goes into a mobile media-query range.
e.g. http://vagish.com (as you make the browser width smaller, it changes the navigation bar)
You could have a media query which takes place between 768px and 880px, and reduces the spacing between menu items, and this should be able to make it look fine until you hit the 768px media query.
This would work (along with the CSS above):
#media all and (max-width: 768px) and (min-width: 880px) {
.menu-principal {
padding:0px;
}
.menu-med .item a {
padding:0 .69em;
}
}
I am trying to make an image respond to the browser size, so that when the browser is smaller, the image responds so that there is no scrolling involved. I found a similar question here How can I resize an image dynamically with CSS as the browser width/height changes?, but I'm not able to make that solution work. What am I missing?
I'm including my code below - I am using Wordpress, so it puts a "p" tag around my image automatically, wrapping my image in a paragraph. Also, I'm not sure if I'm including too much code for this purpose, but I wanted to make sure it was all there in case there's an error in a strange place that could be causing the problem...
Here is my html:
<body>
<div id="pop_up_page">
<div class="content_well_pop">
<div class="content_pop">
<div class="portfolio_workspace_9">
<h2>Here's the Header</h2>
</div>
<div class="portfolio_workspace_8">
<p>
<img src="heres_the_image"/>
</p>
</div>
</div>
</div>
</div>
</body>
Here's my CSS:
body {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
}
#pop_up_page {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
.content_well_pop {
left: 0;
width: 100%;
}
.portfolio_workspace_9 {
width: 1000px;
margin: 15px 0 0 0px;
position: relative;
float: left;
display:block;}
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;}
p{font-family: "Franklin Gothic Book";
font-size: 15px;
color: #757372;
display: block;
}
.portfolio_workspace_8 img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}
Thanks
this css rule here:
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;
}
You are specifiying a width on the parent container of the image. Change it to max-width instead of width.
Here is an javascrpt-free, crossbrowser-stable solution you are looking for. I have implemented it in past on that website: http://www.gardinenhaus-morgen.de/.
HTML:
<html>
<body>
<div id="page-wrapper">
<div id="inner-wrapper">
<!-- your content here -->
</div>
</div>
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="background" src="<bild>" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
#bg div
{
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
#bg td
{
vertical-align: middle;
text-align: center;
}
#page-wrapper
{
position: absolute;
top: 0;
left: 0;
z-index: 70;
overflow: auto;
width: 100%;
height: 100%;
}
#inner-wrapper
{
margin: 30px auto;
width: 1000px;
}