I would like to know if anyone can help me with my cookie bar.
It's a simple bar fixed at the bottom of the screen with a cross button.
Unfortunately, I think something is wrong or missing.
When I click the close button, nothing happens.
Maybe I am missing something in the javascript code.
Can you help me?
Thank you very much
$(".close").click(function() {
$(".cookie-banner").fadeOut();
});
.CNOcookies {
padding: 10px 0;
position: fixed;
bottom: 0;
background-color: #ffffff;
text-align: center;
z-index: 99999;
width: 100%;
max-width: 100%!important;
display: block;
margin: 0;
-webkit-box-shadow: 0px -2px 4px 0px rgb(0 0 0 / 10%);
}
.CNOctxt {
margin-left: 8.33333333%;
width: 83.33333333%;
float: left;
position: relative;
min-height: 1px;
}
.CNOcbutton {
width: 8.33333333%;
float: left;
position: relative;
min-height: 1px;
}
button.close {
padding: 0;
cursor: pointer;
border: 0;
-webkit-appearance: none;
}
.close {
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="CNOcookies">
<div class="CNOctxt">
<span>Website uses cookies to improve the navigation of its users. By continuing your navigation, you accept our cookie policy. More info</span>
</div>
<div class="CNOcbutton">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true" style="background-color: white !important;">
×
</button>
</div>
</div>
It looks like this at the moment.
Reference Image
you should replace
$(".cookie-banner").fadeOut();
with
$(".CNOcookies").fadeOut();
EDIT:
I tried the script and it's working, did you delete the cache from your browser and imported correctly jQuery?
$(".close").click(function() {
$(".CNOcookies").fadeOut();
})
.CNOcookies {
padding: 10px 0;
position: fixed;
bottom: 0;
background-color: #ffffff;
text-align: center;
z-index: 99999;
width: 100%;
max-width: 100%!important;
display: block;
margin: 0;
-webkit-box-shadow: 0px -2px 4px 0px rgb(0 0 0 / 10%);
}
.CNOctxt {
margin-left: 8.33333333%;
width: 83.33333333%;
float: left;
position: relative;
min-height: 1px;
}
.CNOcbutton {
width: 8.33333333%;
float: left;
position: relative;
min-height: 1px;
}
button.close {
padding: 0;
cursor: pointer;
border: 0;
-webkit-appearance: none;
}
.close {
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="CNOcookies">
<div class="CNOctxt">
<span>Website uses cookies to improve the navigation of its users. By continuing your navigation, you accept our cookie policy. More info</span>
</div>
<div class="CNOcbutton">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true" style="background-color: white !important;">
×
</button>
</div>
</div>
</html>
Related
Buttons design link down below
I need this design tried via before after but need the arrow softer
used skew and all.
also found references but that didn't work out, it seems very easy and similar design but couldn't find similar ones on the internet via examples.
https://i.stack.imgur.com/BCRNb.png
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Poppins:wght#300&display=swap');
body {
background: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-family: 'Poppins', sans-serif;
}
/* ------------------------- Separate line ------------------------- */
:root {
--breadcrumb-theme-1: #398AB9;
--breadcrumb-theme-2: #DFDFDE;
--breadcrumb-theme-3: #1C658C;
--breadcrumb-theme-4: #FFF;
}
a{
font-size: medium;
}
.breadcrumb {
text-align: center;
display: inline-block;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
overflow: hidden;
border-radius: 5px;
counter-reset: flag;
}
.breadcrumb__step {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 14px;
font-weight:bold;
line-height: 36px;
padding: 0 10px 0 30px;
position: relative;
background: var(--breadcrumb-theme-2);
color: var(--breadcrumb-theme-1);
transition: background 0.5s;
}
.breadcrumb__step:first-child {
border-radius: 5px 0 0 5px;
}
.breadcrumb__step:first-child::before {
left: 14px;
}
.breadcrumb__step:last-child {
border-radius: 0 5px 5px 0;
padding-right: 20px;
}
.breadcrumb__step:last-child::after {
content: none;
}
.breadcrumb__step::after {
content: '';
position: absolute;
top: 0;
right: -18px;
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
border-radius: 0 5px 0 50px;
background: var(--breadcrumb-theme-2);
transition: background 0.5s;
box-shadow: 2px -2px 0 2px var(--breadcrumb-theme-4);
}
.breadcrumb__step--active {
color: var(--breadcrumb-theme-2);
background: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::before {
color: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::after {
background: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover {
color: var(--breadcrumb-theme-2);
background: var(--breadcrumb-theme-3);
}
.breadcrumb__step:hover::before {
color: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover::after {
color: var(--breadcrumb-theme-1);
background: var(--breadcrumb-theme-3);
}
<div class="breadcrumb">
<a class="breadcrumb__step breadcrumb__step--active" href="#">Choose product</a>
<a class="breadcrumb__step" href="#">Place order</a>
<a class="breadcrumb__step" href="#">Shiping</a>
<a class="breadcrumb__step" href="#">Booking</a>
<a class="breadcrumb__step" href="#">Complete</a>
</div>
I'm trying to make a small web page with a search bar and an accounts menu (currently just a circle), but I've noticed, when I zoom in, or resize the page, the accounts menu overflows onto the search bar. I've tried changing from absolute positioning, to relative and adjusting the right: 30px accordingly, but this didn't work. I'm incredibly stuck, can anyone offer any advice/code?
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: 500px;
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
width: 600px;
position: absolute;
left: 200px;
top: 15px;
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
position: absolute;
left: 0;
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
position: absolute;
right: 30px;
width: 66px;
height: 66px;
top: 4px;
padding: 0px;
border-radius: 100%;
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
If you remove the absolute positioning and stick with the default relative, then use a display of inline-block (Read up on what it does here: https://www.w3schools.com/css/css_inline-block.asp) and use dynamic widths instead of static ones, you should get your desired result.
See the updated code below;
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: calc(100% - 100px); /* CHANGED */
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
max-width: 600px; /* CHANGED */
width: calc(100% - 300px); /* ADDED */
/* position: absolute; REMOVED */
/* left: 200px; REMOVED */
/*top: 15px; REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
/*position: absolute; //REMOVED */
/*left: 0; //REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
/* position: absolute; REMOVED */
/* right: 30px; REMOVED */
width: calc(100% - 809px); /* CHANGED */
height: 66px;
/* top: 4px; REMOVED */
padding: 0px;
border-radius: 100%;
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
text-align: right; /* ADDED */
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
display: inline-block; /* ADDED */
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
try this
.header {
position: relative;
min-width: 900px;
}
https://jsfiddle.net/59ncte3m/1/
It will avoid the issue where your menu gets drawn on top of the search by making the header a positioned element, the menu absolute position will be relative to the header. giving it a min-width will make sure all elements fit within.
This is still not a good responsive design, as it should avoid pixel dimentions, but it is enough to fix the overflowing issue.
I am using algolia autocomplete in my app. And I would like to build a search bar that expands like the expandable example on this page. I have a layout with a header bar that has a search input for bigger screens. On small screens I only have a magnifying glass icon, that on click toggles another header with a search bar, that I initially have it hidden. Here is the fiddle, which I wasn't able to get working, but hope it can still give you some overview. This is the layout:
<header class="mdc-toolbar mdc-toolbar--fixed toolbar--custom">
<div class="mdc-toolbar__row">
<section class="menu mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section">
<form action="/search" method="get" class="search-field-desktop">
<div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon autocomplete-search-field">
<i class="material-icons mdc-text-field__icon" tabindex="0">search</i>
<input name="q"
type="text"
class="mdc-text-field__input search-input-js aa-input-search"
placeholder="Search for players and videos ..."
aria-label="Full-Width Text Field">
</div>
</form>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
search
more_vert
</section>
</div>
</header>
<header class="search-field-phone mdc-toolbar mdc-toolbar--fixed toolbar--custom">
<div class="mdc-toolbar__row">
<a id="search-input-close" class="material-icons mdc-toolbar__menu-icon" tabindex="0">arrow_back</a>
<form action="/search" method="get">
<div class="mdc-text-field mdc-text-field--box autocomplete-search-field">
<input name="q"
type="text"
class="mdc-text-field__input search-input-js aa-input-search"
placeholder="Search for players and videos ..."
aria-label="Full-Width Text Field"
autofocus>
</div>
</form>
</div>
</header>
The problem I have is that the dropdown menu is not visible on small screens for some reason and on bigger screens it is. This is the scss/css:
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
height: 100%;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 0;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
display: block;
width: 100%;
height: 72px;
clear: both;
.mdc-list-item {
height: 72px;
}
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.powered-by-algolia {
padding-left: 15px;
border-top: 1px solid rgba(102, 105, 105, 0.17);
display: flex;
align-items: center;
height: 30px;
}
.aa-input-container {
display: inline-block;
position: relative; }
.aa-input-search {
width: 100%;
height: 30px;
padding: 12px 28px 12px 12px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.aa-input-search::-webkit-search-decoration,
.aa-input-search::-webkit-search-cancel-button,
.aa-input-search::-webkit-search-results-button,
.aa-input-search::-webkit-search-results-decoration {
display: none;
}
.media {
margin: 10px 0;
}
.media-body {
p {
margin: 0;
}
}
.toolbar--custom {
color: $white;
.mdc-toolbar__row {
min-height: 56px;
}
form, .autocomplete-search-field {
width: 100%;
}
.mdc-text-field--box:not(.mdc-text-field--upgraded) {
height: 36px;
}
.mdc-text-field--box {
overflow: visible;
margin: auto;
.mdc-text-field__icon {
bottom: 8px;
font-size: 22px;
}
}
.mdc-text-field--box:after,
.mdc-text-field--box:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#search-input-open {
display: none;
}
#media only screen and (max-width: 782px) {
#search-input-open {
display: block;
}
.search-field-desktop {
display: none;
}
}
}
.search-field-phone {
clip-path: circle(0%);
visibility: hidden;
.mdc-text-field {
clip-path: circle(0%);
}
}
#mixin search-animated-open {
-webkit-animation: open 0.3s forwards;
animation: open 0.3s forwards;
animation-timing-function: $mdc-animation-standard-curve-timing-function;
}
#mixin search-animated-close {
-webkit-animation: close 0.3s forwards;
animation: close 0.3s forwards;
animation-timing-function: $mdc-animation-standard-curve-timing-function;
}
.search-field-phone-open, {
visibility: visible;
#include search-animated-open;
.mdc-text-field {
#include search-animated-open;
}
}
.search-field-phone-close, {
#include search-animated-close;
.mdc-text-field {
#include search-animated-close;
}
}
#keyframes open {
from {
clip-path: circle(0 at calc(100% - 68px) 50%);
}
to {
clip-path: circle(150% at calc(100% - 68px) 50%);
}
}
#keyframes close {
from {
clip-path: circle(150% at calc(100% - 68px) 50%);
}
to {
clip-path: circle(0 at calc(100% - 68px) 50%);
visibility: hidden;
}
}
The layout of the whole page looks like this:
<div id="app">
#include('layouts.partials.sidebar')
#include('layouts.partials.navigation')
<div class="page-content">
#yield('content')
</div>
</div>
Where the navigation partial is the file with headers shown above. This is the sidebar partial:
<aside class="mdc-drawer mdc-drawer--temporary mdc-typography">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content">
Header here
</div>
</header>
<nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
</a>
</nav>
</nav>
</aside>
This is the css for the page:
body {
margin: 0;
}
#app {
display: flex;
}
.page-content {
display: inline-flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
box-sizing: border-box;
}
I am not sure what is causing this behaviour, why is the dropdown menu for bigger screens visible, and the one for smaller screens not?
Update
I have noticed that when I have opened search input on small screens, if I remove the search-field-phone-open then the dropdown menu is visible, I am not sure what is in that class causing that the dropdown is not visible?
.search-field-phone-open, {
visibility: visible;
#include search-animated-open;
.mdc-text-field {
#include search-animated-open;
}
}
I am not sure I understood what you need but check the snippet below:
var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
var index = client.initIndex('contacts');
$('.input-search').autocomplete({ hint: false }, [
{
source: function(searchBar, cb) {
index.search(searchBar, { hitsPerPage: 5 }, function(error, content) {
if (error) {
cb([]);
return;
}
cb(content.hits, content);
});
},
displayKey: 'name',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.name.value;
}
}
}
]);
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
height: 100%;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu:before {
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 0;
top: -7px;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
transform: rotate(-45deg);
border-radius: 2px;
z-index: 999;
display: block;
left: 24px;
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 8px 8px 8px;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
padding: 0 4px 0;
display: block;
width: 100%;
height: 38px;
clear: both;
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.mdl-textfield {
margin: -20px !important;
}
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/material-components-web#0.8.0/dist/material-components-web.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
<script src="https://unpkg.com/material-components-web#0.8.0/dist/material-components-web.min.js"></script>
<header class="mdc-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="site-search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input input-search" name="searchBar" type="search" id="site-search" />
<label class="mdl-textfield__label" for="site-search">Search</label>
</div>
</div>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end">
Custom icon
</section>
</div>
</header>
Hope this helps you.
References
I referred to mdc-toolbar available on GitHub.
I'm having troubles with positioning the textbox for my chat. I can only make it look good for one specific resolution. On other screen sizes it just looks terrible. How can I adjust the position of the textbox for all resolutions (>1360px) to fit in the little darkgrey area on the bottom. When I try to adjust it for one resolution it won't look good on the other resolutions.
https://jsfiddle.net/4pvfwz11/1/
<div class="chatdiv hidden-xs hidden-sm col-lg-2 col-md-3 pull-right" data-spy="affix">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
<ol class="chat">
<div id="fullchat">
<li class="bot"><div class="avatar"><img src="'+msg.avatar+'" draggable="false"/></div><div class="msg"><div class="name">Username</div><p>The chat text should come here..........</p><time><i class="fa fa-clock-o" aria-hidden="true"></i>19:00</time></div></li>
</div>
<div class="chat_error"></div>
</ol>
</div>
<div class="toggle-sound"></div>
<input class="textarea" id="chat_textbox" type="text" placeholder="Enter message here"/>
<style type="text/css">
div.chat_error {
color: #e20f0f;
padding-left: 10px;
padding-top: 1rem;
}
.chatdiv
{
position: fixed;
left: 40px;
background-color: #101010;
height: 90vh;
}
.chatdiv .name{
top: 3px;
left: 110px;
font-size: 10px;
font-weight: bold;
color: rgba(256,256,256,0.80);
cursor: default;
}
/* M E S S A G E S */
.chat {
list-style: none;
background: none;
margin: 0;
padding: 0 0 50px 0;
margin-top: 60px;
margin-bottom: 10px;
}
.chat li {
padding: 0.5rem;
overflow: hidden;
display: flex;
}
.chat .avatar img {
margin-top: 15px;
width: 40px;
height: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
background-color: rgba(255,255,255,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.other .msg {
order: 1;
border-top-left-radius: 0px;
box-shadow: -1px 2px 0px #187006;
margin-left: 10px;
background-color: #27af0c;
}
.self {
justify-content: flex-end;
align-items: flex-end;
}
.self .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #0a95db;
box-shadow: 1px 2px 0px #055f8c;
margin-left: 10px;
}
.bot .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #a50808;
box-shadow: 1px 2px 0px #6b0606;
margin-left: 10px;
}
.msg {
background: white;
min-width: 50px;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}
.msg p {
font-size: 15px;
margin: 0 0 0.2rem 0;
color: white;
}
.msg time {
font-size: 10px;
color: #ccc;
margin-top: 3px;
float: right;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* T Y P E */
input.textarea {
position: absolute;
width: 89%;
height: 50px;
left: 15px;
bottom: 3vh;
background: white;
border: none;
outline: none;
padding-left: 10px;
padding-right: 10px;
color: #666;
font-weight: 400;
}
div.toggle-sound {
position: fixed;
bottom: 13vh;
left: 65px;
font-weight: bold;
font-size: 20px;
}
.scrollbar
{
float: left;
height: 80vh;
background-color: #232323;
overflow-y: scroll;
margin-bottom: 25px;
width: 100%;
}
.force-overflow
{
min-height: 90vh;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #232323;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #232323;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E20F0F;
}
</style>
If you want different CSS for different screen sizes you can use something called media queries. I don't know exactly what rules you want to change for different screen sizes, but let's do a quick example. Let's say you want to make the background color of the textbox red on screens with a width less than or equal to 900px. This can be done with the following media query:
#media (max-width: 900px) {
input.textarea {
background-color: red;
}
}
So what you can do is just to figure out what CSS changes you want to do on different screen sizes, and then make media queries for all of them. You can read more about media queries here.
i have an issue with floating div's in responsive template. You can see empty spaces on images below. And it happens not at every page, at some pages blocks fill all space properly.
Here is the code of a simple block:
<div class="movie-item ignore-select short-movie">
<div class="movie-img img-box">
<img src="/templates/movie-groovie/dleimages/no_image.jpg" alt="text" />
<i class="fa fa-info show-desc"></i>
<div class="movie-img-inner">
<i class="fa fa-play-circle-o go-watch pseudo-link" data-link="#"></i>
</div>
<div class="movie-series">Поле зеленое</div>
<span>доп поле</span>
</div>
<a class="movie-title" href="#">TITLE</a>
<div class="movie-tags nowrap">Some text</div>
<div class="movie-desc">
<div class="movie-date">2 март 2017</div>
<div class="movie-director"><b>Доп поле название:</b> доп поле Джеймс Кэмерон</div>
<div class="movie-text">Some text</div>
<div class="movie-rate"><i class="fa fa-thumbs-o-up"></i><span id="ratig-layer-5846" class="ignore-select"><span class="ratingtypeplus ignore-select" >0</span></span></div>
</div>
</div>
and it's styles:
.short-movie {
float: left;
width: 18%;
margin: 0 1% 20px 1%;
}
styles.css:146
.movie-item {
position: relative;
z-index: 50;
margin: 0 10px;
max-width: 200px;
}
.movie-img {
height: 210px;
z-index: 50;
border: 4px solid #fff;
box-shadow: 0 0 0 1px #e3e3e3;
border-radius: 2px;
}
styles.css:6
.img-box {
overflow: hidden;
position: relative;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
styles.css:155
.show-desc {
position: absolute;
right: 0;
top: 0;
z-index: 150;
font-size: 18px !important;
cursor: pointer;
border-radius: 0 0 0 3px;
background-color: #fff;
color: #487a1b;
width: 30px;
height: 30px;
line-height: 30px !important;
text-align: center;
}
.movie-img-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
border: 5px solid #97ce68;
opacity: 0;
background-color: rgba(0,0,0,0.6);
}
.movie-series {
position: absolute;
left: 0;
bottom: 0;
z-index: 50;
width: 100%;
background-color: rgba(151, 206, 104, 0.8);
color: #487a1b;
padding: 10px;
font-weight: 700;
text-align: center;
}
.movie-title {
display: block;
margin: 10px 0 3px 0;
height: 36px;
overflow: hidden;
color: #333;
}
.movie-desc {
position: absolute;
left: 100%;
top: 0;
z-index: 150;
width: 400px;
padding: 20px;
background-color: #FFF;
display: none;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
min-height: 80px;
border-radius: 4px;
}
I can't find what causes the problem. Tried it on OS X Chrome and Safari. Does anybody know what can it be?
Just set:
.short-movie {
height: 275px;
}
To make all movie items be of the same height and stop them being affected by the previous elements height.
Set standard height for this div, For Example
.img-box
{
height:300px;
}