First of all, this material datepicker is based on: https://stackblitz.com/angular/qmnrlgabjly?file=src%2Fapp%2Fdatepicker-views-selection-example.ts
I have copied all the code i need from: https://material.angular.io/components/datepicker/overview
however the popup for choosing year and date is always positioned wrong (see picture under):
I have the exact same code as the example, and my scss-file looks like this:
#import "../../../shared/styles/bootstrap/_variables.scss";
#import "../../../shared/styles/bootstrap/_mixins";
#import "../../../shared/styles/app/variables.scss";
#import '~#swimlane/ngx-datatable/index.css';
#import '~#swimlane/ngx-datatable/themes/bootstrap.css';
#import '~#swimlane/ngx-datatable/themes/dark.scss';
#import '~#swimlane/ngx-datatable/themes/material.scss';
#import '~#swimlane/ngx-datatable/assets/icons.css';
#import "~#angular/cdk/overlay-prebuilt.css";
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
.home-container {
margin: 0 auto;
max-width: map-get($container-max-widths, "lg");
.home-logo {
display: flex;
justify-content: center;
img {
width: 240px;
}
}
.home-text {
text-align: center;
#include media-breakpoint-up(lg) {
text-align: left;
}
}
.home-text-big {
font-size: 3.9375rem;
}
}
:host ::ng-deep .datatable-row-odd {
background-color: #eee;
}
:host ::ng-deep .datatable-header {
background-color: #f05050;
padding: 0.5rem 0 0 0.5rem;
font-size: 1.2rem;
}
:host ::ng-deep .datatable-body-cell {
vertical-align: middle;
padding: 0.5rem 0 0.5rem 0;
}
ol {
font-size: 2.25rem;
}
#manualInput p {
font-size: 1rem;
}
#allContent {
display: none;
}
#ptags {
font-size: 1rem;
}
ul{
list-style: circle;
padding: 0;
}
.secondLevel {
font-size: 1.5rem;
}
.container {
max-width: none;
}
input {
width: 100%;
}
button {
margin-bottom: 1rem !important;
width: 7rem;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 3px solid #dc3545;
}
.example-month-picker .mat-calendar-period-button {
pointer-events: none;
}
.example-month-picker .mat-calendar-arrow {
display: none;
}
::ng-deep .mat-form-field-underline {
visibility: visible;
z-index: -999;
display: block;
}
And HTML:
<mat-form-field appearance="fill">
<input matInput [matDatepicker]="dp" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp [touchUi]="true" disabled="false"
startView="multi-year"
(yearSelected)="chosenYearHandler($event)"
(monthSelected)="chosenMonthHandler($event, dp)"
panelClass="example-month-picker">
</mat-datepicker>
</mat-form-field>
The popup-window is rendered OUTSIDE the App-root actually, like this:
BTW, the mat-datepicker itself is positioned correct inside the app-root somewhere, but since i cant control the popup it gets positionen waay outside.
Does anyone have any suggestions? Tell me if you need something more, will respond quickly!
Thanks!
use
display="anchored"
Related
I tried like this. As I know [disabled] in css meant of disabled = 'disabled' in javascript, but it didn't work on my vue project.
If I click checkbox then the password input box changed to disabled. But it isn't changed of the color to burlywood
If I want to change the background color of input box by checking state of a checkbox, then how can I code a source that it will happen?
vue :
<div class="form">
<p>ID</p>
<input type="text" v-model="account" #keyup.enter="submit" />
<p>Password</p>
<input type="password" v-model="password" #keyup.enter="submit" :disabled="sso == 1"/>
<div>
<input
class="checkbox_sso"
type="checkbox"
v-model="sso"
true-value="1"
false-value="0" />SSO authentication login
</div>
</div>
...
export default {
data() {
return {
visible: true,
account: '',
password: '',
sso: '',
}
},
computed: {
...mapState('store', { logo: (state) => state.logo }),
},
...
}
scss :
.form {
width: 100%;
padding: 15px 15px 0;
margin: 0 auto;
text-align: center;
.checkbox_sso{
width: 24px;
height: 24px;
margin: 0px 5px 0px 0px;
}
p {
font-size: 12px;
color: nth($gray, 5);
margin-bottom: 5px;
text-align: left;
}
input {
[disabled] {
background-color: burlywood;
}
width: 100%;
height: 46px;
margin-bottom: 20px;
color: nth($gray, 2);
}
}
Just add & with [disabled] and your code is good too go
.form {
width: 100%;
padding: 15px 15px 0;
margin: 0 auto;
text-align: center;
.checkbox_sso{
width: 24px;
height: 24px;
margin: 0px 5px 0px 0px;
}
p {
font-size: 12px;
color: nth($gray, 5);
margin-bottom: 5px;
text-align: left;
}
input {
&[disabled] {
background-color: burlywood;
}
width: 100%;
height: 46px;
margin-bottom: 20px;
color: nth($gray, 2);
}
}
Your scss is incorrect. The css output will be input [disabled] whereas you need input[disabled].
Note: you should beware nesting in scss where it provides little value and makes your code unnecessarily complicated.
.form {
input {
width: 100%;
height: 46px;
margin-bottom: 20px;
color: nth($gray, 2);
}
input[disabled] {
background-color: burlywood;
}
}
Just found out about and tags. Default gives out a very crude style. I had success using the ::marker Pseudo Element to remove the default marker, but don't know how to put it on the right side. Used the ::after Pseudo Element but can't animate it (Rotate 180deg or scale it) when the summary "opens". Is there a proper way to do it? Or did I miss anything with my method? Thanks.
PS: Since I am a newb, I don't know how to get the Google icon font to the codepen. However, you will see what I tried to do with the expand_arrow icon.
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.thing {
background-color: cadetblue;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.new_game {
font-size: 3rem;
}
.what_is_question {
background-color: cornflowerblue;
cursor: pointer;
}
.what_is_question[open] {
background-color: darkmagenta;
}
.what_is_question {
font-size: 5rem;
}
.question_title {
position: relative;
}
.question_title::after {
content: url(./images/expand_more_black_24dp.svg);
}
.what_is_question[open] .question_title::after {
transform: rotate(180deg);
}
.question_title::marker {
content: none;
}
.answer {
background-color: darkkhaki;
font-size: 3rem;
padding-left: 3.5%;
}
<div class="thing">
<h1 class="new_game">QnA</h1>
<details class="what_is_question">
<summary class="question_title">What is the question?</summary>
<p class="answer">The question is the answer.</p>
</details>
</div>
https://codepen.io/consig1iere/pen/bGWXRMW
The problem is that you can't apply transforms to elements with display: inline.
So add display: inline-block; to your .question-title
.what_is_question[open] .question_title::after {
display: inline-block;
transform: rotate(180deg);
}
I have a link on my menu items and id's on h2 of the text that belong to it. All I want to do is easy - when I click on certain item in the menu I want it to move down to the text that belongs to it. Easy.
I have it like side menu on the left and next to it is the text. When the resolution is under 479px the "side menu" is at the top and the text is under it. And what I want it to do is only when it is under this resolution - to jump down to the text (h2). When is it side by side it is fine and there is no need to do that of course. So my question is.. is it posiible to do so somehow only by using html and css? To make it work ("jump") only when it is under 479px? Media queries somehow?
Thanks you
<section id="budova">
<div class="materials">
<div class="container">
<h1>BUDOVA (izolace)</h1>
<div class="materials-container">
<div class="kategorie">
<h2 data-kategorie="#silsonic" class="active">Silsonic</h2>
<h2 data-kategorie="#mappysil400">Mappysil CR 400</h2>
<h2 data-kategorie="#mappysil404">Mappysil CR 404</h2>
<h2 data-kategorie="#polistik">Polistik / M under special HQ</h2>
<h2 data-kategorie="#pavisol">Pavisol</h2>
<h2 data-kategorie="#mappysilent">Mappysilent</h2>
<h2 data-kategorie="#fonosilent">Fonosilent</h2>
<h2 data-kategorie="#bugnato">Mappysil CR Bugnato</h2>
<h2 data-kategorie="#mappysil-re">Mappysil CR RE</h2>
<h2 data-kategorie="#mappypren">Mappypren AU</h2>
<h2 data-kategorie="#stopfire">Stopfire Bugnato</h2>
</div>
<div class="produkty" id="produkty">
<div id="silsonic" class="active">
<h3>Silsonic</h3>
<img src="./img/materials/budova/silsonic.jpg" alt="Silsonic">
<p>Cena od 150 kč vč. DPH</p>
<p>v 40/š 600/d 1200 mm ( ostatní rozměry v sekci ceník )</p>
<p>SILSONIC je termoizolační a akusticky absorpční materiál vyrobený z tepelně zpracovaných, recyklovaných polyesterových vláken. Panely SILSONIC se používají k tepelné a zvukové izolaci všech druhů zdiva, sádrokartonových konstrukcí, stropů a pro podstřešní izolace.</p>
</div>
.
.
.
more text
CSS
.materials-container {
display: grid;
grid-template-columns: 1fr 3fr;
margin: 3rem 0;
}
.materials h1 {
text-align: center;
padding: 6rem 0 1.5rem;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 1px;
border-bottom: 1px solid;
width: 90%;
margin: auto;
}
.kategorie {
background-color: #c4c4c4;
text-align: center;
padding: 1rem 0;
border-radius: 10px;
margin-bottom: 8rem;
}
.produkty {
display: flex;
justify-content: center;
/* align-items: center; */
margin-left: 10rem;
}
.produkty div {
display: none;
}
.produkty div.active {
display: initial;
}
.produkty h4 {
text-transform: uppercase;
margin-top: 3rem;
}
.produkty p:first-of-type,
.produkty p:nth-of-type(2) {
font-weight: 600;
}
.produkty img {
max-width: 300px;
}
.materials {
padding-bottom: 40px;
}
.materials p {
line-height: 24px;
}
.materials h1 {
margin-bottom: 5rem;
}
.materials h2 {
width: 70%;
cursor: pointer;
font-size: 1.2rem;
font-weight: 300;
padding: 0.8rem 0;
border-bottom: 1px solid transparent;
margin: 0 auto;
transition: all 0.3s;
}
.materials h2:hover {
border-bottom: 1px solid #fff;
color: #fff;
}
#media (max-width: 479px) {
.main-text p {
line-height: 2rem;
}
.main-text h1 {
padding: 4rem 0 0.5rem;
}
.photos img {
width: 60%;
margin: auto;
}
.photos {
height: 160px;
}
.nav-menu .logo {
width: 53%;
height: 52px;
}
.materials-container {
display: block;
}
.materials h2 {
font-size: 1.2rem;
}
.kategorie {
margin-bottom: 5rem;
}
#fonosilent {
width: 100%;
}
}
make an extra "link" in the html
on small screens one will be hidden (the one without jump-to-link) while the other one (with anchor-tag and jump-to) will be shown.
...
<div class="kategorie">
<h2 data-kategorie="#silsonic" class="active">Silsonic</h2>
<h2 data-kategorie="#silconic" class="active big-screen">Silsonic</h2>
...
media-queries in css:
#media (max-width: 479px) {
.big-screen {
display: none;
}
.small-screen {
display: grid/flex/whatever;
}
}
#media (min-width: 480px) {
.big-screen {
display: grid/flex/whatever;
}
.small-screen {
display: none;
}
}
Screenshot of network tab My external css isn't displaying the styles. I have a link in my html but I think the CSS may not be working. Do I need to add additional elements to my style sheet to get the displays to work properly?
.responsive {
width: 40%;
height: auto;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.simple-subscription-form {
background: #000000;
color: #94C60D;
padding: 2rem;
border-radius: 0;
align-content: center
}
.simple-subscription-form.button {
margin-bottom: 0;
border-radius: 0 0 0 0;
}
#dialog-message {
display: none;
padding: 5px;
height: auto;
width: auto
}
div.hidden {
display: none;
}
You can not access the file system. Use your project resource folder.
Use <link rel="stylesheet" href="~/Resources/PATH + FILENAME">
I have a small question about #content in sass
I still not understand well how to use it, like I did read content is if you want use a mixin and insert something else there.
My question is: why I need use #content if works whithout?
my example:
#mixin context--alternate-template {
margin: 0;
font-size: 14px;
}
.content-sample {
#import context--alternate-template;
background-color: black;
}
output css:
.content-sample {
margin: 0;
font-size: 14px;
background-color: black;
}
sample I a saw on web:
#mixin context--alternate-template {
margin: 0;
font-size: 14px;
#content
}
.content-sample {
#import context--alternate-template;
background-color: black;
}
output css:
.content-sample {
margin: 0;
font-size: 14px;
background-color: black;
}
so yes why I need insert #content in the mixin if works whithout.
#content is useful for injecting a copy of rules inside your mixin. The correct syntax of your sample seen on the web becomes:
SCSS:
#mixin context--alternate-template {
margin: 0;
font-size: 14px;
#content
}
.content-sample {
#include context--alternate-template {
background-color: black;
}
}
Note:- The brackets after the #include call. Now, you have the rule background-color: black; injected after font-size: 14px;.
CSS output:
.content-sample {
margin: 0;
font-size: 14px;
background-color: black;
}
In this case, #content is useless. In fact, the most interesting usage with #content is to inject nested selectors:
SCSS:
#mixin context--alternate-template {
margin: 0;
font-size: 14px;
#content
}
.content-sample {
#include context--alternate-template {
.important-thing {
color: red;
}
&.is-italic {
font-family: 'my-webfont-italic';
}
}
// outside mixin call
background-color: black;
}
CSS output:
.content-sample {
margin: 0;
font-size: 14px;
background-color: black;
}
.content-sample .important-thing {
color: red;
}
.content-sample.is-italic {
font-family: 'my-webfont-italic';
}
One more use case of #content that helped me to see its value - media queries
SCSS:
#mixin desktop {
#media screen and (min-width: $desktop-size) {
#content;
}
}
.main {
display: flex;
flex-direction: row;
#include desktop{
flex-direction: column;
}
}
CSS output
.main {
display: flex;
flex-direction: row;
}
#media screen and (min-width: 60rem) {
.main {
flex-direction: column;
}
}