I have a problem that I want to solve,the date icon when I set the alignment to the left does not move the icon tried all the ways and no benefit but work with me transform but it needs to reponsive on all screen and I must do it for all screens
.zsg-cp,
.zsg-datepicker-wrapper {
position: relative
}
.zsg-datepicker-wrapper .zsg-datepicker-link {
color: #006AFF;
font-size: 1.34em;
line-height: 1;
position: absolute;
left: 7px;
top: 5px
}
<div class="zsg-datepicker-wrapper">
<input name="dateField" type="text" value="" id="cal1DateField" min="2019-08-22" max="2020-08-22" class="zsg-datepicker">
<a id="wrapper" style="text-align:left;left:0;float:left;transform: translateX(50px);" href="" class="zsg-datepicker-link"><span class="zsg-icon-calendar"></span></a>
</div>
Try this with your own CSS classes
.input-container {
display: -ms-flexbox;
/* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form>
<div class="input-container">
<input class="input-field" type="text" placeholder="Date" name="dateField">
<i class="fa fa-calendar icon"></i>
</div>
</form>
Related
I am trying to build a simple webpage using Bootstrap and D3, but I do not know how to get rid of all the whitespace at the bottom. I would like to get rid of it.
I have tried setting the min-height of the body and html to 100%, but it hasn't done anything. My code is here: https://github.com/eelegiap/thesis-code/tree/main/search
body {
padding-left: 3vh;
padding-top: 3vh;
padding-bottom: 20px;
}
#searchCol {
padding-left: 6vh
}
form {
width: 25%
}
#results {
padding-right: 10vh;
}
#resultsContainer {
max-height: 30%;
overflow-y: auto
}
.result {
padding-left: 4vh;
}
.poemResult {
cursor: pointer;
border-radius: 10px;
padding-left: 10px;
padding-top: 5px;
}
#poemContainer {
max-height: 30%;
overflow-y: auto;
}
#poemMeta {
padding-top: 10vh;
padding-left: 15vh;
padding-bottom: 5vh
}
#poemTxt {
padding-left: 15vh;
padding-bottom: 10vh;
}
.input-group {
max-width: 75%;
padding-bottom: 5vh
}
/* Tooltip text */
.titleTooltip .tooltiptext {
visibility: hidden;
position: absolute;
text-align: left;
width: fit-content;
height: fit-content;
padding: 2px;
padding-right: 15px;
font: 12px sans-serif;
background: #e5ffff;
border: 1px solid gray;
border-radius: 8px;
pointer-events: none;
z-index: 1;
}
.titleTooltip:hover .tooltiptext {
visibility: visible;
}
.token mark {
display: contents;
}
input,
.dropdown-toggle {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.searchBar {
min-height: 50px
}
#search {
background-color: lightsteelblue;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- MDB -->
<link rel="stylesheet" href="mdb5/css/mdb.min.css" />
<body>
<div class="container">
<br>
<div class="row">
<h2>Contemporary Russian Internet Poetry</h2>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row" id="poemContainer">
<div id="poemMeta"></div>
<div id="poemTxt"></div>
</div>
</div>
<div class="col-sm-6" id="searchCol">
<div class="row">
<div class="input-group">
<div class="form-outline flex-fill searchBar">
<input type="search" id="form1" class="form-control form-control-lg" />
<label class="form-label" for="form1">Search by keyword(s)</label>
</div>
<button type="button" id='search' class="btn searchBar">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row" id="resultsContainer">
<div id="results"></div>
</div>
</div>
</div>
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="mdb5/js/mdb.min.js"></script>
<!-- embedding JS libraries -->
<!-- d3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- own js files -->
<script src="js/main.js"></script>
<script src="js/text.js"></script>
<script src="js/searchResults.js"></script>
You are using padding-bottom: 20px; in your body. It created the bottom padding or some spaces in the down side of your websites.
You have to remove it.
To be honest, idk why this works, but I changed the max-height variables to pixel heights instead, and this fixed the trailing whitespace problem.
<div class="input-fields">
<div class="new">
<div class="first-container">
<form id="new-form" method="POST">
<div class="label">
<span class="fas fa-envelope icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div class="label">
<span class="far fa-id-card icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div class="label">
<span class="fas fa-user-tag icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div>
</div>
</div>
</div>
<div>
<span class="divide">or</span>
</div>
<div class="login-field">
<div class="second-container">
<div class="label">
<span class="far fa-id-card icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div class="label">
<span class="fas fa-key icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div>
</div>
</div>
.fa-arrows-alt-h {
font-size: 30px;
color: #bbb;
}
.input-fields {
display: flex;
background: #F7F9F6;
}
.new {
width: 50%;
float: right;
border-right: 1px dashed #e9e9e9;
}
.form-input {
padding-left: 3.575rem;
height: calc(2.25rem + 2px);
font-size: 1.5rem;
}
.first-container {
display: inline-block;
float: right;
padding-right: 30px;
}
.second-container {
display: inline-block;
padding-left: 30px;
}
.divide {
position: absolute;
left: 0;
right: 0;
margin-left:auto;
margin-right:auto;
top: 20%;
}
I would like to align text, "or" in the middle of the vertical line.
I used left: 50% or 49%, however, it's broken when I shrink the window size for response test.
I couldn't use 'left:0; right: 0; because I did not know the width of text("or")
How can I align the word "or" in the middle of the vertical line?
Can anyone help, please?
Many thanks! :)
To your absolutely positioned span add these styles:
.divide{
left: 50%;
transform: translate(-50%);
}
It works see the codepen here: https://codepen.io/arnavozil/pen/mdVyWGr
The problem you had is that u're using flexbox and at the same time you're giving the containers specific width , instead you can use justify-content : center
.fa-arrows-alt-h {
font-size: 30px;
color: #bbb;
}
.input-fields {
justify-content: center;
display: flex;
display: flex;
background: #F7F9F6;
}
.new {
/* width: 50%; */
/* float: right; */
border-right: 1px dashed #e9e9e9;
}
.form-input {
padding-left: 3.575rem;
height: calc(2.25rem + 2px);
font-size: 1.5rem;
}
.first-container {
/* display: inline-block; */
/* float: right; */
padding-right: 30px;
}
.second-container {
/* display: inline-block; */
padding-left: 30px;
}
.divide {
/* position: absolute; */
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
/* top: 20%; */
} ```
I like to use BEM naming convency in some of my projects nad now, I'm working on design system and I stopped with my modificators.
I created all version of Input that we use in our application, and I have this case:
I modify that Input few times: --is-invalid, --is-disabled, --has-status and I have problem with the has-status one. I have more colors for this status and I am not sure how to deal with it.
I would prefer my modificator for status be like .Input--has-status-load, .Input--has-status-warning etc. But the problem is, that I don't want to repeat declaration of this modificator X times, for each status. That's why I added classes just for colors (.success and .warning), but this little hacked my BEM naming convency that I don't want to demolish.
Do you have any idea? Or do you have any notes on that code?
Thanks for sharing your knowledge!
CodePen DEMO
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
}
::placeholder {
color: #ccc;
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #ccc;
}
::-ms-input-placeholder {
color: #ccc;
}
.container {
max-width: 1080px;
margin: 0 auto;
}
.row {
margin: 1em;
}
h2 {
margin-top: 2em;
}
/* ============================================================================
05 - COMPONENTS - Input.scss
========================================================================= */
/* Component structure:
.Input {}
.Input__container {}
.Input__fake-input {}
.Input__field {}
.Input__prefix {}
.Input__suffix {}
.Input__icon {}
.Input--has-status {}
.Input--is-invalid {}
.Input--is-disabled {}
*/
// Component local variables
$input-border-color: #D8DADC;
$input-text-gray: #979797;
$input-text-color: #457CCC;
$input-border-radius: 8px;
$input-font-size: 16px;
// Base structure
.Input {
position: relative;
}
// Input container for all elements
.Input__container {
display: flex;
position: relative;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
height: 40px;
font-size: $input-font-size;
}
// Input fake input, who replaces real input
.Input__fake-input {
width: 100%;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
height: 40px;
font-size: $input-font-size;
border-radius: $input-border-radius;
transition: all 0.15s ease-in-out 0s;
border-width: 1px;
border-style: solid;
border-color: $input-border-color;
border-image: none;
}
// Input text field for add text
.Input__field {
border: 0;
-webkit-appearance: none;
color: $input-text-color;
font-size: inherit;
background-color: transparent;
width: 100%;
height: 100%;
z-index: 2;
padding: 0px 12px;
flex: 1 1 20%;
border-radius: $input-border-radius;
&:focus {
outline: none;
&~.Input__fake-input {
outline: none;
border: 1px solid #0284FF;
}
}
}
// Input type PREFIX
.Input__prefix {
height: 100%;
color: $input-text-gray;
display: flex;
-webkit-box-align: center;
align-items: center;
pointer-events: none;
-webkit-box-pack: center;
justify-content: center;
z-index: 3;
padding: 0px 0px 0px 10px;
}
// Input type SUFFIX
.Input__suffix {
height: 100%;
color: $input-text-gray;
display: flex;
flex-shrink: 0;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
z-index: 3;
padding: 0px 10px 0px 0;
}
// Input type ICON
.Input__icon {
height: calc(100% - 2px);
color: $input-text-gray;
display: flex;
flex-shrink: 0;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
z-index: 3;
padding: 0px 10px;
position: relative;
width: 48px;
border-left: 1px solid $input-border-color;
cursor: pointer;
& img,
svg {
width: 25px;
}
}
// Modificator --has-status
.Input--has-status {
position: relative;
}
.Input--has-status::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
z-index: 3;
width: 10px;
height: 10px;
border-radius: 100%;
background: #1A73E8;
}
// --has-status types
.Input--has-status.success::after {
background: #37C9AD;
}
.Input--has-status.warning::after {
background: #FFB000;
}
// Modificator --is-invalid
.Input--is-invalid {
& .Input__fake-input {
border: 1px solid #FF0054;
}
& .Input__field {
color: #FF0054;
&:focus~.Input__fake-input {
border-color: #FF0054;
}
}
}
// Modificator --is-disabled
.Input--is-disabled {
& .Input__fake-input {
background-color: #E8EAEC;
border-color: #E8EAEC;
color: #868C92;
ursor: not-allowed;
border: 1px solid #E8EAEC;
}
& .Input__field {
color: #868C92;
cursor: not-allowed;
}
}
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900&display=swap" rel="stylesheet">
<div class="container">
<form>
<div class="row">
<h1> Types</h1>
<h2>Input - default</h2>
<div class="Input">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - prefix</h2>
<div class="Input">
<div class="Input__container">
<div class="Input__prefix">
<span class="Prefix">Prefix</span>
</div>
<input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - suffix</h2>
<div class="Input">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
<div class="Input__suffix">
Suffix
</div>
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - icon</h2>
<div class="Input">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder">
<div class="Input__icon">
<img src="https://image.flaticon.com/icons/svg/331/331383.svg">
</div>
<div class="Input__fake-input"></div>
</div>
</div>
<br><br>
<h1>Modificators</h1>
<h2>Input - Load Success</h2>
<div class="Input Input--has-status success">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - Load Warning</h2>
<div class="Input Input--has-status warning">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - Invalid</h2>
<div class="Input Input--is-invalid">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
<div class="Input__fake-input"></div>
</div>
</div>
<h2>Input - Disabled</h2>
<div class="Input Input--is-disabled">
<div class="Input__container">
<input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum" disabled>
<div class="Input__icon">
<img src="https://image.flaticon.com/icons/svg/331/331383.svg">
</div>
<div class="Input__fake-input"></div>
</div>
</div>
</div>
</form>
</div>
I've built the front-end HTML/CSS code for a site which now needs transferring onto Wordpress. I'm using the html5blank theme as this was recommended for such purposes. I've watched a tutorial by Chris Lam and it all seems quite straightforward.
However, I'm having quite a few issues with my stylesheets - some rules seem to be applying correctly and some don't which is very strange. As per the tutorial all I've done is delete the styling code in the style.css file and replace it with my own.
Why would some rules apply and not others? Do I need to add something to another file (function.php?) that will allow my styling rules to work?
By way of an example, here's how my header and top section looks in my front-end home page -
And here's the (horrific looking) Wordpress version -
I've re-set the background image to include the link for the Wordpress version -
section#home {
height: 400px;
background: url("http://localhost:8888/wp-content/uploads/2017/07/homepagemain.jpg") center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
But it doesn't seem to want to appear.
On the nav bar, I've had to replace the tags with the following code as per the requirements in the header.php file -
<nav>
<?php html5blank_nav(); ?>
</nav>
Just wrapping the php code within an tag has no effect.
I've read that some themes require child/parent themes but that this shouldn't apply to the HTML5blank theme as its effectively an empty shell.
The same code has been transferred across into the style.css file. Do I have to delete the normalise.css files also? I was using reset.css for the front-end version. Any assistance would be appreciated.
/* GENERAL */
#import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i');
body {
font-family: "Merriweather Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
header {
background: #ffffff;
height: 100px;
top: 0;
z-index: 10;
}
.left-header { background:white; width:50%; float:left; height: 100px; }
.right-header { background:white; width:50%; float:right; height: 50px; }
.right-header-top { background: white; float: right; width: 100%; height: 100%; margin-right: 100px; }
.right-header-bottom { background: white; float: left; width: 100%; height: 100%; }
#logo {
margin-left: 60px;
margin-top: 50px;
}
nav {
float: left;
font-weight: 400;
}
nav a {
color: #000000;
text-decoration: none;
display: inline-block;
margin-top: 15px;
margin-right: 25px;
font-size: 12px;
}
div#contact {
float: right;
margin-right: 20px;
}
div#contact img {
display: inline-block;
border: 10px;
margin: 20px;
width: 30px;
height: 30px;
}
div#contact p {
display: inline-block;
margin-top: 25px;
font-size: 10px;
}
.right-header-bottom i {
height: 10px;
width: 10px;
border: 15px;
float: left;
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
/* HOME PAGE */
section#home {
height: 400px;
background: url(../images/homepagemain.jpg) center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
#agencyimage {
position: absolute;
margin: 0;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.showreel {
height: 50px;
max-width: 100%;
position: absolute;
background-color: black;
bottom: 0;
padding: 0 30px;
justify-content: space-between;
}
.showreel, .showreel > div.seemore {
display: flex;
align-items: center;
justify-content: flex-start;
flex:1;
}
.showreel, .showreel > div.seeour {
justify-content: flex-end;
flex:1;
display: flex;
align-items: center;
}
.showreel p {
font-size: 15px;
font-weight: normal;
margin: 0;
padding-left: 10px;
color: #ffffff;
}
.showreel i {
color: #ffffff;
}
.seemore {
margin-left: 30px;
}
.seeour i {
margin-right: 30px;
}
<html>
<head>
<meta charset="utf-8">
<title>Feature Media</title>
<meta name="description" content="Video technology and production">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/skeleton.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="left-header">
<img src="images/Logo.png" alt="logo" id="logo" style="width:250px;height:30px;">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<img src="images/phone.png">
<p>0113 220 5265</p>
<img src="images/email.png">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
<div class="right-header-bottom">
<nav>
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
<section id="home">
<img src="images/AGENCY-BUSINESS.png" id="agencyimage" style="width: 150px; height: 250px;">
<div class="container showreel">
<div class="seemore">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
<i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
</span>
<p>SEE MORE</p>
</div>
<div class="seeour">
<p>SEE OUR SHOWREEL</p>
<i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
</div>
</div>
</section>
it happens when your style-sheet is not properly added to your homepage.
You are giving this path, but this is not including the stylesheet, because the path is not correct.
<link rel="stylesheet" href="css/reset.css" />
try to add this code before your css directory
<?php bloginfo('stylesheet_directory')?>
So, it will be like that
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/css/reset.css" />
It will gives the base url of the site, so this code becomes
www.xyz.com/css/"your css file"
Do this for all link attribute for css, and make sure that all css files put up in that css folder.
I have broken my head on the following css.
JSFiddle:
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
My dropdown menu is hidden behind the divs of contenteditable elment. Any ideas how to fix it?
Important: The div heights should not be changed to show the dropdown menu.
Remove overflow: auto on .first-row
$(document).on('click', '.dropdown', function() {
$(this).find('.dropdown-content').toggle();
});
#new_task_wrap {
position: relative;
display: flex;
}
#new_task_wrap > .box {
width: 100%;
border-style: solid;
border-color: #98afc8;
}
#new_task_wrap > .box > .first_row {
display: flex;
width: 100%;
/*overflow-y: auto;*/
}
#new_task_wrap > .box > .first_row > .description {
background-color: white;
display: inline-block;
font-weight: 400;
padding: 9px 9px 9px 9px;
cursor: text;
outline: 0;
flex-grow: 1;
overflow-y: auto;
}
#new_task_wrap > .box > .first_row > .calendar {
padding-top: 8px;
cursor: pointer;
}
.right-add-on {
position: relative;
}
.right-add-on >:not([contenteditable=true]) {
position: absolute;
right: 0;
color: #67829e;
cursor: pointer;
}
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
Updated jsFiddle
Just change overflow-y to visible
Refer this
The overflow-y property specifies what to do with the top/bottom edge of the content - if it overflows the element's content area.
#new_task_wrap > .box > .first_row {
display: flex;
overflow-y: visible; //Here is the change
width: 100%;
}
use position: absolute for .dropdown and position it accordingly
here is the updated Fiddle http://jsfiddle.net/z0kfdahu/2/