I am using the MatBlazor component library: https://www.matblazor.com/
and I am trying to understand how the designer for this website: https://blazor-wasm.quarella.net/Account/Login
centered the <MatCard/> element like so:
My following code looks like this:
#page "/login"
#using System.Text.Json;
#using Data.Models
#using MatBlazor
#inject HttpClient Http
<MatCard >
<MatCardContent >
<MatH2>Login</MatH2>
<button #onclick="OnLoginClick">Log in</button>
<p>Need an account? Sign up</p>
<button #onclick="OnSignUp">Sign up</button>
</MatCardContent>
</MatCard>
#code {
}
which outputs:
The example code provided here: Login Razor Page, specifically line 27 {<MatCard> doesn't have any classes but the element is centered nicely across the screen.
Two questions
How do I achieve this card centering effect using the MatBlazor library (minimal custom css)?
How the login page designer center it? I see there was a ".login-container" class added which is here but there's no indication of it being used in the razor page.
EDIT:
Where did the designer use class="login-body" or class="login-container" based on the answer below
As you mention, if you inspect the element of the login page, you can see that the MatCard is using the class login-container which applies a margin auto to the left and right side of the element. That's what is causing it to be centered.
Most likely, per the stylesheet you referenced, the wrapping elements on the login page reference the CSS located here. It's called .login-body and just like in item 1 above, it is using a margin of auto to center horizontally.
The login-body and login-container classes are applied to the pages by either the Shared/Components or the Shared/Layouts. For example, the Login page you reference in your question appears to be using the LoginLayout.razor here. There you can see that both of these classes are being used.
Related
How do I get rid of the bullets for each model error. Is there a style property? I don't see one in intellisence.
The validation summary helper will render each error message as a list item inside a ul. You can always customize it using your own CSS.
<form asp-action="Index">
<div asp-validation-summary="All" id="myCustomSummary"></div>
<!-- your form elements goes here-->
<button id="btnadd">Save</button>
</form>
Here, I gave an Id attribute to the div so that I can selectively override the ul list items inside that div.
To remove the bullet from each list item, you can set the list-style-type to none in your stylesheet:
#myCustomSummary ul li {
list-style-type: none;
}
The nice thing about the Tag Helpers is that they pass all non-ASP attributes directly to the rendered HTML tag without any processing. So normally, you can simply add the class list-unstyled to the class attribute if you're using Bootstrap, or add the relevant CSS to the style attribute if you're not using Bootstrap. No custom ASP attributes are required.
However, the problem with the validation summary Tag Helper is that it renders the <ul> tag inside a <div> tag, so your class or style will be applied to the <div> which is not very useful. I don't know the reason behind their decision to create the validation summary Tag Helper on a seemingly useless <div> tag instead of directly on the <ul> tag, which would've been much easier to directly style and manipulate as I mentioned above (which is the case for all other tag helpers), but having it done this way leaves us no choice but using CSS in <style> tags or style sheets.
The other answer by Shyju is fine if you want to target a specific validation summary. However, you most likely want to target all validation summaries in the same way, in which case you're better of using a class instead of ID.
If you view the source code, you will notice that the validation summary renders HTML similar to this:
<div class="validation-summary-errors">
<ul>
<li>The First Name field is required.</li>
<li>The Last Name field is required.</li>
<li>The Date Of Birth field is required.</li>
</ul>
</div>
So you can simply target the validation-summary-errors class like this:
.validation-summary-errors ul {
padding-left: 0;
list-style: none;
}
This code is a copy of the Bootstrap class list-unstyled, which completely removes all list styling. If you prefer to keep the padding, then delete the first line.
Now, if you want to target all validation summaries on a specific page, then add the above CSS to that page, and if you want to target all validation summaries on all page of your website, then add the above CSS to you website's style sheet.
The CSS centering works on this page: http://www.paragondictionary.info/A.html
But not on this page: http://www.paragondictionary.info/C.html
Both HTML pages are using the same CSS link so I don't know why the centering is not working on one page. Any help is appreciated.
The reason it's not working on the second one is because you forgot to add the
<div class="center">
</div>
that surrounds the definition list in the body
If you look at the first page in view source, you can see on line 20 there's a class called
.center
That is used to presumably, center the content.
you have forgotten to use {div class="center"} in the second page.
I am using simple form and bootstrap with my rails 4 app.
I'm becoming so frustrated with this that I just can't figure out something that should be 'simple'.
I am trying to make my radio buttons display:block. Instead, the text is all inline and squished up on top of each other because the container is too narrow to fit it all in on one line.
My form element is:
<%= f.collection_radio_buttons :public, [[true, 'Yes, anyone can view this project'] ,[false, 'No, I would like to invite specific recipients']], :first, :last, {style:'display:block', class: "response-project"} %>
I have also tried:
Neither of these work to disable the formatting that either Simple Form or Bootstrap is imposing. I have other form elements that are radio buttons that I want to remain display:inline. I can see from my google inspect element, that there is a label.collection_radio_buttons tag on the form element. I didn't create that and I can't find it anywhere in the css files. it might be an import from bootstrap or a part of the simple form styling but I don't know how to disarm it from my form element.
Can anyone help?
Thank you
If you want your CSS to work you have to user input_html or label_html.
So it would be something like this:
<%= f.collection_radio_buttons :public, [[true, 'Yes, anyone can view this project'] ,[false, 'No, I would like to invite specific recipients']], :first, :last, :input_html => {style:'display:block', class: "response-project"} %>
*label_html is to affect only the label div
Anyway you should read the doc https://github.com/plataformatec/simple_form under the 'Usage' section. Hope this helps.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
I'm using html5, JQuery Mobile and KnockoutJS, I Have a foreach template that renders a grid like GUI from an observable array.
However, when I add items to the bound array, the styles are not applied to any new items.
They appear unstyled, most of the times.
some times they appear with style, but once the styling fails, it stays broken for as long as I run my app.
Does anyone have any idea how to resolve this problem?
Snippet:
<div id="timeEntryList" data-bind="foreach: timeEntries">
<div data-role="header" data-theme="c">
<h1>some header</h1>
The odd thing is that it works sometimes.
Hard to guess without any code. But I guess you 're saying jqm doesn't render properly after dynamically adding elements. That's right it doesn't. I guess it's like the list. And you probably can do something like $('#mylist').listview('refresh'); but I don't know what sort of component you're talking about.
you can find more info in the documentation
jQM might not support more than one data-role="header" section. I would try conforming to their standard page layout with one header, one content and one footer section and see if that helps.
I've found that if I update my KO observables in pagebeforeshow I don't have to use .listview('refresh')