We Keep Coding

How Send text to textarea in webbrowser C#

This is the textarea. I want to send value there but. There isnt name or id. I couldnt send value.
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 300px;">
<textarea style="width: 100%; height: 100%; resize: none; outline: currentcolor none medium; text-align: left; -moz-tab-size: 4;" dir="ltr" class="cke_source cke_reset cke_enable_context_menu cke_editable cke_editable_themed cke_contents_rtl" tabindex="0" role="textbox" aria-multiline="true" aria-label="ویرایش‌گر متن غنی, txtPostContent" title="ویرایش‌گر متن غنی, txtPostContent"></textarea>
</div>

you can set the value of textarea inside the WebBrowser component by executing the below code
//get the main div HTML element by ID
var cke1ContentsElements = webBrowser1.Document.GetElementById("cke_1_contents");
//from main div select all HTML elements with the tag name "textarea"
var cke1TextareaList = cke1ContentsElements.GetElementsByTagName("textarea");
//from the selected list of items set value attribute for first element
cke1TextareaList[0].SetAttribute("value", "Send This String To TextArea ");

Inconsistent error message DOM betweeen jQuery validation and Postback

My error message html structure from jQuery validation and from postbacks are different causing my validation errors to display differently. I need the nested span tag within the span.field-validation-error because I use CSS to add the (x) icon before the message like the one you see on the Description error message.
This is the error message from jQuery validation.
<span class="field-validation-error" data-valmsg-for="Code" data-valmsg-replace="true">
<span id="Code-error" class="">The Description field is required.</span>
</span>
notice that on the banner url validation message, there's no span tag within the span.field-validation-error.
<span class="field-validation-error" data-valmsg-for="BannerUrl" data-valmsg-replace="true">
The Banner Image field is required.
</span>
This is the view cshtml file markup I have.
<div class="form-group">
#Html.LabelFor(x => x.Description):
#Html.TextAreaFor(x => x.Description, new { rows = 5, cols = 5, #class = "form-control", placeholder = "Enter your team description" })
#Html.ValidationMessageFor(x => x.Description)
</div>
<div class="form-group">
#Html.LabelFor(x => x.BannerUrl):
<input id="BannerUrl" name="BannerUrl" type="file" class="file-styled">
#Html.ValidationMessageFor(x => x.BannerUrl)
</div>
Why does the error message html from jquery validation different from the error message html that's generated after postback?
EDIT:
Below is the CSS that adds the (X) icon before the error message. What I really want it to do is for the icon to show up in front of the error message that comes from a postback (no nested span) and also the error message from jquery validation (nested span).
.field-validation-error > span:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
min-width: 1em;
display: inline-block;
text-align: center;
font-size: 16px;
vertical-align: middle;
position: relative;
top: -1px;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\ed63";
margin-right: 5px;
}

The jquery.validate.js plugin and the MVC framework are developed by separate teams (jquery.validate is not associated with Microsoft). The MVC framework just uses jquery.validate.js for client side validation (and use jquery.validate.unobtrusive.js to add the rules to jquery.validate.js).
You could create you own HtmlHelper extension to generate the inner <span> element server side. For example, copy the ValidationExtensions.cs source code and modify the private static MvcHtmlString ValidationMessageHelper(...) method so that instead of builder.SetInnerText(validationMessage); you use builder.InnerHtml = xx; where xx is a TagBuilder that builds a <span> containing the error message.
However, it would be easier to just use some javascript to wrap the inner text inside a <span> element when the page is first loaded
// Get all the elements generated by ValidationMessageFor() that have an error
var errors = $('.field-validation-error');
$.each(errors, function (index, item) {
// Wrap the text in a span element
$(this).wrapInner('<span></span>');
})
Note that the jquery.validate plugin also adds an id attribute to the span based on the property name. It does not appear that you need that based on your css, however, if you do want to include that, then you can use
$.each(errors, function (index, item) {
var id = $(this).data('valmsg-for').replace(/[\.\[\]]/g, "_") + '-error';
var span = $('<span></span>').attr('id', id);
$(this).wrapInner(span);
})
Another option would be to wrap each ValidationMessageFor() inside an element, for example
<span class="error">
#Html.ValidationMessageFor(...)
</span>
and modify the css selector
.error > .field-validation-error:before {
font-family: 'icomoon';
....
}

