Here is my code:
<%= Html.TextArea("txtMyTextArea", new { #style = "width: 100%; height:100%", #resize="horizontal" })%>
and it's not working. Why?
This can be accomplished more easily using the max-height attribute and setting it equal to the height. See this jsFiddle example.
You can also set a horizontal-constraint, by adding a max-width attribute. See this jsFiddle example.
I believe in your code this would 'translate' as:
<%= Html.TextArea("txtMyTextArea", new { #style = "width: 200px; height: 200px; max-height: 200px;"})%>
Related
I am using simple form simple_form (v: 3.2.1) with bootstrap in my current rails application( other developer previously worked on this project).
For creating radio button from collection I use
= f.input :default_ship,
label: 'foo)',
collection: default_ship_options(#company),
as: :radio_buttons
That generate html like
<span class="radio radio radio"><label for="foo"><input class="radio_buttons required" required="required" aria-required="true" type="radio" value="company" name="purchasing_source[default_ship]" id="foo"><span></span>Test Shipping Address</label></span>
Look at here an empty span <span></span> is created that actually for showing checkbox.
My CSS code:
.radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label, .checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
label input[type=checkbox], label input[type=radio] {
display: none;
}
label input[type=checkbox] + span, label input[type=radio] + span {
display: inline-block;
width: 1.4em;
height: 1.4em;
margin-right: 0.5em;
vertical-align: middle;
cursor: pointer;
border: 1px solid #AAA;
}
Now My problem is simple form does not create extra span for checkbox element that's why no check box is shown for checkbox. Generated Html for checkbox is
<span class="checkbox"><label for="manufacturer_currencies_fr"><input class="check_boxes optional" type="checkbox" value="fr" name="manufacturer[currencies][]" id="manufacturer_currencies_fr">Euro</label></span>
How can I generate extra span also for checkbox?
(I do not want to change my css because it already used many places)
It's seem to me that I have to do something at simple_form_bootstrap.rb but not sure. It can also be that previous developer may override some method but I have no idea where I can find that.
Here is an example of wrapping check_boxes. They are treated in the same way, so you can use 'options' parameter to pass the necessary data with key "collection_wrapper_tag". You can go into class "form_builder" of simple_form and find it by yourself.
= f.collection_check_boxes :tariffs, #form.tariffs, :first, :last, {checked: #form.selected_tariffs, collection_wrapper_tag: 'span'}
Best solution I found was to overwrite the label_input method on simple form's BooleanInput.
Add the boolean_input file in app/inputs/boolean_input.rb:
class BooleanInput < SimpleForm::Inputs::BooleanInput
def label_input(wrapper_options = nil)
if options[:label] == false || inline_label?
input(wrapper_options)
elsif nested_boolean_style?
html_options = label_html_options.dup
html_options[:class] ||= []
html_options[:class].push(boolean_label_class) if boolean_label_class
merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
build_hidden_field_for_checkbox +
#builder.label(label_target, html_options) {
template.content_tag( :div, class: 'switch-checkbox') {
build_check_box_without_hidden_field(merged_input_options) +
content_tag(:span, '', class:'slider round')
} + label_text
}
else
input(wrapper_options) + label(wrapper_options)
end
end
end
Notice that I only added the sibbling span in case there is a label not inline and with nested_boolean_style? = true.
Most of the code in the method is copy pasted from the original in simple form.
I was trying to implement a 'CheckboxListFor' method but am having some issues with formating in which the text for the checkbox does not align on the side of the checkbox but instead is below the checkbox.
Code in View:
#{
var htmlListInfo = new HtmlListInfo(HtmlTag.table, 4, null,
TextLayout.Default, TemplateIsUsed.No);
}
#Html.CheckBoxListFor(model => model.KeywordIDs,
model => model.Keywords,
model => model.KeywordId,
model => model.Name,
model => model.SelectedKeywords,
htmlListInfo
);
Any insight would be greatly appreciated.
Ok gr8.. Minor change.
Try this code.
have to apply css to fix it.
<style type="text/css">
label
{
display: inline-block !important;
padding: 5px !important;
}
</style>
#{
var htmlListInfo = new HtmlListInfo(HtmlTag.table, 4, null, TextLayout.Default, TemplateIsUsed.No);
#Html.CheckBoxListFor(model => model.PostedCities.CityIDs,
model => model.AvailableCities,
city => city.Id,
city => city.Name,
model => model.SelectedCities,
htmlListInfo)
}
let me know your comments.
I am using MVC c# with Razor 3
I have the following:
<div>
</div>#Html.Label("First")                                                  #Html.Label("Mi")          #Html.Label("Last")
</div>
I am using   to space between my labels. What is a more clean way of doing this.
I tried with SPAN with width but was not successful.
If you have not found an answer by now let me suggest this razor nugget inline style
I use this style only for prototyping but it works great.
#Html.Label("State: ", null, new { style = " margin-left:10px; width: 35px; text-align: right; display: inline-block; font-size: 12px; " })
#Html.TextBox("state", #Model.BUSINESS_STATE, new { style = "width:20px;", maxlength = 2 })
#Html.Label("County: ", null, new { style = " margin-left:10px; width: 45px; text-align: right; display: inline-block; font-size: 12px; " })
#Html.TextBox("county", #Model.BUSINESS_CNTY, new { style = "width:20px;", maxlength = 2 })
you can use
<table>
<tr>
<td width="33%">
#Html.Label("First")
</td>
<td width="33%">
#Html.Label("Mi")
</td>
<td width="33%">
#Html.Label("Last")
</td>
</tr>
</table>
OR ...
<div style="width:300px;float:left;">
#Html.Label("First")
</div>
<div style="width:300px;float:left;">
#Html.Label("Mi")
</div>
<div style="width:300px;float:left;">
#Html.Label("Last")
</div>
Combine the Variables and set the style sheet of that label to use word spacing
ex. word-spacing:30px;
You can add the css attribute as follows
#Html.Label("CompleteName", new {#class='WordSpacer'})
<style>
.WordSpacer {
word-spacing:30px;
}
</style>
Stylesheets
You can use a css grid framework like blueprint css or you can add a margin right to the label:
<label style="margin-right: 50px">First</label><label>Last</label>
Here is a tutorial on using CSS to display a form. http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
<div id="photo_attachment_container">
<%= f.file_field :photo %>
</div>
Currently this just looks like a button, how can I add some css and customise the look (e.g dimensions background etc) of this button? Thanks
The HTML file field has been, and remains, one of the most least customizable of the HTML form controls. The other problem is that it is rendered so differently between browsers and OSes. The best way to style these controls is to render the file control as a transparent element on top of another button or set of elements that is styled the way you want. The file control does not need to be visible to be activated with a user click, but it does need to be on the top most layer (sending it click or focus events doesn't work in my tests).
Here's some example HTML:
<div id="test">
<div class="wrapper">
<input type="file" />
</div>
<button>Select a file</button>
</div>
The CSS renders the wrapper div and button as absolutely positioned elements. The button is visible and styled while the wrapper which contains the file field is transparent. I've set the wrapper field to reduce transparency when you hover over it to illustrate its positioning relative to the styled button underneath.
#test {
position: relative;
}
#test .wrapper {
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
z-index: 2;
}
#test .wrapper:hover {
opacity: 0.5;
}
#test button {
background-color: #ccc;
border: none;
color: #666;
padding: 3px 5px;
border-radius: 5px;
position: relative;
top: 0;
z-index: 1;
}
Example on JS fiddle.
http://jsfiddle.net/JgDuh/
EDIT:
To answer the question you asked in your comment, you would structure the above answer in your Rails view template like this:
<div id="photo_attachment_container">
<div class="wrapper">
<%= f.file_field :photo %>
</div>
</div>
This would render as (Note that I used user as the substitute for whatever model you passed in form_for):
<div id="photo_attachment_container">
<div class="wrapper">
<input type="file" id="user_photo" name="user[photo]" />
</div>
</div>
Interesting situation. I have a Html.Textbox() that I render from a view as follows:
<%= Html.TextBox("title", Model.Title, new { #class = "txt" }) %>
In my controller, I have the following, somewhat simplified, validation on the title. For arguments sake, assume it finds the error, and re-renders the view with the modelstate error information.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditBook(string title) {
Model = new Book(ControllerContext.RequestContext);
if (String.IsNullOrEmpty(title))
{
title = String.Empty;
ModelState.AddModelError("title", "* Title is a required");
modelState.SetModelValue("title", ValueProvider["title"]);
}
else { // show confirmation }
if (!ModelState.IsValid)
{
return View("EditBook", Model);
}
}
When the page is re-rendered, my html text box correctly has the input-validation-error class attached to it... But it's useless as it's the first class attached! I need it to override all existing styles on my text box. The html output is as follows:
<input type="text" name="title" id="title" class="input-validation-error txt"/>
Assume the following css styles have been defined:
input.txt { border: 1px; color: #000 }
.input-validation-error { border: 2px solid #fff }
The problem is, my original css class "txt" takes precedence, and prevents me from being able to style the error text box correctly.
Any thoughts?
This is more a CSS question than ASP.NET MVC specific. You should look at the Cascading order section of the CSS spec.
With that in mind, you can change the precedence of your styles by tweaking it as follows:
input.txt { border: 1px; color: #000 }
input.input-validation-error { border: 2px solid #fff }
With the addition of the input element to the input-validation-error class, the specificity of the two styles would be the same. This will cause the styles' declaration order to be used to determine precedence (in that case the spec says that last one declared wins).
Note the example above is just one way you can control the precedence... there may be a better way, but I'm not a CSS expert. You might get a better/more insightful response if you re-ask as a CSS question with CSS tags.
PS. The order in which the class names are declared on the element is irrelevant when determining precedence.
If you add the !important modifier it should help with this problem.
.input-validation-error { border: 2px solid #fff !important; }
Also, modifying what #DSO said a bit, I'm pretty sure you could also try this:
input.txt { border: 1px; color: #000 }
input.txt.input-validation-error { border: 2px solid #fff }
Like I said, I'm pretty sure you can do that if you have something with two CSS classes.
Instead of relying on the framework to render styles at all, I went with an approach where I could apply my own css classes, while still using much of the Html.ValidationMessage() infrastructure.
Looks something like this:
<% bool emailError = !String.IsNullOrEmpty(Html.ValidationMessage("email")); %>
<div id="EmailMod" class="module <%= emailError ? "error" : String.Empty %>">
<label class="text_right">Email address</label>
<div class="input">
<input type="text" id="Email" name="Email" class="input" tabindex="1" />
<p id="EmailRequired" class="required <%= emailError ? "" : "hide" %>">* Please enter a valid email address.</p>
</div>
</div>