I am trying to create a multi-line label for a v-checkbox. The first line would be a title and the second line would be a sub-title. I tried using the label slot, but it keeps everything on the same line. My code is below. Any suggestions welcome, thanks.
<v-checkbox>
<template v-slot:label>
<div class="primary--text">Imaging Orders</div><br/>
<div>1 Imaging Order(s) Selected</div>
</template>
</v-checkbox>
I found a better solution, instead of changing the display property, was to just change the flex direction (from the default of row) to column. I also ran into the items not being left aligned, so I added the declaration after flex-direction (you may find you need this too). I had to target the element more directly, but I did not need !important. I also needed to use a deep selector. Here is some documentation on that. For that, you would just need a class on your v-checkbox and that would be '.a' in the documentation's examples and the following selector would be '.b'.
<style scoped>
.v-input--selection-controls .v-input__slot > .v-label {
flex-direction: column;
align-items: flex-start;
}
</style>
That happens because the v-label inserted into the DOM is a display: inline-flex by default.
You could overwrite this rule with some custom css if you really need to.
Caution: Heavily test if you don't accidentally cause other labels to act weird because of this. Really depends on if you have more labels in use or not. I'd be very careful with overwriting css just like that.
<style scoped>
.v-label {
display: block !important;
}
</style>
Related
I'm trying to make all links on my page have a custom underline similar to this.
Here's what I have so far of a menu that's going to use this feature:
CodePen
The underline, instead of appearing under each link, appears under the "toolbox" div (the link objects' grandparent).
I've tried just making the first CodePen but with the features SCSS allows you (& and nested rules), but I seem to be missing something and won't even show the underline. I'm guessing it has something to do with my use of the parent selector.
How do I make my current code work correctly? If the issue is with my use of parent selectors in general, what is the correct selector to use in this case?
(Stack Overflow is making me put this)
You are using position: absolute in ::after therefore the underline will have absolute position not related to the <a>. Just add position relative to <a> thus inclosing the absolute ::after content to it.
.navbar {
background-color: #191919cc;
padding: 10px;
border-radius: 10px;
a {
position: relative; // here
margin: 0 10px;
}
}
codepen link: https://codepen.io/ashwin-chandran/pen/BaZjQLz
I need a component exactly like below picture.
image code is here but i need that codes for typescript.
and also copy codes not working!
any body can help with an example in https://codesandbox.io/.
thanks a lot
Recently I used react-multi-carousel with typescript.
Maybe that carousel's parent style is like this.
display: flex;
Carousel doesn't work with that style so you should change the parent style.
It's not a problem caused by Typescript
display: block or add this style.
min-width: 400px; max-width: 400px;
it works for me.
I am debugging my website and I wish I could just search for all the occurrences of property through all the stylesheets.
For example I wish I could find all instances of the property color: #fff; and from that quickly browse through the selectors and the correspondent stylesheet.
Is this possible?
It is (as far as I am aware) impossible to search for a specific selector through the F12 Developer Tools. Having said that, it is very possible to add generic rules that would override existing selectors.
Depending on the exact element(s) that you want to modify the styles for, you can use a non-specific CSS selector to target all of them and apply a rule that would override any existing rules. For example, span will target all <span> tags, regardless of ID and class. You can target any element with the universal (*) selector.
However, it should be noted that the more 'generic' you are, the less 'specific' you are (which stands to reason). This means that if you have any other rules that are more specific, they will override your generic rules. As such, you'll want to combine a generic rule with the !important declaration.
Here's an example of that:
span {
color: red;
font-size: 20px; /* More specific than the * selector */
}
.more {
color: blue; /* Will override span */
}
* {
font-size: 40px;
color: green !important; /* Maximum specificity; override anything */
}
<span>One</span>
<span class="more">Two</span>
<div>Three</div>
In the above, all <span> elements are red. Then <span class="more"> turns blue, because it has a more specific selector. Although * is a less specific selector, adding the declaration !important to the color rule overrides the previous two colours set.
Keep in mind that the above should only be used for testing; you will almost never want to apply such a broad selector as * for production. Also, avoid using the !important declaration outside of testing as well, and instead work with CSS specificity.
You can either add the rules directly to your stylesheet temporarily, or preferably add them client-side through the F12 Developer Tools. Using the F12 Developer Tools will even showcase when rules are overridden (like in the above example) by placing a line through the middle of them. Rules are displayed from most specific to least specific.
The <span class="more"> from the above example is highlighted here:
I'm currently working with md-tab-group (just updated to latest version yesterday)...
Does anyone know
if it is possible to disable/configure Ripple on existing components (md-tab-group in this case)? Latest version causes my tab headers to jump because ripple is calculating large values, solution is to add a small value for md-ripple-max-radius for md-tab-label directly in the template of MdTabGroup.
if there are plans to remove min-width for md-tab-labels? I'm working with a quite small tab group (only 300px width), therefore 160px min-width is not usable.
Thank you!
Use disableRipple as an attribute to disable ripples for the md-tab-group as Angular2+ using the Angular material.
Just simply do something like this:
<md-tab-group disableRipple></md-tab-group>
Also if you are using the latest Angular Material, it's a little bit different like this below:
<mat-tab-group [disableRipple]="true"></mat-tab-group>
I came up with two ways to override md styles based on another post. I had the exact same problem for tabs being too wide in a small tab group. It is still very experimental and might need further explanations but it has worked for me.
First solution using Sass styling
You can use /deep/ before the class you are trying to override
/* your-component.component.scss file*/
/deep/ .md-tab-label {
min-width: 0px; /* Or whatever value you wish */
/* In some situations !important seems necessary */
}
<!-- your-component.component.html -->
<!-- Template from Angular Material's Github Readme.md -->
<md-tab-group>
<md-tab>
<template md-tab-label>
The <em>best</em> pasta
</template>
<h1>Best pasta restaurants</h1>
<p>...</p>
</md-tab>
<md-tab>
<template md-tab-label>
<md-icon>thumb_down</md-icon> The worst sushi
</template>
<h1>Terrible sushi restaurants</h1>
<p>...</p>
</md-tab>
</md-tab-group>
Second solution with pure css
Create an overrides.css file that you link in your main index.html and then override the material classes here
/* overrides.css */
.md-tab-label ,.md-tab-label-active {
min-width: 0; /* same comments as the first solution */
}
<!-- index.html -->
<link rel="stylesheet" content="text/css" href="overrides.css">
Both are kinda dirty, but the first one provides me a good solution to override a md component's style, keeping the alterations inside the concerned components (consider wrapping those components for local changes only).
If you want to remove ripple and click effect in Angular v15 with Angular material v15 you can do it with the "disableRipple" property and some stylings.
<mat-checkbox
formControlName="yes"
disableRipple
>Yes
</mat-checkbox>
Add styling rule to the styles.scss or styles.css:
.mdc-checkbox__ripple {
display: none;
}
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.