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;
}
Related
I would like to add some styles to some components for example v-chip I want to add some padding globally. I do not want to do it, or import a style file on each component that uses v-chip. I tried to add the styles to variables.scss it works fine but violate the caveats https://vuetifyjs.com/en/features/sass-variables/#caveats that produces duplicate css. Created a overwrites.scss file and add to it dose not work neither. Please if anyone know how to achieve it?
According to caveats CSS duplication is happened when you import any other stylesheet into variables.scss. As far as I understand, there is no any duplication happened when you haven't imported any CSS file. So, to configure variables in variables.scss is a good way to configure global styles.
If you need to configure styles which have no applicable variable (or you just prefer this way of styles configuration) you can:
a. Create your own component (e.g. XChip.vue) as a wrapper for v-chip.
<!-- XChip.vue -->
<template>
<v-chip v-bind="$attrs" v-on="$listeners">
...
</v-chip>
</template>
b. Add necessary styles in this component
<style scoped>
...
</styles>
c. Then use it everywhere in your project when you need a chip.
You can find more information how to pass down slots here: Vue - how to pass down slots inside wrapper component?
I have a quick question regarding implementation of a small change in our system, and I want to hear your opinion about my little disagreement with another developer in our company.
Our working environment:
Laravel
AdminLTE
Two laravel guards for 'partner' and 'staff'. Each type of user (partner/staff) has access to a different set of pages, using a different set of controllers and a different subdomain.
Admin LTE comes with some skins that you can apply to your <body>, for example 'skin-blue' theme. This is what our page looks like. Just for a comparison, if you remove the 'skin-blue' class, our website looks like this.
We were asked by our client to change the color of the top navbar for the Staff side. So, because the colors at the moment are being added by an adminLTE skin, I thought it was better to create a second theme for the staff side, calling it "skin-staff", and then in our base blade file, check for which guard is being used, and add the class accordingly.
<body class="#if(get_guard() === 'partner') skin-blue #else skin-staff #endif" ...>
I made a copy of the original skin-blue file, renamed it to skin-staff, and just changed the color of the necessary elements. I thought this was the best way to go about it, but the developer which had to review my github Pull Request said that because this was such a small change, it wasn't necessary to create a new skin. His proposed solution was to simply add the css classes in the blade file, something like:
<head>
…
<style type="text/css">
#if (get_guard() === 'staff')
.skin-blue .main-header .navbar{
background-color:#bdac3c
}
.skin-blue .main-header .navbar .sidebar-toggle:hover{
background-color:#ac9b2b
}
.skin-blue .main-header .logo{
background-color:#bdac3c;
}
… // and other classes
#endif
</style>
Now, to me this is not correct, because we are mixing the logic for staff and partner side without a clear way to differentiate them. If we use skins, we can simply say something like "The top navbar is yellow because we are using class skin-staff". And "We are using class skin-staff because we are on the Staff guard". The propositions are clear and simple. However, by adding raw CSS to our blade file, we end up with something like "The top navbar is yellow because we are using skin-blue and also we are on the Staff guard and also we have added some custom CSS for the Staff guard". The extra changes we introduce to the system don't follow the pattern used by adminLTE, to me they just look like noise. If we had to for example do this five more times, we would end up with a lot of CSS in our base blade file, which I think would look bad and would force us to eventually decide to use the skin system of adminLTE, something we could just do right away.
But, being as stubborn as I know I am, I don't know if I have the right idea or if I just want to do things my way.
What do you guys think? Is it better to create a new skin, even if most of the CSS code inside the skin file will be duplicated, but it allows us to stick to the existing way of doing things, or is it better to just add the code in the blade file and don't think more about it?
Thanks for your ideas
This is very much an opinion based question, there is no clear right or wrong answer here.
Personally, I agree with your coworker, why copy the whole theme, that is hundreds of lines long, just to change a handful of classes?
That said, I don't personally like the styles living in the DOM under a style tag.
Why not create a new CSS file that contains the styles:
.skin-blue .main-header .navbar{
background-color:#bdac3c
}
.skin-blue .main-header .navbar .sidebar-toggle:hover{
background-color:#ac9b2b
}
.skin-blue .main-header .logo{
background-color:#bdac3c;
}
… // and other classes
And then as long as you include this file after the base skin-blue CSS theme, your updated staff skin changes will take precedence.
Something like this:
<link rel="stylesheet" href="{{ asset('css/skin-blue.css') }}">
#if (get_guard() === 'staff')
<link rel="stylesheet" href="{{ asset('css/skin-staff.css') }}">
#endif
This keeps the abstraction of your CSS inside CSS files (and out of the DOM), yet only overwrites exactly what it needs to.
It also means that if you need to update a common style between the two themes, you don't need to make the change in two different files; you just need to modify the skin-blue.css file.
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>
The assumption behind this question is that the designer is using proportional queries in a Responsive Web Design and going from 1-column on a smartphone to 2 and 3-column on the displays where they will comfortably fit.
A content widget jQuery plugin (like a Recent Updates widget) should change it's character in the different layouts. In 1-column layout it might need to be 4 small text links and in 2 or 3-column layouts it can include thumbnails and extra text.
For reference, here's the code as the end-user of the content widget would see it.
HTML:
<section id="sidebar">
<section id="latestupdates"></section>
</section>
JS:
(function($){
$(function(){
$("#latestupdates").widgetco_latestupdates();
});
})(jQuery);
I think the best way to hook into the designers layout changes is this. Ask for the breakpoints as parameters for widgetco_latestupdates during initialization and use the resize events to toggle css classes.
Is this even the right method? What are the pitfalls with doing this?
UPDATE:
Since asking, I have found enquire.js which will handle running the queries. That still leaves the question of this being the right method.
If you are careful with the classes you assign to the content, you can likely control everythinhg with standard CSS.
For example, say your desktop output was something like
<article>
<h1> Update heading </h1>
<img src="..">
<p class="intro"> Intro text ... </p>
<p class="full-text"> Full text here </p>
read more
</article>
Then in your CSS you manage what content to show on which devices with
#media screen and (max-width: 480px){
/* for smartphones */
article img, p.intro{
display:none;
}
}
#media screen and (min-width: 481px) and (max-width: 800px){
/* for tablets */
p.full-text{
display:none;
}
}
I think if you can use CSS to manage the different layouts it will be more flexible and easier to update going forward.
Good luck!
EDIT
If you are thinking about ajax to add / remove content based on the visitor's viewport, here are two interesting links:
http://filamentgroup.com/lab/ajax_includes_modular_content/
Project on Github
I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options