remove border from item checkbox in checkboxlist asp.net [duplicate]

I need to get rid of the borders around the individual checkboxes that are rendered by a CheckBox control. Here's what it looks like now:
The ASP.Net markup is straightforward:
<asp:CheckBoxList ID="cblEthnicity" runat="server" RepeatDirection="Vertical"
RepeatColumns="3" RepeatLayout="Table" BorderStyle="None" BorderWidth="0">
</asp:CheckBoxList>
which is in a cell in a table with the class formTable applied (see below).
As you can see, I've tried setting the attributes BorderStyle="None" and BorderWidth="0" to no effect.
I'm pretty sure that what's behind this is the following CSS, which puts rounded corner borders around the enclosing table cells, which I want to keep:
.formTable
{
background-color: #eeeeee;
border: solid 1px #bbbbbb;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.formTable tr, .formTable tr td, .formTable tr th
{
background-color: #eeeeee;
padding: 3px;
border: solid 1px #bbbbbb;
vertical-align: top;
}
I added the following CSS, which also did nothing:
.formTable tr td input[type="checkbox"]
{
border: none;
}
Finally, the HTML rendered from the .aspx for the CheckBoxList, as seen in Chrome DevTools, looks like this (edited a little for brevity):
<table id="main_cblEthnicity" style="border-width:0px; border-style:None; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<tbody>
<tr>
<td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<input id="main_cblEthnicity_0" type="checkbox" name="ctl00$main$cblEthnicity$0"
checked="checked" value="Native American" />
<label for="main_cblEthnicity_0">Native American</label>
</td>
...
</tr>
</tbody>
</table>
Any suggestions on how I can get rid of the unwanted borders?
UPDATE: Here are some images to make it more clear what's going on and what I'm trying to accomplish:
This is what I'm getting now:
This is what I get if I use either suggestion that has been presented so far:
This is what I'm trying to achieve:
In addition to the suggestions made here, I tried adding this to the CSS, but it made no difference:
.formTable tr td > input[type="checkbox"] {
border: none;
}
I also tried this in Javascript/jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('.formTable tr td > input[type="checkbox"]').removeAttr("border");
});
</script>

The problem isn't the input but in it's td.
Look:
<td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
Here (above) is defined the border radius. And here (below) the border color:
.formTable tr, .formTable tr td, .formTable tr th
{
background-color: #eeeeee;
padding: 3px;
border: solid 1px #bbbbbb;
vertical-align: top;
}
So, to change this, you may want to add just after the above CSS code, this:
.formTable tr td
{
border:0;
}
Doing this, you'll just make the td borders to disappear and not the borders of tr or th
UPDATE AFTER OP's CLARIFICATIONS
Oh, all right. Now with those new screenshots we can see well what you're tryning to do achieve.
Anyway, you're still trying to remove a border from the input, but I repeat, the problem isn't the input but it's td.
I'll explain you with the code you gave us ok? So:
<table id="main_cblEthnicity" style="border-width:0px; border-style:None; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<tbody>
<tr>
<td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<input id="main_cblEthnicity_0" type="checkbox" name="ctl00$main$cblEthnicity$0"
checked="checked" value="Native American" />
<label for="main_cblEthnicity_0">Native American</label>
</td>
...
</tr>
</tbody>
</table>
This is the HTML code of the table that has inside all those checkboxes. All it's TDs have rounded borders and stuff we already know. This table that has inside all those checkboxes is inside a bigger TD (which borders you want to keep) W're in the following situation:
So now you got 2 ways to act without changing all your HTML: CSS or jQuery.
The CSS way
Pretty simple, you may want to put inline style at those table cells (which have checkboxes inside) like this: style="border:0" instead of style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;". Or Just create a new CSS class like this
.no-borders {
border:0;
}
and apply it on every td you don't want to see.
The jQuery way
<script type="text/javascript">
$(document).ready(function() {
$('.formTable input[type="checkbox"]').parent().css('border','none');
});
</script>

Your code isn't showing it, but apparently at some point class .formTable is being assigned to the CheckBoxList. Just remove border: solid 1px #bbbbbb; from the second class declaration:
.formTable tr, .formTable tr td, .formTable tr th
{
background-color: #eeeeee;
padding: 3px;
vertical-align: top;
}
Demo: http://jsfiddle.net/pgpR3/1/

