If I do this:
#Html.TextAreaFor(Function(m) m.html, New With {.id = "myTextArea", .name = "myTextArea", .style = "width: 100%; height: 100%"})
I get this result:
<textarea cols="20" id="myTextArea" name="html" rows="2" style="width: 100%; height: 100%"></textarea>
But how can I set the "name" to "myTextAre" instead of "html"?
Thanks all!
Mojo
Nevermind - found out I should use #Html.TextArea instead. :)
Related
I'm trying to add a image from my media picker to my website. It needs to be placede as a inline in my header as a background image. But it won't get on my webpage.
Header code:
<header style="width: 100%; height: 100%; background-image: url('#Umbraco.TypedMedia(Model.Content.GetPropertyValue("backgroundimage"))')"></header>
And yes the Alias is: backgroundimage
How can i make it visual on the website?
Umbraco.TypedMedia(Model.Content.GetPropertyValue("backgroundimage")) will return an IPublishedContent object. You need to render out it's Url property in your in-line code.
Try this:
#{
var backgroundImage = Umbraco.TypedMedia(Model.Content.GetPropertyValue("backgroundimage"))
}
<header style="width: 100%; height: 100%; background-image: url('#backgroundImage.Url')">
</header>
If you want to validate whether you have a valid image or not (i.e. the user has specified one) you could take it a step further and do this:
<header
style="width: 100%; height: 100%; #(backgroundImage == null ? null : "background-image: url('" + backgroundImage.Url + "')"
>
</header>
I have tried every referenced way i can find, and the ONLY thing that worked for me was to put the whole url string plus its quotes into a string variable, and then put that variable in the background-image declaration alone. Anything else stripped my url encoding.
string BkgImage = '"' + mediaItem.Url + '"';
<a href="#post.Url" class="post-news__thumb-bkg" style="background-image: url(#BkgImage)">
<img class="post-news__spacer" src="~/Images/spacer.gif" alt="#alt" />
</a>
With simple_form_for, how should one go about building something like a color selector? Imagine a page where the user can pick a number of colors to work with by checking checkboxes. I would like to present a little box with the color in it and a checkbox next to it so the user can pick the color by checking the check box. Something like this
<input type="checkbox" name="colors[test]"><div style="background-color: red; width: 20px; height: 20px"></div>
<input type="checkbox" name="colors[test]"><div style="background-color: green; width: 20px; height: 20px""></div>
<input type="checkbox" name="colors[test]"><div style="background-color: blue; width: 20px; height: 20px""></div>
You can add the html tags to the collection and define classes for each of them. And then style them accordingly. I am assuming you have a simple_form_for #color or something similar.
<%= f.input :test, :label => 'Choose a Color:', :collection =>{'<div class="red colorbox"></div>'.html_safe => 'red', '<div class="green colorbox"></div>'.html_safe => 'green', '<div class="blue colorbox"></div>'.html_safe => 'blue' }, :as => :check_boxes %>
In your stylesheet:
/* The colorbox will be under a label with collection_check_boxes class.*/
.collection_check_boxes {
width: 30px;
height: 20px;
}
.colorbox {
width: 20px;
height: 20px;
}
.red {background: red;}
.green {background: green;}
.blue {background: blue;}
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
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;"})%>
I have got a category - model which i am using it for my eCommerce system , I have a fixed background image for each category added , What i want to achieve is to programatically add different background image for each category added. Below is the code , currently i am adding images through css.
#using Nop.Web.Models.Catalog;
#if (Model.Count > 0)
{
<div class="home-page-category-grid">
#(Html.DataList<CategoryModel>(Model, 5,
#<div class="item-box">
<div class="category-item"> #*Thats where i am adding background-images in the class category-item*#
<h2 class="title">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name</a>
</h2>
<div class="picture">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
<img style="border-width: 0px;" alt="#item.PictureModel.AlternateText" src="#item.PictureModel.ImageUrl"
title="#item.PictureModel.Title" /></a>
</div>
</div>
</div>
))
</div>
<div class="home-page-category-grid-separator"></div>
}
Css for Category -Item
.home-page-category-grid .category-item
{
text-align: center;
margin: 10px 0px 35px 4px; /*width: 150px;*/
width: 166px;
height: 185px;
background: url('images/picture-bg.png') no-repeat 0 100%;
}
Any suggestions or alternatives will be highly appreciated , i just need to add different background images for each category items , At present the background image is fixed in the category-item class used by datalist.
You can do this if you have the stylesheet definition in your view, not in an css file. Css files are, basicly, static files like html. If you want to get some dynamic things to that you have to do it in server side code. Maybe confusing what i say.. but check my sample and you understand what i mean.... i hope ;)
// Your View
<style>
body
{
background-image: url('#ViewBag.ImagePath');
}
</style>
// your action method
public ActionResult ActionName()
{
ViewBag.ImagePath = "<path to your image">
return View();
}
I would just use multiple CSS classes, one for the general background image styles and then an individual one for each of the categories that just has the specific background-image style set with the correct image reference.
something like this:
#using Nop.Web.Models.Catalog;
#if (Model.Count > 0)
{
<div class="home-page-category-grid">
#(Html.DataList<CategoryModel>(Model, 5,
#<div class="item-box">
<div class="category-item category-#item.Id"> #*Thats where i am adding background-images in the class category-item*#
<h2 class="title">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name</a>
</h2>
<div class="picture">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
<img style="border-width: 0px;" alt="#item.PictureModel.AlternateText" src="#item.PictureModel.ImageUrl"
title="#item.PictureModel.Title" /></a>
</div>
</div>
</div>
))
</div>
<div class="home-page-category-grid-separator"></div>
See how I added category-#item.Id to that same class declaration? You can also use something more semantic like the category name if you've got one, etc. Then you can do this in the CSS:
.home-page-category-grid .category-item
{
text-align: center;
margin: 10px 0px 35px 4px; /*width: 150px;*/
width: 166px;
height: 185px;
}
.home-page-category-grid .category-item .category-1
{
background: url('images/picture-bg-1.png') no-repeat 0 100%;
}
.home-page-category-grid .category-item .category-2
{
background: url('images/picture-bg-2.png') no-repeat 0 100%;
}
There are some other alternatives as well, specifically if you don't know the image url until the loop executes... in which case I would just use a style attribute with a value of background-image:url(#item.BackgroundImage).
Using samandmoore's answer, you can also do this entirely in the View, with the source of the image based on the requested URL (using #Request.RawUrl):
<div class="parallax bg-image-#Request.RawUrl.Replace('/', '-')" >
<section class="page-title">
<div class="container">
<h2>#Html.Raw(ViewBag.Title)</h2>
</div>
</section>
</div>