i have already spent good time trying to get my popover look as i desire.
the popup currently comes in the center of the screen. but i desire it to be at 50px from the top and width equal to device screen. right now the width seems to be some fix number which i am unable to change.
I don't want to do change it globally so i need it for a specific popup only. The current code to launch is:
let data:any;
let options = {cssClass : 'speech-popup'};
let popover = this.popoverCtrl.create(ProcessSpeechPopup, data, options);
popover.present();
the speech-popup css:
.speech-popup {
width: 100%;
top:68px;
}
the popup html is:
#Component({
template: `
<div padding style="background: rgba(255, 255, 255, 0.5);height:100%;">
<h1 *ngIf="showDoYouMean == true">Do you mean?</h1>
</div>
`
})
You need to have a position: absolute; to use the top css attribute. The width is likely being limited by the pop-ups parent. Try this:
.speech-popup {
position: absolute;
width: 100vw;
top:68px;
}
Related
CSS is acting up. I have a modal that looks like the below when stripped down:
<div id="modal">
<div class="dialog">
<!-- modal content goes here -->
</div>
<div class="backdrop"></div>
</div>
With the following (also stripped down CSS):
.dialog {
/* full width & height (assuming mobile-only) */
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(to bottom, blue, darkblue);
}
.backdrop {
position: fixed;
background: rgba(0,0,0,.5);
}
It all looks great...
until I focus on an input and then this happens:
The dialog background is getting clipped, and I start seeing the backdrop background at the bottom.
How do I fix this (without having to change the backdrop background to match the dialog)?
EDIT: After some testing, I found that setting a fixed-height to the dialog equivalent to window.innerHeight before the input gets focus resolves the blank space issue. It's messy, but I hope someone has a better solution!
your dialog parent has no height that is why dialogs height: 100%; doesn't work properly. try height: -webkit-fill-available; or give your background color to modal which works as a wrapper. and remove position: absolute; from dialog there is no need to use absolute here so try to make it center without it. hope it was helpful
I was able to solve the issue by specifying the height in px, as opposed to using height: 100%. I did this via Javascript, but waiting for DOM load and then replacing height: 100%.
Here's what that looked like:
window.addEventListener("DOMContentLoaded", () =>
window.setTimeout(() => {
// Wait 1 sec; height isn't always correct on load for some reason
const dialog = document.getElementsByClassName("dialog")[0]
dialog.style.height = dialog.getBoundingClientRect().height + "px"
}, 1000);
})
Codepen
Hello,
I'm desperately looking for a simple solution to my problem, my code is available on codepen.
// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
max-height: 300px;
overflow-y: scroll;
}
The objective is to keep the pink footer always visible (pasted at the bottom of the screen), even if the content is too large (like the panel 3 when it is open).
I tried putting a vertical scroll when the content is too large, but I'm not sure how to use max-height in the best way (currently at 300px, line 84).
This solution does not really work, it is not suitable for those with large screens (because max-height: 300px ...).
Would it be possible to do what I want directly in CSS? If so, can you guide me?
Or Javascript is mandatory according to you? The background-gray of the panel must cover the whole area, down to the bottom, with any resolution.
Thanks !
In my opinion, you should break the footer out of the modal and display it separately because the modal is already a fixed element. You could hook into js modal events and display this standalone footer only when modal is opened.
.modal-footer.outer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
background: #fff;
}
http://codepen.io/anon/pen/XpbYeE
Your modal footer was being fixed, it actually was behaving properly, the problem is that it's still a child of another fixed item - the modal itself and thus gets detached when the viewport gets too small for the parent.
http://g.recordit.co/pyMEfO94wE.gif
.modal-body
{
overflow-y:scroll;
height:400px;
}
Your modal body can be made scroll-able to keep footer always visible.You can use any height you want.
I have an absolutely positioned logo in the header bar of my page, that keeps moving down the page when scrolled.
I do not want this behavior, I want the logo to stick to the top of the page and not cover other elements when a visitor is scrolling down the page.
Here is the page in question.
www.giracci.com
and the header logo code.
logoWrapper {
float: left;
height: 0;
position: absolute;
top: 0;
width: 150px;
z-index: 30;
}
If you view the page, you'll see that it doesn't stay put, it scrolls with the page.
First:
Copy the relevant HTML and CSS to your question. There's MUCH more to the equation that you have not included. You need to essentially include all the html up to the nav container, as well as the CSS, and indicating that your question includes bootstrap (I've already done that for you).
Second:
The reason that it's exhibiting this behavior is because one of it's containers - the nav#site-navigation - is getting a fixed class applied to it when you scroll, which applies the following styles:
nav.fixed {
position: fixed;
visibility: hidden;
opacity: 0;
}
And, because you are using the bootstrap class of visible-lg on the logo wrapper, it gets this style:
.visible-lg {
display: block !important;
}
Which overrides the .fixed hidden property.
And, because the logo is inside that wrapper, that causes the logo to show up when you don't want it to.
So, you're using colliding classes, and need to straighten them out.
Add this to your css file:
No need to change much of the code.
your navbar is adding fixed class when it is scrolled.
nav.fixed .logoWrapper {
display: none;
}
First of all I would change these parameters in the css to display correctly the nav, to make sure that the menu items do not go below the logo:
.container {
width:auto;
}
.container.nav-bar {
width:auto;
margin:0 60px;
}
After you've done this, if you want to hide everthing when you're scrolling the page (logo and nav), add this to your css:
nav.fixed.scrolled {
display:none;
}
however, if you want that the only logo is fixed when you're scrolling the page add and edit these parameters on the CSS:
.logoWrapper {
position:fixed;
}
There is one more way around you can try. Because currently on your site it disappears at once so it feels like there is kind of a glitch/stutter, very slight. I needed something like this with my logo so I did it with JS. And it works like a charm. Here is the following code:
$(window).scroll(
function () {
var top = 75;
var currentTop = $(window).scrollTop();
if (currentTop > top) {
$(".logo").css("opacity", "0");
} else {
$(".logo").css("opacity", "1");
}
});
Simply replace .logo with your .logowrapper or whatever. Hope it works.
I want a footer in Jquery Mobile, that is not fixed, but is always at the bottom of the page.
Like this: http://ryanfait.com/sticky-footer/ (but in JQuery Mobile), not like like the standard JQuery Mobile Fixed footers.
So the footer should appear at the end of the content, or the bottom of the screen, whichever is lower.
Any ideas on how to approach this?
Edit:
The basic problem, is that I seem unable to get the div with data-role=content to actually take up the full height of the screen.
I solved this using mostly CSS. The advantages of this over the accepted answer is it will handle cases where the page size changes after the page is shown (such as browser resize, orientation change, or even more simple cases like collapsible/accordian sections). It also has much less Javascript code, and no layout math.
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
[data-role=page] {
min-height: 100%;
position: relative;
}
[data-role=content] {
padding-bottom: 40px; /* based on how tall your footer is and how much gap you want */
}
[data-role=footer] {
position: absolute;
bottom: 0;
width: 100%;
height: 40px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
}
The absolute footer caused jQuery Mobile page transitions to show a flickering footer (particularly the "slide" transitions), so I added this small amount of Javascript:
$(document).live( 'pagebeforechange', function() {
// hide footer
$('[data-role=footer]').hide();
});
$(document).live( 'pagechange', function() {
// show footer
$('[data-role=footer]').show();
});
Basically you just need to check the height of each data-role="content" elements to make sure that with the header/footer/content-area that the vertical space in the view-port is used.
For example:
$(document).on("pageshow", ".ui-page", function () {
var $page = $(this),
vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();
if (vSpace < $(window).height()) {
var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
$page.children('.ui-content').height(vDiff);
}
});
This code will run each time a page is navigated-to.
Here is a demo: http://jsfiddle.net/aBVtJ/1/
Check out this SO:
jQuery Mobile has a native footer that supports a fixed, or 'sticky', position. An example and documentation can be found at http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/
I am familiar with CSS techniques to replace text with an image. For example, here are 9 of them: http://css-tricks.com/nine-techniques-for-css-image-replacement/
Are there any techniques for replacing images? Is there anyway to set the background of an image to an image and then hide or move the foreground of the image (the image src element).
I am trying to write a skin for a site that has an image that I want to replace. Thanks.
From how I understand it he's trying to do this in pure CSS, with no changes to HTML or JavaScript.
That is correct. I am adding a new stylesheet to an existing page. Let say I can not modify HTML or utilize javascript.
After a little bit of tinkering, I figured it out!
img.someclass {
background: url("NEW IMAGE URL") top right;
height: 0;
width: 0;
padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}
This will make the height and width of the actual image 0, but will expand the box to fill the size of the image with padding. The only downside to this is it won't look perfect in older versions of Internet Explorer.
If you have an element surrounding the image, e.g. a DIV, you should be able to set a background image (along with no-repeat and a position) on it, then set the image to display:none.
Alternatively, here's a haphazard solution that seems to work. It positions the image off-screen, then uses the :after pseudo-element to set a background image. It should be workable, but you'll need to fiddle with the values to get it working right. It won't work in IE6 though.
<style>
img.test {
background: url('image_to_show.png') no-repeat right top;
position: relative;
left: -16000px;
}
img.test:after {
content: ".";
color: transparent;
display: block;
width: 16000px;
}
</style>
<img class="test" src="image_to_hide.png">
The best way to replace images is to set the background position. First create the two different images and put them one above the other in the same image. Say your skin element is 50x50 pixels, you'd create a 50x100 image.
Then use some code like this:
.skinElement1 {
background: #fff url("image.png") no-repeat 0 0;
}
.skinElement2 {
background: #fff url("image.png") no-repeat 0 -50px;
}
So to view the second image you move the background up by the required amount. You could either use javascript or your server-side code to set the appropriate class.
Maybe you can set an opacity of an element and then set the background to the image you want.
Musicfreak: I meant using TWO elements.
you will have assign different classes for the two states then write some javascript to have the image change upon an event.
for example:
.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; }
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; }
HTML:
<div id="imageDiv" class="firstImage"> some content </div>
<a onclick="changeImage()">Change the image!</a>
Javascript:
function changeImage(){
var imageDiv = document.getElementById("imageDiv")
if ( imageDiv.className === "firsImage" )
document.getElementById("imageDiv").className = "secondImage"
else
document.getElementById("imageDiv").className = "firstImage"
}