Hi
I am new to Primeng. I need to create a search box as shown in image.
I tried something like below, but not getting desired output.
<div class="ui-g-12">
<input type="text" [(ngModel)]="filterCriteria.searchValue">
<a href="#" class="search-icon">
<i class="fa fa-search" id="myimage" (click)="search()"></i>
</a>
</div>
Can anyone help how to do this in primeng?
Thanks
Like This
<form class="search-container">
<input type="text" id="search-bar" placeholder="What can I help you with today?">
<a href="#" class="search-icon">
<i class="fa fa-search"></i>
</a>
</form>
.css
.search-container{
width: 490px;
display: block;
margin: 0 auto;
}
input#search-bar{
margin: 0 auto;
width: 100%;
height: 45px;
border-radius: 5px;
padding: 0 20px;
font-size: 1rem;
border: 1px solid #D0CFCE;
outline: none;
&:focus{
border: 1px solid #008ABF;
transition: 0.35s ease;
color: #008ABF;
&::-webkit-input-placeholder{
transition: opacity 0.45s ease;
opacity: 0;
}
&::-moz-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
&:-ms-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
}
}
.search-icon .fa-search{
position: relative;
float: right;
width: 75px !important;
top: -39px;
right: -38px;
font-size: 30px;
}
Related
I'm trying to create a responsive log in page for a college, but when I resize the window vertically the logo and basically the top part disappears.
Currently I'm designing for an iPhone 7 using the dev tools in Google Chrome to help me with the view. When I open the website on my Huawei phone and tap the password field the keyboard pushes the page up and the logo partially disappears. This does not happen on my iPhone.
I think the problem is somewhere in my div elements. Sorry if its a dumb question, I'm a beginner.
Website: https://borislav1333.000webhostapp.com/
body
{
margin: 0;
}
img
{
max-width: 300px;
position: absolute;
top: 60px;
left: 37px;
z-index: 1;
}
.container
{
width: 375px;
height: 667px;
background-color: white;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: Georgia;
}
.form-back
{
width: 200px;
background-color: white;
z-index: 1;
margin: 0 auto;
padding: 45px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -80%);
text-align: center;
font-size: 18px;
}
input[type=text], input[type=password]
{
width: 100%;
padding: 10px;
margin: 8px 0px 8px;
border: solid 1px #aaa;
border-radius: 4px;
}
button
{
width: 100%;
height: 50px;
border: none;
border-radius: 30px;
border-color: white;
background-color: #e52791;
font-family: Georgia;
transition: background-color 0.7s ease-out;
}
button:hover
{
background-color: #02356a;
color: white;
transition: background-color 0.7s ease;
}
.submit
{
position: relative;
top: 30px;
}
::placeholder
{
font-family: georgia;
}
<div class="container">
<div class="img"><img src="logo.jpg"></div>
<div class="form-back">
<form action="message.html" onsubmit="return validation()">
<div>
<label for="accountNum">Metric Number</label><br>
<input type="text" id="accountNum" name="accountNum" placeholder="Metric Number..."><br>
</div>
<div>
<label for="surname">Password:</label><br>
<input type="password" id="surname" name="surname" placeholder="Password..."><br>
</div>
<div class="submit">
<button type="submit">Log In</button>
</div>
</div>
</div>
As per your code you have used position absolute value in many elements. I think this problem which you are facing is happening due to this absolute. I have updated your CSS code and added snippet below. Replace it and check, I wish you problem will be resolved :
body
{
margin: 0;
}
img
{
width: 100%;
max-width: 300px;
z-index: 1;
margin: 0 auto;
}
.container
{
margin: 0 auto;
font-family: Georgia;
text-align: center;
}
.form-back
{
width: 100%;
background:transparent;
margin: 0 auto;
padding: 45px;
text-align: center;
font-size: 18px;
}
input[type=text], input[type=password]
{
width: 100%;
padding: 10px;
margin: 8px 0px 8px;
border: solid 1px #aaa;
border-radius: 4px;
}
button
{
width: 100%;
height: 50px;
border: none;
border-radius: 30px;
border-color: white;
background-color: #e52791;
font-family: Georgia;
transition: background-color 0.7s ease-out;
}
button:hover
{
background-color: #02356a;
color: white;
transition: background-color 0.7s ease;
}
.submit
{
position: relative;
top: 30px;
}
::placeholder
{
font-family: georgia;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
<div class="img"><img src="https://borislav1333.000webhostapp.com/logo.jpg"></div>
<div class="form-back">
<form action="message.html" onsubmit="return validation()">
<div>
<label for="accountNum">Metric Number</label><br>
<input type="text" id="accountNum" name="accountNum" placeholder="Metric Number..."><br>
</div>
<div>
<label for="surname">Password:</label><br>
<input type="password" id="surname" name="surname" placeholder="Password..."><br>
</div>
<div class="submit">
<button type="submit">Log In</button>
</div>
</form>
</div>
</div>
I've come up with the following solution for the toggle switch:
.cookiemanagement__switchWrapper {
display: flex;
align-items: center;
}
.cookiemanagement__switchWrapper:last-of-type {
margin-top: 15px;
}
.cookiemanagement__switch {
display: inline-block;
position: relative;
}
.cookiemanagement__switchInput {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.cookiemanagement__switchToggle {
align-items: center;
background-color: #9a3d37;
border-radius: 50px;
display: flex;
height: 24px;
justify-content: space-between;
position: relative;
transition: background-color ease-out 0.3s;
z-index: 0;
}
.cookiemanagement__switchToggle:before {
background: #fff;
box-shadow: 1px 0 2px #646464;
border-radius: 50%;
border: 1px solid #aaaaaa;
content: "";
display: block;
height: 24px;
left: 0;
position: absolute;
top: 0;
transition: 0.2s ease-out;
width: 24px;
z-index: 2;
}
.cookiemanagement__switchToggleValue {
text-transform: uppercase;
line-height: normal;
transition: opacity 0.2s ease-out 0.1s;
}
.cookiemanagement__switchToggleValue--on {
margin: 0 4px 0 8px;
opacity: 0;
}
.cookiemanagement__switchToggleValue--off {
margin: 0 8px 0 4px;
opacity: 1;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle {
background-color: #6a7d39;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle:before {
left: calc(100% - 24px);
box-shadow: -1px 0 2px #646464;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--on {
opacity: 1;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--off {
opacity: 0;
}
.cookiemanagement__switchLabel {
margin-left: 15px;
}
<div class="cookiemanagement__switch">
<input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
<div class="cookiemanagement__switchToggle">
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">yes</span>
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">no</span>
</div>
</div>
<div class="cookiemanagement__switch">
<input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
<div class="cookiemanagement__switchToggle">
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">diakh</span>
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">ara</span>
</div>
</div>
However, I have some issues with supporting the internationalization of the values. Since right now the width of the whole element is generated from the width of two children which is "YES" and not "NO" text.
But if longer values are used like "DIAKH" and "ARA" (Georgian) the element looks very wide.
So I am investigating the way to make the whole component width to equal: width of the biggest children (text length) + 8px + 26px
8px - margin between circle and text (red rectangle part)
26px - width/height of the circle (orange rectangle part)
Below is the illustration of what is being intended to describe, where DIAKH text represents the biggest child.
You can achieve that using flexbox on the parent of this switchs and the width: fit-content property:
ul {
display: flex;
flex-direction: column;
width: fit-content;
}
.cookiemanagement__switchWrapper {
display: flex;
align-items: center;
width: 100%;
}
.cookiemanagement__switchWrapper:last-of-type {
margin-top: 15px;
}
.cookiemanagement__switch {
display: inline-block;
position: relative;
width: 100%;
}
.cookiemanagement__switchInput {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.cookiemanagement__switchToggle {
align-items: center;
background-color: #9a3d37;
border-radius: 50px;
display: flex;
height: 24px;
justify-content: space-between;
position: relative;
transition: background-color ease-out 0.3s;
z-index: 0;
}
.cookiemanagement__switchToggle:before {
background: #fff;
box-shadow: 1px 0 2px #646464;
border-radius: 50%;
border: 1px solid #aaaaaa;
content: "";
display: block;
height: 24px;
left: 0;
position: absolute;
top: 0;
transition: 0.2s ease-out;
width: 24px;
z-index: 2;
}
.cookiemanagement__switchToggleValue {
text-transform: uppercase;
line-height: normal;
transition: opacity 0.2s ease-out 0.1s;
}
.cookiemanagement__switchToggleValue--on {
margin: 0 4px 0 8px;
opacity: 0;
}
.cookiemanagement__switchToggleValue--off {
margin: 0 8px 0 4px;
opacity: 1;
}
.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle {
background-color: #6a7d39;
}
.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle:before {
left: calc(100% - 24px);
box-shadow: -1px 0 2px #646464;
}
.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--on {
opacity: 1;
}
.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--off {
opacity: 0;
}
.cookiemanagement__switchLabel {
margin-left: 15px;
}
<ul>
<li class="cookiemanagement__switchWrapper">
<div class="cookiemanagement__switch">
<input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
<div class="cookiemanagement__switchToggle">
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">yes</span>
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">no</span>
</div>
</div>
</li>
<li class="cookiemanagement__switchWrapper">
<div class="cookiemanagement__switch">
<input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
<div class="cookiemanagement__switchToggle">
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">diakh</span>
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">ara</span>
</div>
</div>
</li>
</ul>
One of the possible solutions is using a negative margin-top to put yes and no one behind another, while keeping them both in the flow so the bigger one would give its width to the parent:
p * {
box-sizing: border-box;
margin: 0;
padding: 0
}
label {
position: relative;
display: inline-block;
margin: 0 0 0 .5em;
color: #fff;
}
input {
display: none
}
.key {
position: absolute;
z-index: 1;
top: -.2em;
left: -.05em;
width: 2em;
height: 2em;
border: solid 1px rgba(0, 0, 0, .3);
border-radius: 55%;
box-shadow: .1em .1em .1em -.05em rgba(0, 0, 0, .5);
background: ivory;
transition: .3s;
}
.yes,
.no {
display: block;
margin: 0;
border-radius: .8em;
line-height: 1.6;
box-shadow: inset .1em .1em .1em -.05em rgba(0, 0, 0, .3);
transition: opacity .3s;
}
.yes {
padding: 0 2.5em 0 .5em;
background: forestgreen;
opacity: 0;
}
.no {
margin-top: -1.6em;
padding: 0 .5em 0 2.5em;
text-align: right;
background: firebrick;
opacity: 1;
}
:checked~.key {
left: calc(100% - 2em);
}
:checked~.yes {
opacity: 1
}
:checked~.no {
opacity: 0
}
<p>English:
<label>
<input type="checkbox" checked>
<span class="key"></span>
<span class="yes">YES</span>
<span class="no">NO</span>
</label>
</p>
<p>Georgian:
<label>
<input type="checkbox">
<span class="key"></span>
<span class="yes">DIAKH</span>
<span class="no">ARA</span>
</label>
</p>
<p>Scots Gaelic:
<label>
<input type="checkbox" checked>
<span class="key"></span>
<span class="yes">THA</span>
<span class="no">CHAN EIL</span>
</label>
</p>
Here is an idea with CSS grid where the trick is to make both element inside the same area. You can also keep the same HTML structure.
Relevant code:
.switchToggle {
...
display: grid;
align-items:center;
...
}
.switchToggle > * {
grid-area:1/1;
}
.switchToggleValue--on {
padding-right:32px;
}
.switchToggleValue--off {
padding-left:32px;
text-align:right;
}
Full code:
.switch {
display: inline-block;
position: relative;
margin:5px;
}
.switchInput {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.switchToggle {
background-color: #9a3d37;
border-radius: 50px;
display: grid;
align-items:center;
height: 24px;
position: relative;
transition: background-color ease-out 0.3s;
z-index: 0;
}
.switchToggle > * {
grid-area:1/1;
}
.switchToggleValue--on {
padding-right:32px;
}
.switchToggleValue--off {
padding-left:32px;
text-align:right;
}
.switchToggle:before {
content: "";
background: #fff;
box-shadow: 1px 0 2px #646464;
border-radius: 50%;
border: 1px solid #aaaaaa;
height: 24px;
left: 0;
position: absolute;
top: 0;
transition: 0.2s ease-out;
width: 24px;
z-index: 2;
}
.switchToggleValue {
text-transform: uppercase;
line-height: normal;
transition: opacity 0.2s ease-out 0.1s;
}
.switchToggleValue--on {
margin: 0 4px 0 8px;
opacity: 0;
}
.switchToggleValue--off {
margin: 0 8px 0 4px;
opacity: 1;
}
.switchInput:checked ~ .switchToggle {
background-color: #6a7d39;
}
.switchInput:checked ~ .switchToggle:before {
left: calc(100% - 24px);
box-shadow: -1px 0 2px #646464;
}
.switchInput:checked ~ .switchToggle .switchToggleValue--on {
opacity: 1;
}
.switchInput:checked ~ .switchToggle .switchToggleValue--off {
opacity: 0;
}
.switchLabel {
margin-left: 15px;
}
<div class="switch">
<input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
<div class="switchToggle">
<span class="switchToggleValue switchToggleValue--on">yes</span>
<span class="switchToggleValue switchToggleValue--off">no</span>
</div>
</div>
<br>
<div class="switch">
<input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
<div class="switchToggle">
<span class="switchToggleValue switchToggleValue--on">no</span>
<span class="switchToggleValue switchToggleValue--off">yes</span>
</div>
</div>
<br>
<div class="switch">
<input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
<div class="switchToggle">
<span class="switchToggleValue switchToggleValue--on">diakh</span>
<span class="switchToggleValue switchToggleValue--off">ara</span>
</div>
</div>
<br>
<div class="switch">
<input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
<div class="switchToggle">
<span class="switchToggleValue switchToggleValue--on">ara</span>
<span class="switchToggleValue switchToggleValue--off">diakh</span>
</div>
</div>
This question already has answers here:
Change text color if background image is not white?
(1 answer)
Dual-Color Text
(2 answers)
Closed 4 years ago.
I want to change text color to white for the 9 cards text part that overlaps with moving background element. How do I achieve this?
I looked on mix-blend-mode: screen; but it not seems to be applicable for this case. Here I exported compiled css/html for code snippet:
.wrapper {
padding: 30px 0;
}
.chapter {
margin-bottom: 20px;
min-height: 200px;
border-radius: 6px;
background-color: #f6f8f9;
padding: 50px 60px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.chapter__title {
z-index: 1;
position: relative;
font-size: 24px;
font-weight: 500;
line-height: 1.25;
color: #444;
text-decoration: none;
transition: color 0.4s ease-in;
}
.chapter__link,
.chapter a {
z-index: 1;
position: relative;
font-size: 20px;
font-weight: 300;
line-height: 1.5;
transition: color 0.4s ease-in;
}
.chapter__link i,
.chapter a i {
font-size: 60%;
margin-left: 5px;
position: relative;
bottom: -2px;
}
.chapter__label {
position: absolute;
right: 15px;
top: 10px;
font-size: 14px;
text-transform: uppercase;
z-index: 1;
}
.chapter__label--gray {
text-transform: none;
color: #aaa;
}
.chapter:after {
content: "";
z-index: 0;
position: absolute;
right: 30px;
bottom: 0;
width: 400px;
height: 400px;
background-color: #0a95ff;
transform: translateX(-100%) translateY(-100%);
border-radius: 50%;
box-shadow: 0 0 0 0 #0a95ff;
transition: transform 0.4s ease-out, box-shadow 0.4s ease-in, background-color 0.2s ease-out;
}
.chapter:hover {
text-decoration: none;
cursor: pointer;
}
.chapter:hover .chapter__title {
color: white;
}
.chapter:hover .chapter__link,
.chapter:hover a {
color: white;
}
.chapter:hover .chapter__link span:after,
.chapter:hover a span:after {
width: 100%;
background-color: white;
transition: background-color 0.4s ease-in, width 0.2s ease-in;
transition-delay: 0, 0.4s;
}
.chapter:hover:after {
right: 30px;
bottom: 0;
transform: none;
}
.chapter:active:after {
box-shadow: 0 0 0 300px #0a95ff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="wrapper row">
<div class="col-6 col-md-4">
<a href="javascript:void(0)" class="chapter ">
<div class="chapter__label chapter__label--gray">
9 cards
</div>
<div class="chapter__title">
Card title 1
</div>
<span class="chapter__link">
<span>Card link</span>
</span>
</a>
</div>
<div class="col-6 col-md-4">
<a href="javascript:void(0)" class="chapter ">
<div class="chapter__label chapter__label--gray">
9 cards
</div>
<div class="chapter__title">
Card title 2
</div>
<span class="chapter__link">
<span>Card link</span>
</span>
</a>
</div>
<div class="col-6 col-md-4">
<a href="javascript:void(0)" class="chapter ">
<div class="chapter__label chapter__label--gray">
9 cards
</div>
<div class="chapter__title">
Card title 3
</div>
<span class="chapter__link">
<span>Card link</span>
</span>
</a>
</div>
</div>
</div>
In pure css you can't. you can wrap the text part that overlaps in a span and then use color:white;
I want to change the style of the toggle-button like this.
This is my sample code:
<div class="form-group has-feedback">
<input id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Id" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Id" type="hidden" value="{D7AB5D2E-444F-49C7-91E4-564496D7C8A2}">
<div>
<input data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;">
<span class="button-checkbox bootstrap-checkbox">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display:none;"></span>
<span class="icon fa fa-check-square"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button>
</span>
<label class="switch">
<input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="false">
<span class="slider round"></span>
</label>
</div>
<span class="field-validation-valid help-block" data-valmsg-for="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" data-valmsg-replace="true"></span>
</div>
Jsfiddle example
I tried few CSS but it is not exactly what I want. I tried:
.switchbtn:before {
position: absolute;
content: "";
height: 32px;
width: 26px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
You are on the right track. You can use the :before and :after pseudo CSS selectors to modify the look and feel of the toggle button. Since :before is already used to create the circular toggle, I have used :after to add the text. Obviously, there are more ways to do this, and the below is a just a quick way to show you how to achieve this.
Note that you will have to modify the pseudo selectors for both the states (normal and checked) as you want different colors.
Check the code snippet below and use that as a starting point to modify/tweak styles as per your need.
Hope this helps.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switchbtn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border: 2px solid #bbb;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:before {
position: absolute;
content: "";
height: 34px;
width: 34px;
left: -2px;
top: -2px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.switchbtn:after {
position: absolute;
content: "OFF";
right: 3px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.switchbtn {
background-color: white;
border: 2px solid #2196F3;
}
input:focus+.switchbtn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.switchbtn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: #2196F3;
}
input:checked+.switchbtn:after {
position: absolute;
content: "ON";
left: 7px;
top: 10px;
font-size: 9px;
font-family: 'Arial';
-webkit-transition: .4s;
transition: .4s;
}
/* Rounded sliders */
.switchbtn {
border-radius: 34px;
}
.switchbtn:before {
border-radius: 50%;
}
.switch button {
display: none;
}
<label class="switch">
<input class="switchbtn" data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;" aria-invalid="false" aria-describedby="wffm302ebacf2b634d59b0dc1e81e451bc8d\.Sections\[0\]\.Fields\[6\]\.Value-error wffm302ebacf2b634d59b0dc1e81e451bc8d\.Sections\[0\]\.Fields\[6\]\.Value-error">
<span class="button-checkbox bootstrap-checkbox switchbtn">
<button type="button" class="btn clearfix custom-btn">
<span class="icon fa fa-check theme-text" style="display: none;"></span>
<span class="icon fa fa-check-square" style="display: inline;"></span>
<span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
</button></span><input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="hidden" value="false">
</label>
Hope this helps.
I have a html/css modal on my page which is hosted here:
http://yousolutions.co.za/#openModalViewCreateClient
However, I need to be able to use the main scroller on the page to scroll down and view the rest of this form. My current CSS doesn't allow for this, and I don't want to add another scroll bar within the div. My code looks like this:
HTML:
<div id="openModalViewCreateClient" class="modalDialog">
<div>
X
<h2>Add A Client</h2>
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li>
<h2>Add New Client</h2>
</li>
<li>
<label for="name">First Name:</label>
<input type="text" placeholder="John" required />
</li>
<li>
<label for="name">Last Name:</label>
<input type="text" placeholder="Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe#example.com" required />
<span class="form_hint">Proper format "name#something.com"</span>
</li>
<li>
<label for="website">Website:</label>
<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</form>
</div>
</div>
CSS:
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
width: 630px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
You are using
position: fixed;
on .modalDialog, the viewport scrolling does not have any effect in this case on the modal
Try with absolute positioning -
position: absolute;