The markup below is what I have right now. I am writing an MVC application.
I found advise on this site that lead me to insert the width and height, however that did not answer my problem.
When I am entering text that is longer that 500px I want it to wrap, currently it is all staying on a single line and obviously, the complete text is not visible.
Can anyone help?
Thanks
Describe your Special:
<%= Html.TextBox("ShortDescription", Model.Special.ShortDescription, new { #style = "width: 500px; height:60px;background-color:#f1f2f3" })%>
The Html.TextBox helper generates an <input type="text" ... and text inside this type of inputs doesn't wrap. You should consider using a <textarea>. You could use the Html.TextAreaFor helper (not Html.TextArea because you already have a model, so make profit from it):
<%= Html.TextAreaFor(x => x.Special.ShortDescription, 10, 20,
new { #style = "background-color: #f1f2f3" }) %>
You should be able to use a TextArea as such:
<%= Html.TextArea("ShortDescription", Model.Special.ShortDescription) %>
or for your case explicitly :
<%= Html.TextArea("ShortDescription", Model.Special.ShortDescription,
new { #style = "width: 500px; height:60px;background-color:#f1f2f3" })%>
Related
I have the following code inside index.eco
<% for drawing, index in #drawings: %>
<li class="span4 well">
<div style="margin-bottom: 10px;">
<h3 style="margin-top: 0;"><%=drawing.name%></h3>
</div>
<div>
<a href="#/drawings/<%=drawing.id%>">
<img src="<%=drawing.cache%>" style="background-color: white; border: 1px solid #ddd">
</a>
</div>
<div style="margin-top: 10px; text-align: right;">
<button class="btn btn-danger delete" data-id="<%=drawing.id%>" style="display:inline;">Delete</button>
</div>
</li>
<% if (index + 2) % 3 is 0: %>
This code is working fine, although I now want to have it executed, each time an event is triggered. I found how I can listen for events using this:
<% Spine.Model.bind('Model:fileLoad',(map) => console.log("triggered")) %>
Although I cannot find how I can apply the same method, in order to execute the first snippet when the event is fired. I tried adding a function signature on top of snippet and then inline it, as well as some other approaches but none is working. The complete index file can be found here, although I guess that is not relevant. Any comments are welcome.
What this code does is populate the interface based on existing drawings. Although drawings only become available few seconds after the page has finished loading, so I want to execute this code once I make sure that the Models are available.
Update
I have added a function definition, although I am not sure if its correct. 'trig' is printed on event, although the view does not change.
<% #fetchModels= -> : %>
<% console.log("trig") %>
<% for drawing, index in #drawings: %>
. . .
<% end %>
<% Spine.Model.bind('Model:fileLoad',#fetchModels) %>
THe changes had to be done in the Controller rendering the index.eco file. From there I had to bind to an event, and when that event is fired call #render function.
I am new to ruby and watir-webdriver. I am trying to learn how to test tinymce from the website http://www.tinymce.com/tryit/full.php. I can click the buttons such as "Bold" but I cannot figure out if there is a way to select/highlight text in the textarea to test the "Bold" button. I can find the text "Feel free" in the textarea but I am not sure how to select the text. I have noticed that the other posts mention that Tinymce is in frames but it does not appeart to be in a frame on the current page.
Here is what the section looks like (edited form)
<textarea id="content" style="width: 100%; height: 550px; display: none;" name="content" cols="20" rows="20" aria-hidden="true">
<p>Feel free to try out the different features ...</p>
</textarea>
require 'watir-webdriver'
b = Watir::Browser.new :firefox
b.goto "http://www.tinymce.com/tryit/full.php"
b.div(:id => 'main').wait_until_present
b.textarea(:value => /Feel free/).exists? #this evaluates to "true"
Where I need to select the text
b.a(:title => 'Bold (Ctrl+B)').hover
b.a(:title => 'Bold (Ctrl+B)').click
Yes, the editor is in a frame. This selects to from Welcome to the TinyMCE editor demo!:
require "watir-webdriver"
browser = Watir::Browser.new :firefox
browser.goto "http://www.tinymce.com/tryit/full.php"
require "watir-webdriver/extensions/select_text"
browser.frame(id:"content_ifr").h1.select_text "to"
Given a series of a form's Label and Input elements like:
<div class="labelEditwrap">
<div class="editor-label">
<label for="Address">Address</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Address" name="Address" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Address"></span>
</div>
</div>
I'm trying to select the outer most div when the textbox gets focus so I can highlight both label and input:
$("input").focus(function () {
$(this).parent().parent().addClass("curFocus")
});
I've tried a few combinations including:
$(this).parent().parent() // seems the most obvious
$(this).parent().parents("div:first")
Another question here asking about .parent().parent() was solved by finding a syntax error unrelated to the selector. However, in this case, I can see my hightlighter class if I go up only one parent level (only highlights the editor's div) and also if I climb 3 levels (highlights the container holding the full form).
thx
OK....its not the selector. All the suggested alternates (and the original) are correctly 'selecting' the outside wrapper div. The problem was the CSS and how Floats are being applied to the Label and Editor divs. This CSS will produce correct highlighting and also let the label/editor fields align themselves correctly. [whew]
Up to you guys the best way to close/edit/retitle the question in hopes of helping other avoid my 4 hour toubleshooting ordeal.
-highly appreciate the time taken-
Possible Solutions:-
$('.text-box').live('focus', function(){
$(this).parent().parent().css('border', '1px solid red');
});
$('.text-box').live('blur', function(){
$(this).parent().parent().css('border', 'none');
});
or
$('.text-box').bind('focus', function(){
$(this).parent().parent().css('border', '1px solid red');
});
$('.text-box').bind('blur', function(){
$(this).parent().parent().css('border', 'none');
});
The solution you suggested should work correctly
$(this).parent().parent();
I think the issue here is that your event is being bound before there is an object to bind it to. Have you bound your function on document ready?
Something like:
$(function(){
$("input").focus(function () {
$(this).parent().parent().addClass("curFocus")
});
});
Otherwise using 'live' or 'on' to bind the event will work dynamically.
so like:
$('input').live('focus', function(){
$(this).parent().parent().addClass("curFocus");
});
I'm doing a site (asp.net mvc2) that should work in IE6 as well.
On a page I inject a control as partial view.
<div id="LocationContainer">
<% Html.RenderPartial("../Shared/EditTemplates/ContactInfoTemplate",
new ContextAwareViewModel<ContactInfoViewModel>()
{
ProcessStep = ProcessStep.Configure,
Model = Model.ContactPerson
}); %>
</div>
It contains following snippet of code:
<div style="margin-bottom: 10px;">
<%= Html.CheckBox(Model.Model.ContactType + ".IsDTBranch",
Model.Model.PersonViewModel.IsTDBranch,
new { #class = "tdBranchChkBox"}) %>
<%= Html.Resource("Resources, ThisIsTDBranchLabel") %>
</div>
That gives in the end this html:
<div style="margin-bottom: 10px;">
<input class="tdBranchChkBox" id="EventContact_IsDTBranch"
name="EventContact.IsDTBranch" type="checkbox" value="true" />
Il s'agit d'une succursale de la TD
</div>
After all of this IE6 doesn't render text. But text is there and appears when I start to select area where it should be.
Does anybody know how it can be cured?
Thanks.
Long story short:
In this case, a height correction seems to have done the trick. The Holly Hack involved adding the following code to the CSS file:
/* Hides from IE5-mac */
div#content
{
height: 1%;
}
/* End hide from IE5-mac / /— Holly Hack for IE 6 Peekaboo bug —*/
The explanation for this code can be found on the John and Holly website.
Taken from here http://www.bpwrap.com/2005/08/the-internet-explorer-6-peekaboo-bug/
Thanks a lot author.
I have the code (snippet):
The Model is the IEnumerable object of the Person's class:
<% foreach (var item in Model)
{ %>
<tr>
<td><%= Html.DisplayFor(x=>item.Name) %></td>
</tr>
<% } %>
it renders only labels like that:
<td>Tommy</td>
According to the link it should be rendering a HTML markup something like:
but there is no the ID and the NAME property. Why ?
Your using the wrong template your should be using Html.EditorFor(x => x.Name)
Edit: I said you were using the wrong template because in your image it is a textbox displayed, not a label...
the default ouptut of Displayfor is
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= Html.Encode(ViewData.TemplateInfo.FormattedModelValue) %>
according to Brad Wilson. You could easily build your own, look the other post of Brad Wilson for examples.
Or you could simply call Html.LabelFor(x => x.Name)
If you always want that, add a template, name String.ascx in your Views/Share/DisplayTemplate and just put the following in :
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= Html.Label("", ViewData.TemplateInfo.FormattedModelValue) %>