Making a link work with no text in Sitecore

I am having a problem with how to display a link in Sitecore. Currently I have three fields that I use: Name, Title and Link. All three of these fields are within a div tag, so...
<div class="container">
<div class="name"><sc:FieldRenderer ID="ColumnName" FieldName="Name" runat="server" /></div>
<div class="title"><sc:FieldRenderer ID="ColumnTitle" FieldName="Title" runat="server" /></div>
<div class="link"><sc:FieldRenderer ID="ColumnLink" FieldName="Link" runat="server" /></div>
</div>
For regular view, the link tag is being displayed as just text (that is written in Sitecore) but when it switches to mobile view, the container becomes the link with the Name and Title as the only thing showing and taking away what is in the Link field. My problem is how do I make the container the same link as the one that displays as text in desktop view? Is there a way have the text not be displayed and put an overlay container ontop of everything but just have the background as transparency to make the container go to the same link? For the backend, I just used a Listview that contained everything to make the fields show:
protected void Page_Load(object sender, EventArgs e)
{
Item item = this.DataSourceItem;
lvContains.DataSource = ((MultilistField)item.Fields["Columns"]).GetItems();
lvContains.DataBind();
}
protected void lvContains_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
Item item = (Item)e.Item.DataItem;
((FieldRenderer)e.Item.FindControl("ColumnName")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnTitle")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnLink")).Item = item;
}
}

Assuming you are using a responsive design, for the mobile/tablet breakpoints you can add some additional CSS properties to make the link the full height/width of the parent container and hide the text:
.container { border: solid 1px red; position: relative; }
.name { border: solid 1px blue; }
.title { border: solid 1px green; }
.link a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-size: 0;
color: transparent;
}
<div class="container">
<div class="name">Item Name</div>
<div class="title">Item Title</div>
<div class="link">Item Link</div>
</div>
If you are not using a responsive design, and using device detection, then you can add an additional CSS class to the link and modify the css to match:
.link a.mobile {
...
}
And add the CSS Class in code behind:
((FieldRenderer)e.Item.FindControl("ColumnLink")).CssClass = "mobile";

CSS table properties

I am trying to set some styles for objects that are within a table but the problem is that the properties are not being applied to the actual objects.
the .tblData works fine but the label and textbox properties are supposed to be or any ASP.net label or textbox that appears within the table but the CSS doesnt get applied to them.
.tblData {
border: solid;
border-width: 1px;
height: 200px;
color: rgb(45,40,128);
background-color: white;
width: 100%;
border-radius:3px;
margin-top:3px;
}
/*Class for the labels*/
.tblData label {
width: 13%;
color:black;
border-radius:3px;
font-family:verdana;
border-radius:3px;
border-color:rgba(45,40,128,0.75);
border-width:1px;
}
/*Class for the data textboxes*/
.tblData textbox {
border-color: rgba(45,40,128,0.75);
border-width: 1px;
background-color:rgba(45,40,128,0.10);
font-family:Verdana;
border-radius:3px;
}
This is the HTML (can't show all of it because the table is massive):
<table id="tblAddress" class="tblData">
<tr>
<td class="auto-style3">
<asp:Label ID="lblACNO" runat="server" Text="ACNO" CssClass="Datalabelcolumn"></asp:Label></td>
<td class="auto-style2">
<asp:TextBox ID="txtACNO" runat="server" CssClass="autosuggest" Width="20%" ToolTip="This is a test tooltip"></asp:TextBox>
</td>

In ASP.Net, server tag<asp:Label> will be rendered as html <span>.
for <asp:TextBox> it is <input type='text'>
So please change your css selector
from
.tblData label {}
.tblData textbox{}
to
.tblData span{} or .tblData .Datalabelcolumn{}
.tblData input[type="text"]{} or .tblData .autosuggest {}

You are applying different css class to your Lable and TextBox inside your table (i.e Datalabelcolumn and autosuggest). So it will only apply those properties. Remove them and it will work. Or mention whatever style you need in your "Datalabelcolumn" and "autosuggest" css class for those controls.

add class="tblData" to td instead of table
basic demo
<td class="tblData">
<label>this is a label</label>
<textbox>this is textbox</textbox>
</td>