This is a functioning scrollbar style that I use inside the HTML but I need to put it in my JavaScript code.
.large-2 {
overflow: scroll;
overflow-y: auto;
overflow-x: hidden;
height: 50%;
}
.large-2::-webkit-scrollbar-track {
border: 1px solid #000000;
padding: 2px 0;
background-color: #404040;
}
.large-2::-webkit-scrollbar {
width: 10px;
}
.large-2::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #737272;
border: 1px solid #000;
}
Instead of div you would add a class name for your scroller:
div {
height: 100px;
overflow: auto;
}
Refer to this link: Adding Scrollbars in HTML
Related
I have this div that shows a top red bar. I've been trying to move this bar to the left side and make it look like a border left, but not having any luck. Does anyone know how to make it look like a border left using this code? Thanks in advance!
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
background-color: red;
}
<div class = "container">this is a text</div>
This example adjusted position of ::after to make the red border appear on the left, hopefully close to the desired result.
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
width: 6px;
inset: 0;
background-color: red;
}
<div class = "container">this is a text</div>
Perhaps just simplify it to a border?
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
border-left: solid 8px red;
overflow: hidden;
}
<div class = "container">this is a text</div>
You can set border-left: 6px solid red; on the container class and remove background-color: red; from .container::after
Additionally, if you want to keep the grey border, just apply that style to each other sides of the container like so:
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
See snippet below:
.container {
position: absolute;
display: block;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border-left: 6px solid red;
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
}
<div class = "container">this is a text</div>
You can also use a mixed border style and use hidden for the top, bottom, and right.
usage is described at W3Schools
I had implemented an auto-complete functionality for my search box, but autocomplete is moving for different screen sizes it is static for above 600px. I want that to be below my search bar.
Mobile view
Desktop View
CSS for auto complete
.autocomplete-items {
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
position: relative;
display: flex;
align-items:center;
flex-direction: column;
}
.autocomplete-items div {
padding: 10px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
box-sizing: border-box;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
width: 70%;
max-width: 630px;
position: relative;
right: 64px;
text-align: left;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
Search bar CSS
.mainSection .searchContainer .searchBox {
border: none;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
height: 44px;
border-radius: 2px;
outline: none;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
width: 70%;
max-width: 630px;
color: #000;
}
I am pretty sure that width: 70%; is causing the problem. % always depends on the container size and therefore such problems can happen. Try it with using Pixels instead.
I need to create a header that looks like the firs image, however, it can't be an image. Preferably just css, but open to jQuery if there is a way to do this with jQuery.
I have tried many different things, but cannot create the 45 degree angle on the header(just before Home). This is the closest I have gotten. The colors are wrong in this image but that is intentional so that I could better illustrate the issue.
This is part of my latest attempt make this work and I think I am close with it, but it still isn't right.
#header{
float:left;
margin-top:20px;
overflow: hidden;
padding-bottom: 10px;
background-color:#F1F1F1;
-moz-box-shadow: 3px 3px 5px 0px #ccc;
-webkit-box-shadow: 3px 3px 5px 0px #ccc;
box-shadow: 3px 3px 5px 0px #ccc;
width: 100%;
height:130px;
z-index: 1;
}
#secondHeader{
float:right;
background-color:#ffffff;
width:50%;
height: 80px;
position: relative;
margin-top: -50px;
margin-right:15px;
/* border-radius: 15px 15px 0px 20px; */
/* background-color:#ff0000; */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
z-index: 10;
}
#secondHeader::before{
height: 80px;
width: 70px;
border-radius: 10px 10px 10px 10px;
background-color: #f1f1f1;
content: "";
position: absolute;
left: 32px;
top: 0px;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
z-index: -1;
}
What am I doing wrong? I have worked on this for two days and cannot figure it out.
this is pretty close to what you need. Simply using borders to do this:
#menubar {
width: 40vw;
min-height: 100px;
background-color: rgba(0,0,0,0.1);
}
#menubar ul {
margin-left: 55px;
padding-top: 40px;
}
#angle {
position: absolute;
border-top: 102px solid rgba(0,0,0,0.1);
border-right: 52px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 2px;
}
#angle2 {
position: absolute;
border-top: 100px solid white;
border-right: 50px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 1px;
}
<div id="menubar"><div id="angle"></div><div id="angle2"></div><ul>Menu here</ul></div>
I'm using JQuery to prepend a <p> element into a div however if mainButtonText in the p element is too long, it will be outside of the div.
http://puu.sh/mvm7F/a99aba0b1e.jpg
I want it to look like this: http://puu.sh/mvmEy/c17db01e4a.jpg
Is it also possible to automatically resize the text font size?
html:
<div id="mainButton"></div>
css:
#mainButton {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100px;
height: 40px;
font-family: monospace;
font-size: 12px;
text-align: center;
line-height: 40px;
background: #808080;
color: #fff;
text-decoration: none;
border-radius: 10px;
box-shadow: inset 1px 1px 1px rgba(255,255,255,0.05), inset 0 0 35px rgba(0,0,0,0.6), 0 5px 5px -4px rgba(0,0,0,0.8);
}
#mainButton:hover {
background: #d3d3d3;
}
#mainButton:active {
top: 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.4), inset 0 0 35px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1), inset 0 6px 4px rgba(0,0,0,0.4);
}
javascript:
function changeMainButton() {
'use strict';
$('#mainButton').empty();
$('#mainButton').prepend('<p>' + mainButtonText + '</p>');
}
Thanks for any help! :)
Maybe this could help:
#mainButton {
...
overflow: hidden;
}
You can make the text adjust to its container using
#mainButton {
word-wrap: break-word;
}
You can also resize the font size in relation to its parent element using javascript like http://simplefocus.com/flowtype/ or http://fittextjs.com/ but if you want to control it in granular use #media, em and rem
I have a div with a background color of rgba(255,0,0,1), and a border color of rgba(0,255,0,0.2), and a 10px border-radius.
The problem is that the border color have the background color under it.
This is my code:
div{
background-color: rgba(255,0,0,1);
border: 10px solid rgba(0,255,0,0.2);
border-radius: 10px;
width: 200px;
height: 200px;
}
article{
margin: 10px;
margin-top: 20px;
background-color: rgba(255,0,0,1);
outline: 10px solid rgba(0,255,0,0.2);
outline-radius: 10px;
width: 200px;
height: 200px;
}
<div></div>
<article></article>
I need a border like at the outline.
Saddly I can't use outline instead because it doesn't have "outline-radius" property, only "-moz-outline-radius", but it doesn't work on Chrome.
Use background-clip: content-box; or background-clip: padding-box;
From MDN
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
div{
background-color: rgba(255,0,0,1);
border: 10px solid rgba(0,255,0,0.2);
border-radius: 10px;
width: 200px;
height: 200px;
background-clip: content-box;
}
<div></div>
If I understand correctly, you can use box-shadow, which sits outside the border:
div {
background-color: rgba(255, 0, 0, 1);
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.5);
border-radius: 10px;
width: 200px;
height: 200px;
/*extra styling*/
margin: 50px;
}
/*Just for demo so you can see the transparency*/
body {
background: #fff url(http://www.destination360.com/north-america/canada/images/s/canada-cn-tower.jpg) repeat;
}
<div>Red half-opacity box-shadow</div>
What you need is the background-clip attribute:
div {
background-clip: padding-box;
background-color: rgba(255,0,0,1);
border: 10px solid rgba(0,255,0,0.2);
border-radius: 10px;
width: 200px;
height: 200px;
}
article {
background-clip: padding-box;
margin: 10px;
margin-top: 20px;
background-color: rgba(255,0,0,1);
outline: 10px solid rgba(0,255,0,0.2);
outline-radius: 10px;
width: 200px;
height: 200px;
}
<div></div>
<article></article>
Try using two div.
div.outer {
border: 10px solid rgba(0, 255, 0, 0.2);
border-radius: 10px;
width: 200px;
height: 200px;
}
div.inner {
background-color: rgba(255, 0, 0, 1);
height: 100%;
width: 100%;
}
<div class="outer">
<div class="inner"></div>
</div>