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.
Related
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.
I'm trying to implement ng2-completer component in my Angular2 application.
The conponent works properly but the style of the search textbox is flat...
I want to have the same style of bootstrap components, like textbox for example.
This is the code:
<ng2-completer [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
This is the rendered control:
As you can see, the list of color is ok but the input where the user write the value to search is completely flat...
How can I move to fix the problem ?
Basically I just want to set it like the field "Titolo" on the right.
Thanks
Just add [inputClass]="['form-control']" in the selector.
For example:
<ng2-completer [inputClass]="['form-control']" [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
Note: form-control is here a class of Bootstrap
put class="form-control" to your textbox ,(class)="form-control" in your case i guess
I have a layout template with a view set like this:
layout
header
container
h2.page-title
content-box
yield
sidebar
and
view
section-title
content
What I'm trying to do is have the page title render in my layout. I'm doing this for stylistic reasons.
I could put the view specific title in the view file, then use CSS to offset it -100px or something. Can I pass a variable from the view to the layout?
What you are trying to achieve is usually done with the content_for helper. See here
It actually uses the title in the example, so you could just copy paste.
Edit: Sorry, I mixed the HTML page's title with the page's title you want, as you pointed out, so the example is not good for you without changing it. But it seems the guide helped you to figure out what you need.
If anyone has this issue, like #Rails Fan said, I used a content_for helper (not quite what was linked to though, which is why I have my own answer).
My layout view:
header
container
<%= yield :custom_section %>
content-box
yield
sidebar
My view:
<% if content_for :custom_section %>
<h1>Page Title</h1>
<% end %>
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')
when I use the asp:Menu the popoutimage is by default enable, I know I can disable it, but I kind of like it. The thing is I modified my background & foreground of the menu and so the popoutimage arrow is blended in the background. Is there a way to change the settings of this? And how should I go about?
Is there maybe a CSS tag I could use for this?
Thx
EDIT:
the markup language is shown as this:
<td style="white-space:nowrap;"><a class="ctl00_TopNavigation_1 TopNavItem ctl00_TopNavigation_3" href="javascript:__doPostBack('ctl00$TopNavigation','Material')" style="border-style:none;font-size:1em;">Material</a></td><td style="width:0;"><img src="/ASP%20Test%20WebApp/WebResource.axd?d=nNpXA-tgytzmQJwzxJnoSKNU-6BcLlO3wOo_dawXyOs1&t=634050991608503994" alt="Material uitvouwen" style="border-style:none;vertical-align:middle;" /></td>
So I have no idea :s
You the the code-behind, you can do something like:
MenuObject.StaticPopOutImageUrl = "/path/to/your/image";
or, if you don't care to have an image you can do:
MenuObject.StaticPopOutImageUrl = "about:blank";
edit - even better:
MenuObject.staticEnableDefaultPopOutImage= False
Try viewing the source of the rendered page.
Find the menu in the source.
See if you can see the mark-up that displays the poputimage.
If you cant see the mark-up see if there is a css class on the parent element.