I am currently trying to style a bootstrap 4 Modal window within Angular 5.
I have the scss imported into my global.scss and I am giving the modal window the customClass as followed.
this.modalService.open(content, { windowClass: 'tutorial'});
So far so good the popup shows up, in the bottom left corner. But what I want to achieve is a bottom modal like in this case.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom
but whatever I do I cannot seem to get it working.
I just don't seem to be able to stretch the modal all the way. This is my current scss
.tutorial {
position: fixed;
top: auto;
bottom: 0px;
width: 100%;
.modal-dialog{
margin: 0;
}
}
I assumed width: 100% would be fine but somehow it doesn't work.
Any ideas?
So doing the following worked for me
.tutorial-bottom {
position: fixed;
top: auto;
bottom: 0px;
.modal-dialog{
min-width: 100%;
margin: 0;
}
.modal-header {
background: #3e8acc;
color: white;
}
}
Thx to #DahvalJardosh for pointing me in the right direction
Related
change the position of ‘activate deal’ button like ‘show coupon’ button.
i am using this code for the position of ‘show coupon’ button.
div.folding-button {
position: relative;
left: 610px;
Bottom: 150px;
}
i have tried to change the position of ‘activate deal’ button by using the code :
a.deal-button.activate-button.activate-modal {
position: relative;
left: 610px;
Bottom: 150px;
}
but the ‘show coupon’ button got distorted and ‘activate deal’ button is not clickable
Thanks. help is aprreciated
I have reviewed your code and your problem is that you have only one HTML class for button and 1 main class it there is a coupon in it. If you sort there 2 buttons with 2 different classes and put them into a div of right content you could find a better solution than with css.
Anyway I have done some css research on your website and I have found this solution with css. Try following code bellow and make it responsive for each screen to make it work great. I have tested it with 1920px width screen and it works great.
a.deal-button.show-coupon-button.activate-button.activate-modal{
position: relative;
left: 38rem;
top: -10rem;
}
a.deal-button.activate-button.activate-modal {
display: block;
position: relative;
left: 38rem;
top: -10rem;
z-index: 2;
}
.code-button-bg {
position: relative;
left: 38rem;
top: -12.5rem;
background: #a41913;
}
To prevent title shows behind the button put this into your css
h2.title.front-view-title {
width: 75%!important;
}
I'm trying to make a search overlay for my single page Vue application. On click, an overlay in rendered by Vue.
CodePen: https://codepen.io/cyruscuenca/pen/YdVjaq
I styled the overlay like this:
#searchOverlay {
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
This is one element that is not being effected by the overlay.
#titleBar {
width: calc(100% - 250px - 30px);
height: 50px;
line-height: 50px;
border-bottom: 1px solid #17202a;
color: #D9CDC7;
position: absolute;
background: #212f3d;
top: 0;
z-index: 2;
}
Check out the attached image to see what the page actually looks like:
image
This is what the overlay Vue code looks like:
<div id="searchBtn" v-on:click="searchOverlay = true">Find or start a chat</div>
<div id="searchOverlay" v-on:click="searchOverlay = false" v-if="searchOverlay == true"></div>
This is what the titlebar HTML looks like:
<div id="titleBar">{{title}}</div>
The codepen is great. So to solve your issue, you can either
Move the #searchOverlay up two levels, so it is adjacent to #sidebar and set #searchOverlay to position: fixed
https://codepen.io/anon/pen/PXmBgO
OR
Give #sidebar a z-index higher than 2, e.g. z-index: 10
https://codepen.io/anon/pen/ebWjXa
I have effectively use the following css style:
input.my-text:focus { background-image: none; }
It works great. But how do I continue to hide the background image when the textbox gets populated? I only want the background image to show when the textbox is blank.
I tried :valid: but that does not work the way I need it too.
Is this do-able in css or do I need to resort to javascript/jquery ?
Thanks.
How about "hacking" the placeholder functionality.
http://jsfiddle.net/f01g6spe/1/
input{
position: relative;
}
input::-webkit-input-placeholder{
background: pink;
display: block
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
I want to make my button responsive, so I can't use the image together with background. I can use the second picture of the cart only, but how can style it, so part of it remains outside?
You could apply the background-image to a :pseudo-element of a button element and position them using top and left properties.
button {
position: relative;
width: 20%;
height: 35px;
background: #B7004A;
border: none;
border-radius: 5px;
}
button:before {
position: absolute;
content: '';
width: 100%;
height: 110%;
top: -7px;
left: -3px;
background: url(http://i.stack.imgur.com/Aiy4E.png) no-repeat;
background-size: auto 105%;
}
<button></button>
Is it something like this you are looking for?
jsFiddle: http://jsfiddle.net/vgayjg9j/2/
EDIT: updated the jsFiddle. It now sticks out.
<button><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/shoping_cart.png" /></button>
button {
width: 120px;
height: 40px;
}
button img {
height: 100%;
float:left;
}
From your question I think you want to button to fill the screen if it is on smaller devices?
Media queries is where you should start.
Also make sure you use % for the width of the button, for example if you want you button to fill the screen the css would look something like this:
button {
width: 100%;
}
And if the image should not change then I would define the width of the image in pixels:
button img {
width: 40px;
}
I've got 2 elements, 2 images of exactly the same dimensions, positioned one on top of the other. Say they're called A and B (A is the top one). What I've done is made it so when you hover over A, its z-index decrements by 2 so that B is now on top, and B's hover: increments its z-index by 2 so it's now higher by 1 than A's original z-index (thus image B stays on top until you remove mouse). So basically...
#A {z-index: 5;}
#B {z-index: 4;}
#A:hover {z-index: 3;}
#B:hover {z-index: 6;}
This works perfectly in Firefox and Chrome, but IE doesn't want to hear about it, and my images keep spazzing while hovering over them. Any help is appreciated. Positioning is Absolute, if that matters.
#jklm313
That actually works in my IE9 as well. Maybe I should post the full code since one of my "images" is actually a social network button. So here it is:
HTML:
<div id="myTweetBrown"></div>
<div id="myTweet"><?php include ("myPHP/homepageSoc/tweet.php") ?></div>
CSS:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
position: absolute;
z-index: 3;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 4;
}
#myTweet:hover {
position: absolute;
z-index: 6;
}
tweet.php:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Link to demo website: ***** -- scroll down to Tweet button
This will be up only for so long, because I don't want people to have access like that <.<
Just going to rewrite my whole answer now the source code has been provided.
All "modern" versions of IE, when not in quirks mode, accept this code perfectly fine for divs and links. The problem in IE arises for iframes and other unusual elements, at which point its rendering engine seems to fail. (Shock!) You'll get this flickering for no apparent reason, except perhaps the conflicting doctypes in the iframe and page, which I would also try avoid if possible.
Presuming this link is generated by twitter, I would advise a fallback approach for IE. Instead of hovering between your button image and a twitter provided button image, I would just manipulate the css of the button twitter provided inside the iframe using javascript.
document.getElementsByTagName('iframe')[0].getElementsByTagName('a')[0].className += 'myTweetBrown';
The button looks to be generated by HTML5 rather than being a static image, so it shouldn't be difficult to manipulate:
.myTweetBrown:hover {
background-image: url('../images/tweetBrown.png') !important;
background-repeat: no-repeat !important;
background-position: center center !important;
height: 20px !important;
width: 55px !important;
}
.myTweetBrown:hover * {
display: none;
}
The other approach you could take is keep doing what you were doing before, but applying the styles differently like so, dependant on display:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
opacity: 0;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 3;
}
Technically, CSS doesn't actually specify how and when elements go in and out of the "hover" state. So it sounds like when A goes under B, your version of IE removes the hover state from A and it immediately pops back in front of B, before B gets the hover state and pops further in front.
How about wrapping the two in a div, and testing for the hover state on that? Does that work?
http://jsfiddle.net/X64au/
Try wrap them in a div
.parent
{
position:relative;
z-index:1000;
}
.a
{
position: absolute;
z-index : 1001;
display: inline-block;
}
.b
{
position: absolute;
z-index: 1002;
display: inline-block;
}