This absolutely positioned pseudo-element has a position:relative parent. We should expect its border styles to be applied, but they are not. Why?
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: #ffffff;
}
.tooltip-hard-coded {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
}
.tooltip-hard-coded::after {
position: absolute;
top: 11px;
right: 100%;
left: -9px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: red;
background-color: pink;
}
<div style="display: flex; flex-direction: column">
<div style="padding: 32px;">
<div class="tooltip">With CSS variables</div>
</div>
<div style="padding: 32px;">
<div class="tooltip-hard-coded">With hard-coded values</div>
</div>
</div>
<div class="tooltip">Hi</div>
no border with the following CSS:
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: var(--color-background);
}
when hard-coding a border color value, the pseudo-element only gets the style partially applied:
<div class="tooltip-hard-coded">With hard-coded values</div>
with hard-coded values:
<div class="tooltip-hard-coded">With hard-coded values</div>
What is the correct way to apply border styles to an absolutely positioned pseudo-element using CSS custom properties?
Tried several variations of the styles applied to pseudo-element; tried hard-coded values, tried changing display methods, etc
Related
Does anyone know why the input box might be glitching only on iOS but works fine on Android? I have attached two videos for better explanation of this problem. Basically on iOS I would have to tap the input field twice for it to go into 'active' state and afterwards when I try type it zooms in so much into the screen to type. No issues like this in the browser as well.
iOS - https://streamable.com/e622tj
Android - https://streamable.com/4zvns6
<div
id='task-writer'
onClick={() => {
inputRef.current?.focus();
}}
>
<div className='left'>
<label>
<input
type='checkbox'
defaultChecked={checked}
onChange={() => setChecked(!checked)}
/>
<div className='checkbox-div' />
</label>
<form
className='NewTodoForm'
id='task-form'
onSubmit={handleSubmit}
ref={formRef}
>
<input
value={userInput.task}
onChange={handleChange}
id='task'
type='text'
name='task'
placeholder='Add your task here...'
autoComplete='off'
ref={inputRef}
// onFocus={() => {
// console.log('focused');
// setIsFocused(true);
// }}
// onBlur={() => {
// console.log('blurred');
// inputRef.current?.focus();
// setIsFocused(false);
// }}
/>
</form>
</div>
CSS Code:
#task-writer {
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
padding: 10px;
padding-left: 20px;
padding-right: 15px;
border-radius: 20px;
background-color: #f5f7fa;
.left {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
align-items: center;
gap: 20px;
padding: 10px 0;
label {
display: grid;
place-items: center;
width: 30px;
height: 30px;
cursor: pointer;
input {
display: none;
}
form {
width: 100%;
height: 100%;
overflow: hidden;
transform: translateX(-50px);
transition: 0.25s ease;
transition-property: transform;
input {
width: 100%;
height: 100%;
border: none;
outline: none;
font-family: 'Inter var', sans-serif;
font-size: clamp(12px, 1.65vw, 16px);
font-weight: 400;
color: #000;
background-color: transparent;
}
}
}
right-calendar-date {
position: relative;
display: flex;
flex-direction: row;
height: 40px;
width: fit-content;
align-items: center;
gap: 12px;
padding: 0px 12px;
margin-left: 12px;
border-radius: 10px;
padding-right: 40px;
cursor: pointer;
color: #6d6d6d;
background-color: #EAEDEE;
opacity: 0;
pointer-events: none;
transition: 0.25s ease;
transition-property: opacity;
h4 {
overflow: hidden;
white-space: nowrap;
color: #000;
}
}
.date-form {
display: grid;
place-items: center;
height: 30px;
width: 80px;
padding: 0 16px;
border-radius: 10px;
opacity: 0;
cursor: pointer;
color: #6d6d6d;
background-color: #eaedee;
transition: 0.25s ease;
transition-property: background-color;
:hover {
background-color: #d9d9d9;
}
h4 {
font-size: clamp(12px, 1.65vw, 14px);
font-weight: 500;
}
}
I am using jquery-3.4.1.min.js and jquery-ui-1.12.1 .
I have a problem with jquery ui sortable widget.
When I try to drag "div.container", which is child of "div.containerList" (with applied sortable), I am not able to trigger dom change on whole height of sibling element, I have to adjust dragged element vertical position.
Can somebody please explain this behavior, possibly with solution?
Thank you very much!
https://jsfiddle.net/chada090/47ku2jer/
A added some modificaton to make it more "contrast" for each element.
HTML
<div class="containerList">
<div class="container"><span class="title">test kontejner</span>
<div class="addTask">
<div class="switch">Přidat úkol</div>
</div>
<div class="taskList"></div>
</div>
<div class="container">
<span class="title">test kontejner1</span>
<div class="addTask">
<div class="switch">Přidat úkol</div>
</div>
<div class="taskList"></div>
</div>
<div class="container placeholder"><span class="title_newCont">Nový kontejner</span></div>
</div>
JS
$(".containerList").sortable({
// containment: "parent",
placeholder: "ui-state-highlight container",
change: function( event, ui ) {
console.log(ui);
}
}).disableSelection();
CSS
.containerList{
display: flex;
min-height: 600px;
}
.containerList .container{
display:inline;
margin-left: 15px;
margin-right: 15px;
flex: 0 0 300px;
min-height: 150px;
width: 300px;
display:flex;
flex-direction: column;
background: gray;
padding: 20px;
}
.container .title_newCont{
cursor: pointer;
color: blue;
}
.container .addTask{
margin-top: 10px;
margin-bottom: 10px;
background-color: white;
box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11);
min-height: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
}
.container .taskList{
margin-top: 20px;
background: brown;
height: 20px;
}
.taskList > div{
background-color: white;
margin-top: 15px;
}
.taskList .taskItem{
margin-bottom: 10px;
background-color: white;
box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11);
min-height: 40px;
display:flex;
align-items: center;
padding: 5px;
background: blue;
}
.taskNewItem > *{
padding: 3px;
background: green;
}
.taskNewItem input{
border: none;
outline: none;
background: red;
}
.addTask .switch{
text-align: center;
width: 100%;
background: yellow;
}
.taskNewItem{
display: flex;
flex-direction: column;
}
.taskNewItem input{
width: 100%;
}
.taskNewItem .taskButtonAdd{
width: 100%;
background-color: green;
flex:0 0 40px;
font-size: 15px;
border: none;
}
.ui-state-highlight{
background-color:blue !important;
}
after reading through API documentation, I found option "tolerance", which solved my problem.
tolerance Type: String Default: "intersect" Specifies which mode to
use for testing whether the item being moved is hovering over another
item. Possible values: "intersect": The item overlaps the other item
by at least 50%. "pointer": The mouse pointer overlaps the other item.
Code examples: Initialize the sortable with the tolerance option
specified:
1 2 3 $( ".selector" ).sortable({ tolerance: "pointer" });
I am a beginner at programming websites and know some about how HTML and CSS works but not much about jquery and javascript etc. I have managed to create a website and published it. It is not entirely finished but almost everyting works fine on computers, but on other devices (phones) my footer is complete caos and doesnt work the way i want it to. How can i fix this?
here is the index:
<div class="längstned3">
<img src="images/blånere.jpg" style="width:100%; height:300px;">
<div class="neretext">
<p><font color="#A4A4A4" size="2">Bonusprofit.se är en oberoende webbsida som jämför olika spelbolag och deras utbud av olika oddsbonusar. Vi har inte särskilda knutningar till någon/några specifika spelbolag och meningen med vår sida är att du som besökare med hjälp utav oss ska kunna se, jämföra och till sist välja den/de bonusar som passar just dig. Vid frågor eller synpunkter är du alltid välkommen att kontakta oss via mail eller sociala medier.</font></p>
</div>
<footer>
<font size="2" color="#A4A4A4">Spela inte om du är under 18.</font>
</footer>
<div class="fbtw"><p><font color="#BDBDBD" size="3">Sociala medier</font></p><hr><font size="2"><p><a class="twfärg" href="www.twitter.se"><u>Twitter</u></a></p><hr><p><a class="fbfärg" href="www.facebook.se"><u>Facebook</u></a></p></font><hr></div>
<div class="ansvarsfulltspelande"><p><font size="2" color="#A4A4A4">Vi stödjer ansvarsfullt spelande</font></p></div><div class="längstned1"><p> <font color="#BDBDBD">Copyright © 2017. Alla rättigheter reserverade. Bonusprofit.se </font></p></div><div align="center" class="längstned2"><a class="stödlinjen" target="blank" href="https://www.stodlinjen.se/#!/" ><abbr title="besök stödlinjens hemsida"><p><font size="4"><b>18+</b></font></p></abbr></a></div>
and here is the css:
.längstned1 { position: absolute;
bottom: 20px;
left: 790px;}
.längstned2 { position: absolute;
bottom: 245px;
right: 900px;
line-height:40px;
width:40px;
height:40px;
border-style:solid;
border-width:1px;
border-color:#A4A4A4;
border-radius:50%;
background-color:#A4A4A4;}
.längstned3 {
position:relative;
margin-top: 1600px;}
.twitter {
bottom: 10px;
right: 60px;
position:absolute;
border-style: solid;
border-width: 1px;
border-color: white;
border-radius: 50%;
background-color: white;}
.stödlinjen { text-decoration: none !important; color:black;}
.twitter:hover { -moz-box-shadow: 0 0 10px #4d4d4d;
-webkit-box-shadow: 0 0 10px #4d4d4d;
box-shadow: 0 0 10px #ccc;
opacity: 0.99;}
.facebook { background-color:#045FB4;
display:block;
float: right;
width: 55px;
height: 55px;
margin-top: -57px;
margin-right: 120px;
border-style: solid;
border-width: 1px;
border-color: white;
border-radius: 50%;
font-style: arial;
line-height: 55px;}
.facebook:hover {-moz-box-shadow: 0 0 15px #4d4d4d;
-webkit-box-shadow: 0 0 15px #4d4d4d;
box-shadow: 0 0 15px #ccc;
opacity: 0.99;}
.ansvarsfulltspelande {position: absolute;
bottom: 255px;
right: 960px; }
.länknere { color: white;}
.twfärg { color: white; }
.fbfärg { color: white;}
.kontaktaoss {color:#D8D8D8;}
.neretext {
width: 500px;
position: absolute;
bottom: 100px;
left: 30px;}
.fbtw { position: absolute;
bottom: 100px;
right: 150px;}
.footer {
color: black;
position: absolute;
bottom: 253px;
right:710px;
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
font-variant: caps;
font-weight: normal;
z-index: 5;}
Could you create a JSFiddle. The font element in the footer isn't supported in HTML5 w3 font tag, use css classes and IDs or and in-line style attribute
(<p style="color:blue">text<p>).
The two divs inside the footer for organization could go inside the footer.
<footer>// acts like a container div for the end of your page
<div> //These divs organize space inside of your footer.
</div>
<div>
</div>
</footer
I'm trying to use Stellar.js as multiple backgrounds inside of single element such as content. Anything that I've tried not working at all..
Default output look like this:
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.summer {
background-image: url(images/1.png);
}
.autumn {
background-image: url(images/2.png);
}
.winter {
background-image: url(images/3.png);
}
.spring {
background-image: url(images/4.png);
}
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
But I want it to be something like that
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
background-image: url(images/1.png), url(images/2.png), url(images/3.png), url(images/4.png);
}
<div class="photo" data-stellar-background-ratio="1.0"><div>content</div></div>
I'm quite new to this and need some help. Maybe it just couldn't work as I want?
I need a quick solution to getting some decent layout working within the tabnav widget display area. I'm already using blueprint css for other aspects of the layout but I don't have enough CSS chops to figure out how to get blueprint containers to display within the tabnav's content area.
The tabnav's content area is <div class="main_tabnav_content" id="main_tabnav_content">
and this is the related css:
.main_tabnav {
color: #000;
border-bottom: 1px solid #ccc;
margin: 13px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
.main_tabnav ul {
margin: 0px;
padding: 0px;
}
.main_tabnav li {
display: inline;
overflow: hidden;
list-style-type: none; }
.main_tabnav li span.disabled {
color: #888888;
background: #FAFAFA;
border: 2px solid #DDDDDD;
border-bottom: none;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none;}
.main_tabnav a, main_tabnav a.active {
color: #000000;
background: #EEEEEE;
font-weight: bold;
border: 1px solid #ccc;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none; }
.main_tabnav a.active {
background: #FFFFFF;
border-bottom: 3px solid #FFFFFF; }
.main_tabnav a:hover {
color: #FFFFFF;
background: #CCCCCC; }
.main_tabnav a:visited {
color: #000000; }
.main_tabnav a.active:hover {
background: #FFFFFF;
color: #000000; }
.main_tabnav_content {
background: #FFFFFF;
padding: 20px;
border:1px solid #ccc;
border-top: none;
z-index: 2;
}
I'd like to be able to put some columns inside the main_tabnav_content area like this
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
At the moment the columns are displayed but the main_tabnav_content box doesn't expand around them. Any suggestions for how to get the blueprint layout nested inside the main_tabnav_content area?
From Blueprint: screen.css:
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;}
.last, div.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
and also:
div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
I think if you add this <div class="clearfix"></div> before the end of the main_tabnav_content div it should fix the float problem.
Do you have the css for the span-5 & colborder classes? It sounds like it might be a float problem. Basically what's happening is when you add the columns to the main_tabnav_content div, the div doesn't expand, right?