I have mat-grid-list where I am listing items in the view.
issue 1:
Each item has a mat-grid-tile-footer section where I display a angular material button. The button is currently aligned left side in the footer section and I want to align the button in the centre of mat-grid-tile-footer using below code ( flex row centre is also not working inside footer) but it's not working. Any ideas ?
issue 2:
On applying [style.background]="'white'" to the footer the mat-raised-button text also gets invisible. Seems like it is overriding the button behaviour too. Any ideas ?
<mat-grid-tile-footer [style.background]="'white'">
<div fxLayout="row" fxLayoutAlign="center center">
<button mat-raised-button>Try me</button>
</div>
</mat-grid-tile-footer>
TRY 1
On using margin: auto I see the changed styles is not picked up and below is the used styles
.mat-grid-tile .mat-grid-tile-header>*, .mat-grid-tile .mat-grid-tile-footer>* {
margin: 0;
padding: 0;
font-weight: normal;
font-size: inherit;
}
Issue 1: adding CSS .mat-grid-tile-footer div{ margin: auto; } resolves it
Issue 2: unable to observe the behavior of the text getting invisible
working stackblitz here
update: in light of comment below...
remove margin: 0 from the class in your question... so that the CSS is only:
.mat-grid-tile-footer div{ margin: auto; }
.mat-grid-tile .mat-grid-tile-header>*, .mat-grid-tile .mat-grid-tile-footer>* {
padding: 0;
font-weight: normal;
font-size: inherit;
}
Related
I need help keeping my footer stuck to the bottom, but not overlap the upper elements either. I'm still fairly new/rusty to this since it took me 2 years to find a web job after college, so I haven't kept up as much as I should have.
Anyways,
This is the format of the html I have. I want the "footer" to be stuck at the bottom so when they scroll up from the bottom it stays. But I also don't want it to be pushed up too high to make white space below it.
I've been trying to use a "position: absolute" style for the footer to keep it on the bottom. But I just read somewhere this bumps it out of the regular flow and that's what causes overlapping.
So how can I reformat my styles to allow the footer to stay below, but not overlap?
HTML:
<html>
<header></header>
<body>
<div class="content">
<div class="hd">Content of header</div>
<div class="bd">Content of body</div>
<div class="ft">Content of footer</div>
</div>
</body>
</html>
CSS: (basic parts)
div {
display: block;
}
*, *:before, *:after {
box-sizing: inherit;
}
.hd {
position: static;
flex: 0 0 auto;
}
.bd {
position: relative;
flex: 1 0 auto;
}
.ft {
position: absolute;
bottom: 0px;
flex: 0 0 auto;
}
Just add a margin to the bottom of your body equal to your footer's height.
So if your footer has a height of say, 100px, then you need to add this to your css:
body {
margin-bottom: 100px;
}
I followed the instructions from the link that sweaver2112 suggested, and I had to remove a few duplicate elements and change others, and I finally got the footer to not overlap. Had to use flex to get it to work with the other div elements
.content {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ft {
flex: 0 0 50px;
margin-top: auto;
}
Thank you all for the support!
Link for answer purposed that I used: LINK
I think you might be looking for position: fixed;
Ex:
.footer {
position: fixed;
bottom: 0;
}
This sticks the footer at the bottom of the window regardless of the content so when you scroll the footer will always stay at the bottom. This will however be above the content (overlap), so you need to also apply AndrewL's option to keep the content from going under the footer.
I can't find a way to do this
There seems to be padding placed above and below the element, although I have set it zero
https://plnkr.co/edit/WvEqNCxEcLY5yS1IT738?p=preview
<div>
<button>hello</button>
</div>
<table><tr><td>
<button>hiya</button>
</td></tr></table>
td,
div{
padding: 0;
height: 10em;
border: solid;
}
button {
height: 100%;
width:100%;
border:solid 10px #f00;
}
I don't want to use absolute position as the contents vary, and JS would be an overhead I couldn't live with!
Is there a known bug here? Would anyone have a link to it so I can watch it not get fixed for years and drives me to a stress related end
Thanks in advance
ios pic
chrome on win 10 (desired result)
Thebutton, input, textarea, img, video, audio etc. are REPLACED ELEMENTS. The positioning rules for them are other than for standard elements. You can try to enclose replaced elements into a span or div.
Add <div/> inside <td/> and put <button/> into <div/> it will work properly. Add styles to new <div/> element and use:
button
{
height: 100%;
width:100%;
padding:0;
margin:0;
}
<table><tr><td><div class="replaced-element-container"><button>hiya</button></div></td></tr></table>
Well, this is embarrassing but it meets W3C requirements.
For one table cell in the row:
td, div
{
padding: 0;
height: 10em;
border: solid;
display:block;
}
button
{
height: 100%;
width:100%;
border:solid 10px #f00;
}
But it doesn't resolve problem that button is replaced element. It is still in container made from <td/> element.
Edit: The main issue is this: overflow: hidden and overflow: auto affect fixed positioned elements in iOS.
So if I have a fixed positioned modal dialog in a component within a scrolling feature of the page, that element is not displayed wherever it exceeds the bounds of its parent. This is really messed up, as it's not how fixed positioning works on any other system. So what's the official response to this?
Original post:
I have a modal dialog that works fine on desktop and Android, but on any browser on my iPad, the modal dialog, including the modal overlay, gets hidden wherever it exceeds the boundaries of its parent container (even though it is fixed positioned). I know that this isn't how overflow: auto is supposed to work, because it works just fine on all other devices. Anyone else experienced this? I'm sure it has something to do with how iOS handles fixed positions.
Anyway, here's some code:
HTML:
<confirm-dialog ng-if="$ctrl.confirmDlgShowing" on-close="$ctrl.closeDlgs()" on-confirm="$ctrl.deleteInstance()" class="ng-scope ng-isolate-scope">
<div class="modal general modal"><div class="modal-window"><div class="modal-inner" ng-transclude="">
<div style="position:relative" class="ng-scope">
<label class="modal-close" ng-click="$ctrl.onClose()"></label>
<div class="page-heading">
<h2>Are you sure?</h2>
</div>
<input class="btn" type="button" value="Yes" ng-click="$ctrl.confirm()">
<input class="btn" type="button" value="No" ng-click="$ctrl.onClose()">
</div>
</div></div></div>
</confirm-dialog>
SASS:
.container {
overflow: auto;
.modal-window {
// overlay
#include transition(opacity 0.25s ease);
#include position(fixed, 0px 0px 0px 0px);
background: rgba(0,0,0, 0.6);
padding-top: 0.6em;
text-align: left;
z-index: 999999999;
margin: 0 !important;
.modal-bg {
#include position(absolute, 0px 0px 0px 0px);
cursor: pointer;
}
}
.modal-inner {
#include transition(opacity 0.25s ease);
background: $modal-background;
border-radius: $base-border-radius;
display: table;
margin: 70px auto;
max-height: 80%;
overflow: auto;
padding: $modal-padding / 2;
z-index: 1000000000;
min-width: 400px;
#media(max-width: $medium-screen) {
max-height: 70%;
padding: $modal-padding;
}
}
}
Here's the workaround we finally came up with--a new directive to replace ng-if on our modals that places the object on the body. Plays nicely with other Angular bindings too.
angular.module('app').directive('rootIf', function()
{
return {
restrict: 'A',
link: function (scope, $elm, attrs)
{
scope.$watch(attrs.rootIf, onChangeRootIf);
function onChangeRootIf()
{
if (scope.$eval(attrs.rootIf))
$("body").children().first().before($elm);
else
$elm.detach();
}
}
}
});
Simply put the question is - is there a way to align link text within an action link vertically?
I need to make a button-looking Html.ActionLink control.
There is a reasonably good example at Html.ActionLink as a button or an image, not a link
I have implemented this approach, however, I need not just an "image" button,
but an image button with a text shown on it, and this text depends on view model's state, so that I cannot simply put it on an image.
Here is what I have (Razor):
#Html.ActionLink(#commitee.Name, "CommiteePage", "SecureFolder",
new { commiteeName = commitee.Name, page = 1 },
new { #class = "commiteeButton" })
and CSS:
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
}
The result is OK, but: the text of a link is located on the top of an image, and not in its middle (vertically).
I do not know how to center link text vertically, so that it can be located right in the center of an image.
Of course, there can be another approach (see below) but maybe it is still possible with approach mentioned above?
<a class="nonunderlinedlink" href="#Url.Action("CommiteePage", "SecureFolder", new { commiteeName=commitee.Name, page = 1 }, null)">
<div class="commiteeButton">
<p class="pstyle">#commitee.Name</p>
</div>
</a>
Try the following changes in your css
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
display: table-cell;
vertical-align: middle;
}
Rex (see comments to my question above) suggested putting padding-top to CSS, that has resolved issue without causing collateral layout problems.
Thank you all for your quick reply!
I know it's a bit late but you could also use line-height: 50px; to center your text vertically
I have a problem with a div that at the begin is fixed in the bottom-left corner. I need to do it draggable but when I use jquery to do it the bottom position remains and the size of the div changes.
You can see the behavior in this page: http://paraguasparados.com
The div css code is:
.fcp-cpanel{
position:fixed;
bottom:20px;
left:10px;
z-index: 99999;
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('../img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
The jquery code is:
$jn("#fcp-cpanel").draggable({
containment:"body",
scroll: false,
opacity: 0.35
});
When in firebug I remove the 'bottom' css style it works like it should.
Thanks for any help.
The easiest solution to this is to add a width and height to your fixed draggable <div> to stop it from resizing on drag.
The problem is that you are making a fixed element draggable and so the bottom css attribute is messing it up when you start moving it. A fix for this is to create a container div that has the fixed css attributes and inside you can add the draggable element. Something like this:
css:
.fcp-cpanel-container{
position:fixed;
bottom: 10px;
left:10px;
}
.fcp-cpanel{
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
html:
<div class="fcp-cpanel-container">
<div class="draggable fcp-cpanel">
<p><b>Amigos Online</b>
<span id="onlusers" class="onlusers">0</span><span onclick="register()"><img title="Registrar" alt="Registrar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/visible.jpg"></span>
<span onclick="maximize()" id="fcp-micon">
<img title="Maximizar" alt="Maximizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/max.jpeg">
<img style="display:none;" title="Minimizar" alt="Minimizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/min.jpeg">
</span>
</p>
</div>
</div>
I set up a working example with your code here: http://jsfiddle.net/NdUNu/.
I tried this and it did what I wanted
$(function() {
$("#draggable").draggable({ containment: "window" });
});