Good day. I am working with vuetify, using the following v-dialog in a component:
<template>
<div>
<!--Indicador-->
<v-dialog class="vdialognew" v-model="mostrarIndicator" persistent>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<cube-shadow class="spinnerRotate"></cube-shadow>
</v-layout>
</v-container>
</v-content>
</v-dialog>
<!-------------->
</div>
</template>
<style scoped>
.vdialognew {
box-shadow: none !important;
max-width: 610px !important;
}
</style>
As you will see in v-dialog I have added the vdialognew class, to apply those new styles, but when loading the content by checking in the browser console, I see that the vdialognew class does not apply to it, only. Similarly, if I use the style property inside the v-dialog tag, it does not work for me. How can I make such a change?
I am doing this modification to eliminate the box that is seen behind the green square:
Thank you very much in advance. Blessings
Passing "class" to the v-dialog won't work.
Use "content-class" instead. In your case
<v-dialog content-class="vdialognew" v-model="mostrarIndicator" persistent>
should work.
Have a look at the v-dialog docs
Use "content-class" is the correct answer as mentioned by #mxmass, but if you're trying to add the class in scoped level, it won't work.
Add the style in the beginning, so let's say if you're using nuxt, create a main styling file such as main.scss, then in nuxt.config.js, add that file in css section. That way, your styling class is available when you're using "content-class". Hope this helps.
you can add multiple names to class
<v-dialog class="vdialognew dialogCss"></v-dialog>
<style>
.dialogCss {
background: #8e5ba6;
}
</style>
I've built a page with a mat-accordion inside of a mat-menu and there's two issues I've been running into.
First, when I first open the menu, all the accordions within it are open, even though the aria-expanded is set to false for all of them. After clicking on the accordion, it then properly opens, and clicking it again moves to closed and proper functionality returns.
The second issue is that if I place all accordions in closed status and then get out of the menu by clicking elsewhere on the page, and then click on the menu again, while the menu opens up with the accordions closed correctly, but when you go to open one of the accordion's it doesn't open the accordion, giving a strange scrollbar next to it. Again, after clicking the accordion a second time, functionality returns to normal.
Here's my menu and accordion:
<button mat-button [matMenuTriggerFor]="menu" class="right-divide">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<mat-accordion displayMode = "flat">
<mat-expansion-panel>
<mat-expansion-panel-header (click)="stopClickPropagate($event)">
<mat-panel-title>
PLANNING
</mat-panel-title>
</mat-expansion-panel-header>
<button mat-menu-item>VIEW GOALS</button>
<button mat-menu-item>EDIT GOALS</button>
<button mat-menu-item>ADD A NEW GOAL</button>
<button mat-menu-item>MAKE SCENARIO DECISIONS</button>
<button mat-menu-item>BUILD OPTIONS</button>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header (click)="stopClickPropagate($event)">
<mat-panel-title>
BUDGET
</mat-panel-title>
</mat-expansion-panel-header>
<button mat-menu-item>BASE</button>
<button mat-menu-item>MODIFICATIONS</button>
<button mat-menu-item>ATTRIBUTES</button>
<button mat-menu-item>WORKFLOW</button>
</mat-expansion-panel>
</mat-accordion>
</mat-menu>
best solution that I found.
<mat-menu #menuRef="matMenuTrigger">
<ng-template matMenuContent>
<mat-accordion *ngIf="menuRef.menuOpen">
....
</mat-accordion>
</ng-template>
</mat-menu>
in case with styles, ng-animate of collapse is broken, bcs height = 0
It`s known issue and it has ugly but working solution. This solution works for me
<mat-expansion-panel #myPanel [class.is-expanded]="myPanel.expanded" [class.is-
collapsed]="!myPanel.expanded">
and in the css:
.is-expanded {
.mat-expansion-panel-content {
visibility: inherit !important; //overwrite the element style
height: inherit !important; //overwrite the element style
}
}
.is-collapsed {
.mat-expansion-panel-content {
overflow: hidden;
height: 0;
visibility: hidden;
}
}
This solution from here
https://github.com/angular/material2/issues/10046
I am working on an application in Ruby. It has 8 pages and on each one of the pages the general layout is bootstrap's .container . row .col-sm-6 .col-sm-6 layout. I have a btn-group in the 2nd col-sm-6 layout that looks great on lg, xl and s devices.
When the screen falls between 992px-768px the button group breaks in an unpleasant fashion
It adjust well when the columns shift one on top of the other on small screens 544px-768px and Breaks bad again on xs devices < 544px
.
I have found a nice solution where I make the btn-group vertical on xs screens by duplicating the code adding the btn-group-vertical to duplicated code and hiding this code until it detects an xs screen (then it hides the horizontal btn-group). However, this is a lot of duplicate code that I have to replicated on 8 pages and still doesn't solve for medium screens.
I thought about keeping my code cleaner by adding scss like this:
.myClass {
#media (max-width: 760px) {
&:extend(.btn-group-vertical all);
}
#media (min-width: 761px) {
&:extend(.btn-group all);
}
}
That I found on stack overflow question 31893581. It doesn't work even with the manipulations that I thought would work. I could follow the solution stated in that same post but I am uncertain how sanitary that would be etc.
If somebody has any advice for me on how to solve for a class that pulls in bootstrap classes at specific browser widths or a completely different solution to my problem, I am all ears.
Thanks in advance.
I can think of a number of ways to do this, here are two methods that are easy to picture:
https://codepen.io/panchroma/pen/XgojBL
Add a clearfix div at the point where you want the buttons to break, then use media queries to hide or show this div.
Another method instead of using a clearfix would be to target .btn-group in your CSS, and using media queries set a max-width at viewports 768 - 992 px.
Good luck!
HTML
<div class="container">
<div class="row">
<div class="col-sm-6">first col</div>
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-primary">btn-1</button>
<button type="button" class="btn btn-primary">btn-2</button>
<div class="cf"></div>
<button type="button" class="btn btn-primary">btn-3</button>
<button type="button" class="btn btn-primary">btn-4</button>
</div>
</div>
</div>
</div>
CSS
.btn-group .cf{
display:none;
}
#media (min-width: 768px) and (max-width: 992px) {
.btn-group .cf{
display:block;
}
}
How can I add md-icon elements next to inputs like in angular material 1 and this screenshot from google contacts:
Google contacts edit form
I know I can use mdPrefix but I like this style better.
Code example:
<md-input-container>
<md-icon mdPrefix>star</md-icon>
<input placeholder="Test" mdInput />
</md-input-container>
The icon inside the input field and I'd like it to be next to it:
Using some css tricks, I was able make something close to the the provided screenshot.
css to position icons:
/deep/ .mat-icon {
color: grey;
width: 24px;
margin: 20px 40px 0 0;
}
html:
<div style="display: flex">
<md-icon >email</md-icon>
<md-input-container >
<input mdInput placeholder="Email">
</md-input-container>
</div>
Code example
I want to create a button which when clicked calls an action. I have used Html.ActionLink to create a link which does exactly that but there is no Html.ActionButton. Is there some other way?
Here is an example using Bootstrap's CSS button and applying it against the link to make it look exactly like the button.
#Html.ActionLink("Select", "Select", new { id = patient.Id }, new { #class = "btn btn-primary", #style = "color:white" })
Is there some other way?
You could use a html <form>:
#using (Html.BeginForm("someAction", "someController"))
{
<button type="submit">OK</button>
}
This seems very simple - am I missing something?
#Html.ActionLink("About", "About","Home", new { #class = "btn btn-success" })
Use this:
#using (Html.BeginForm("yourAction", "yourController"))
{
<input type="submit" value="Some text"/>
}
#using (Html.BeginForm("ActionName", "ControllerName")){
<input type="button" value="Submit" />
}
a[type="button"] {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
text-decoration: none;
}
#Html.ActionLink("ActionName", "ControllerName",null, new {type = "button" })
Sometimes your button might have nested markup (e.g. for an icon)
This might be helpful to some people:
<button type="button" onclick="location.href='#Url.Action("Action", "Controller")'" class="btn btn-success">My button name <i class="glyphicon glyphicon-search"></i></button>
type=button is required to prevent page from submitting... Another possible solution (if you think type=button looks weird because the element is already a button) would be to call event.preventDefault() in the OnClick javascript handler.
<button onclick="event.preventDefault(); location.href='#Url.Action("Action", "Controller")'" class="btn btn-success">My button name <i class="glyphicon glyphicon-search"></i></button>
This should answer your question.
Can I use an asp:Button like an Html.ActionLink?
Uses CSS to make the link look like a button.
Or use the button inside the form with the form controls moving the page along.
You can write a link to controller and view this way / skip the whole razor notation (worked for me recently on my localhost!):
<button type="submit">OK</button>
use FORMACTION
<input type="submit" value="Delete" id="delete" formaction="#Url.Action("Delete", new { id = Model.Id })" />
I know this is an old topic, but this helped me:
#Html.ActionLink("New member", "Create", null, new {#class = "btn btn-default"})
Make sure you use the correct overload or else you will be directed to the wrong controller.
you need to use a "null" before the new {} as shown below:
#Html.ActionLink("About", "Action Name","Controller Name",null, new { #class = "btn btn-success" })
Notice the null above. This is important!!!
For those of you trying to make an anchor tag look like a button in Bootstrap v3 (maybe v4, too), beware that there are some subtle styling differences regarding margin that bootstrap targets to the Input element and not the A element. This can be a little frustrating when trying to put several buttons next to each other.
There's a rather obvious reason why MVC doesn't have a ButtonLink helper: Think about it. Buttons do not link to anything. They run code. So what code would the helper render? I mean it seems simple that it could just render something like onclick="window.location=/controller/method..." but, is that really what you want? Is it what everyone always wants? Isn't that really just doing a GET? It gets kind of goofy.
So, really, if you want a button that opens a link the easiest way is to do what everyone else suggested and style an A tag to look like a button but then probably go into your stylesheet and do a very specific target of your button anchors to get the same styling as actual buttons. Or use an Input tag and force Razor (or whatever) to render the link inline with your JavaScript.