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;
}
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 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
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 want to make a screen unclickable by spreading a think transparent layer of any color over the screen on the click event of a button using CSS.
Please help with this.
Using jQuery and CSS, you could define a class .spread :
.spread {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.5;
z-index: 200;
}
And when you click on the button:
$('body').append("<div class='spread'></div>");
This would add the div to the body, and the div would position itself in the top left corner. You may also have to put:
body {
margin: 0;
}
Example: http://jsfiddle.net/jcolicchio/TuP2A/
It should be super easy
HTML
<body>
some code here
<div class=overlay><div>
</body>
CSS
.overlay {
position: fixed;
z-index:100;
top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,.0);
}
I am having some problems with my DIV, it wont display over a a DIV that has a web user control in it. Below you can find my css. I believe I have done everything right and am hoping that someone can maybe see an error that I have made and help me out. If you need any other code let me know. I also wonder if its just IE rendering it wrong? Thanks for looking.
The Popup CSS:
{
background: #ececec;
position:absolute;
top: 236px;
left: 201px;
height: auto;
width: 280px;
border: solid 1px gray;
z-index: 50;
text-align:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 15px;
font-size: 8pt;
}
The Activity DIV (same the div above just changed position)
{
border: solid 2px #A9C5EB;
position: absolute;
top: 353px;
left: 290px;
width: 710px;
height: 227px;
font-size: small;
overflow: scroll;
overflow-x: hidden;
background-color: #F8FBFE;
z-index: 2;
}
To know the HTML is essential to fix your problem.
What is the html that contains your popup? Is it relative to the body tag or some other element? Is the containing element position: relative;?
Try setting the containing element's z-index and position:
#my-container {
position: relative;
z-index: 1;
}
See this SO post about absolute positioning.
On a side note, check out IE-7.js which fixes many IE browser issues, including - AFAIK - this bug.