I'm in a css firestorm trying to figure this out.
I have this code
.spectator-chat-title{
background-color: darken($content-container-bg, 5%);
height: 30px;
padding: 3px;
color: #ddd;
border-top: 1px solid #1C2337;
box-shadow: 0px 1px 1px darken($content-container-bg, 10%);
z-index: 1001;
position: absolute;
width: 100%;
bottom: 0;
&.collapse{
bottom: 50px;
}
}
then I have this ng-class method in my markup
<div class="spectator-chat-title" ng-class="{'collapse':chatHide}">
<i ng-click="chatHide = !chatHide" ng-class="{'fa-angle-double-down':!chatHide, 'fa-angle-double-up':chatHide}" class="fa pull-right"></i>
</div>
When I'm in chrome dev tools and change the bottom property to 50px it works. But when I add the 'collapse' class through ng-click... the item just POOFS and disappears. Any ideas? '
From reading the comments, I don't know why exactly the item disappears, but if you say that it works with setting the bottom style directly, then you can do this instead:
<div class="spectator-chat-title" ng-style="{'bottom': chatHide ? '50px' : ''}">
Related
Is there a way in css to create and overlay with opacity 0.5
And create a class that when applied will somehow affect the overlay so the final result will look something like this?
What I am looking for a way that the class would affect the overlay.
I don't know how the rest of your page looks like, but you can use a pseudo-element (to get an offset) with box-shadow to punch a hole around an element, simply by adding a class to the element you want to highlight. Needs some fine adjustment, if you got other shapes than rectangles.
div {
box-shadow: 0px 0px 10px 1px lightgrey;
border-radius: 1rem;
padding: 1rem;
}
button {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
border-radius: 1rem;
cursor: pointer;
}
.highlight {
position: relative;
}
.highlight::before {
--white-area: -25px;
content: '';
position: absolute;
left: var(--white-area);
right: var(--white-area);
top: var(--white-area);
bottom: var(--white-area);
box-shadow:
inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5),
0px 0px 0px 9999px rgba(0, 0, 0, 0.3);
pointer-events: none;
border-radius: 2rem;
}
<div>
<h3>Don't Have an Account?</h3>
<button class="highlight">Create Your Account</button>
</div>
You can easily create an overlay with css. But AFAIK there is no way to "punch a hole" into that overlay. But you might put your button above the overlay and give it a (in this case white) shadow. So you would have to apply a class to the button rather than to the overlay.
EDIT:
As Simon shows, there IS a way to make a hole - but there would be a severe issue: How do you find the position above your button in a responsive design?
I still would recommend putting the button ABOVE the overlay.
A way is to create an overlay, and put the button on top of it, using z-index.
button{
background-color: #3499eb;
padding: 10px;
position: relative;
z-index: 999;
color: #fff;
}
.overlay{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left:0;
background-color: black;
opacity: 0.5;
}
<div class="overlay"></div>
<button>Click here </button>
Is there a way to add triangle pointer to v-menu component in Vuetify 2.x?
I mean on this common detail on the web pages (eg. this screenshot is from github):
I have sample code here with the menu that shows as dropdown when button is clicked. I manage to add margin to the menu of 40px via CSS so it's pushed down. This will provide some space for the triangle, but how can I add this triangle pointer like its' on github?
Codepen solution
I belive you need something like this:
.my-menu {
margin-top: 40px;
contain: initial;
overflow: visible;
}
.my-menu::before {
position: absolute;
content: "";
top: 0;
right: 10px;
transform: translateY(-100%);
width: 10px;
height: 13px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 13px solid #fff;
}
Effect:
Note: Here is an explanation of how it works: css tricks
Specifically concerning vuetify, you would use the activator slot and a v-model to determine the state of the menu:
<v-menu v-model="menu" ...>
<template v-slot:activator="{ on }">
<v-btn
icon
v-on="on">
<v-icon>mdi-plus>
<v-icon v-if="menu">mdi-menu-up</v-icon>
<v-icon v-else>mdi-menu-up</v-icon>
</v-btn>
</template>
</v-menu>
Make sure you bind v-model attribute here to a data property within the containing component definition.
sidenote
I'm not entirely sure what putting 2 icons inside of a <v-btn icon will result in. You may have to tweak it a bit with flex for the layout to work correctly.
Try this:
.my-menu {
margin-top: 36px;
overflow: visible;
}
.my-menu .v-list::before {
right: 10px;
top: -10px;
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
}
I have a div like below:
<div class="circle-icon"><span class="icon icon-loanaccount"></span></div>
and this div tag has the following styles:
.circle-icon {
background: #db552d none repeat scroll 0 0;
width: 50px;
&::after{
border-bottom: 5px solid #db552d;
content: "";
height: 0;
position: absolute;
}&:before{
border-bottom: 5px solid #db552d;
content: "";
height: 0;
}
}
how can I dynamically style border-bottom with angular, suppose that I have the color I want to use in scope.borderColor ?
ng-style is your friend here, see working link here.
$scope.bordercolor = "thick dotted #ff0000";
<div class="circle-icon" ng-style ="{'border-bottom': bordercolor}">
<span class="icon icon-loanaccount"></span>
</div>
I found a code drawing a 6-point star:
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
now I need to place this picture inside the Button element.
should look like a real button with 6-point start on the left side.
|*Button| Like this :)
Try including a div inside of a tag - something like this code here:
<button onclick="sayHello();"><div id="star-six"> </div></button>
http://jsfiddle.net/53mHn/
Updated:
If you want the star on the left, create two divs inside of your button, one for the star and one for your text. Set the width of the star div to be 50px (or whatever the star width is) and set the float: to left.
<button onclick="sayHello();"><div class="star-content star-icon" id="star-six"> </div><div class="star-content">This is the text inside of my button</div></button>
Css is here:
.star-icon {
width: 50px;
float: left;
}
I am having problem to set the div border , which using the border-radius.htc.
It works in all browsers except IE.
I referred this site to make a div as rounded corners http://dimox.net/cross-browser-border-radius-rounded-corners/
My HTML will be,
<div id="div1">
<input type="text" id="txtBox" />
</div>
CSS will be,
#div1 {
width: 200px;
height: 30px;
background-color: #D1C9CC;
border-style: solid;
border-width: thin;
border-color: red;
-webkit-border-radius : 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(jquery/border-radius.htc);
-webkit-border-radius: 10px;
}
#txtBox {
width: 180px;
height: 20px;
background-color: transparent;
position: relative;
top: 5px;
left: 10px;
border-style: none;
}
My need to set the textbox rounded corner with border of red color in the IE. How can I modify this ?
Good answers are definitely appreciated.
You may need to select F12 on your keyboard while inside of IE and check which document mode you are in. Anything below IE 9 will not work.