We Keep Coding

How to remove enter in css

I'm working on something but i'd like to know how to stop text from auto entering.
I don't use a break there so I don't really know what the problem is. I used something from overstack to show a div when you hover on it. Maybe this need's to be centered because the div wouldn't have the right position. I don't really know I'm pretty new to CSS.
My code looks like this:
C#
public string ToonGrenzenPerZoekwoord(string zoekwoord)
{
string list = "";/*"<h1> Resultaten via grenzen </h1> <br>";*/
foreach (DataTable table in _persistcode.SearchGrenzenByKeyword("%" + zoekwoord + "%").Tables)
{
foreach (DataRow row in table.Rows)
{
list += "<span class='t1'>" + row["Grens"].ToString() + ": <br>" + "</span>" + "<span class='t2'>" + row["Sanctie"].ToString() + "<br> <br>" + "Dit hoort thuis in de categorie: " + row["IDCategorieën"].ToString() + "</span>" + "<br>";
}
}
return list;
}
HTML & CSS
.infospan{
background: none repeat scroll 0 0 #F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
display:none;
padding:0 20px;
}
.infospan::after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
p{
cursor:pointer;
}
p:hover span{
display:block;
}
<!--Resultaat-->
<div id="resultaat" runat="server" style="text-align: center; color: white; font-size: 24px;"></div>

I don't know about the css trick but i think this simple javascript code will help you :
$('your_class').bind('keypress', function(e){
if(e.keyCode == 13){
return false;
}
});

If you mean white space beneath your list items you should be careful with the <br>'s
Although I don't support the use of <br> in general, (see Is it sometimes bad to use <BR />?) you might want to try this:
public string ToonGrenzenPerZoekwoord(string zoekwoord)
{
string list = "";/*"<h1> Resultaten via grenzen </h1> <br>";*/
foreach (DataTable table in _persistcode.SearchGrenzenByKeyword("%" + zoekwoord + "%").Tables)
{
foreach (DataRow row in table.Rows)
{
list += "<p class='t1'>"; //using paragraph
list += row["Grens"].ToString();
list += ": <br>" + "</span>" + "<span class='t2'>";
list += row["Sanctie"].ToString() + "<br> <br>";
list += "Dit hoort thuis in de categorie: ";
list += row["IDCategorieën"].ToString();
list += "</p>"; //ommited final <br>
}
}
return list;
}
It might be even better to rule out all br's, but I'll need to be sure what your exact question is.
Side note: please be advised if somehow in your data, e.g.: row["Sanctie"] a value of
<script>alert('turtle`);</script>
is present, you'll find yourself having a hard time to 'shoo it away'.

I want to get the ID of label using C# which is being created by jQuery on RunTime

First I will explain my scenario.
I have asp.net menu (dynamically created menu) and now I want to place push notification just like Facebook on my each menu option. I have designed it using CSS and put a label using jQuery.
if (res == "MenuIcons") {
$(this.parentElement).addClass('Notification');
var $label = $("<label ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
$(this.parentElement.parentElement).append($label);
i++;
}
But I am totally confused that how to handle it using C# because I am unable to get the ID of the label created on run-time.
If you didn't understand please let me know and I will explain it more.

why don't you set a data attribute to each label, something like
var $label = $("<label data-element-type='notification' ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
and then you can retrieve the whole collection with jQuery:
$("[data-element-type='notification']").each(function(){...});

Try adding runat="server" attribute in your label tag. You label tag id won't be available until runtime. So what you can do is search for the controllers by the id of your label. In code behind you can do as following
foreach(Contol c in this.Controls)
{
if(c.ID.contains("notificationlbl")
{
//your code
}
}

Unable to find Rad Treeview using $find

Here i have use below code for Telerik Rad Tree.Unable to catch the RadTreeView1 ,thisone working without any issue in my localhost but when i put a debugger to there then it shows me the null.
<div style="border: 1px solid #25A0DA; margin: 5px; padding: 5px; min-height: 400px; min-width: 200px;">
<telerik:RadTreeView ID="RadTreeView1" OnClientNodeClicked="ClientNodeClicked"
OnClientNodeCollapsed="ClientNodeCollapsedHandler"
Font-Size="Small" Skin="Metro" runat="server">
<ExpandAnimation Type="none"></ExpandAnimation>
<CollapseAnimation Type="none"></CollapseAnimation>
<WebServiceSettings Path="~/DesktopModules/hh/hc.asmx" Method="GetChildNodes">
</WebServiceSettings>
</telerik:RadTreeView>
</div>
Here is the function
function LoadRootNodes() {
var treeView = $find('<%=RadTreeView1.ClientID%>'); <-- pass null here
//Some codes here
}
In here unable to find a RAD Treeview1 from $find.

Try this,
treeview.OnClientLoad = "LoadRootNodes";
Javascript file
function LoadRootNodes(sender, args) {
var treeview=sender;
}

Dynamically find the position of a button is asp.net?

i have written one javascript function to retrieve the position of a button and assigned it to asp:updateprogress but i want to apply the button's position to div element in the code or a label control within the updateprogress not to update progress.
<asp:UpdateProgress ID="UpdateProgress2"
runat="server"
AssociatedUpdatePanelID="SendMailUpdatePanel"
DisplayAfter="0">
<ProgressTemplate>
<div id="blur" style="top: 0px; left: 0px; width: 99%; height: 5000px; position: absolute;background-color: white; z-index: 999; filter: alpha(opacity=50); opacity: 0.5;-moz-opacity: 0.85; padding-top: 25%; padding-left: 30%;" />
<div id="progress" style="text-align: center; width: 444px; border: 1px solid black;padding: 10px; background-color: #eee; z-index: 998; filter: alpha(opacity=500);-moz-opacity: 1.00;">
<b>Mail is being Sent! Please Wait...</b>
<br />
<asp:Image ID="LoadImage"
runat="server"
ImageUrl="~/Images/spinner.gif" />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
My javascript function is:
function getPosition(btnSendResume, progress)
{
var btnSendRe = document.getElementById(btnSendResume);
var divp = document.getElementById(progress);
divp.style.display="block";
divp.style.left=btnSendRe.offsetLeft;
divp.style.top=btnSendRe.offsetTop + btnSendRe.offsetHeight - 40;
}
I have written following under button click:
btnSendResume.Attributes.Add("onclick", "getPosition('" + btnSendResume.ClientID + "','" + UpdateProgress2.FindControl(progress).ClientID + "');");
But it is giving error that progress doesn't exist under the current context.

Your <div id="progress" is a normal HTML element, not a server-side control.
You should just write document.getElementById("progress").

You can do this by Jquery.
A simple offset() will return left and top position of a control.
function getPosition(btnSendResume, progress)
{
var btnSendReOffset = $('#btnSendResume').offset();
var btnSendRe = $('#btnSendResume');
var divp = document.getElementById(progress);
divp.style.display="block";
divp.style.left=btnSendReOffset.left;
divp.style.top=btnSendReOffset.top+ btnSendRe.height() - 40;
}
You can add a click event to your button on window load and trigger your function.

Expanding gridview's row

One of gridview's column is a "Content" column that can have few lines of text (it can be literal, textbox or label ).
In "default" mode i want it to show only the first line and a link button: "(more)" or "(read)".
Clicking on this link should expand the column and display full content.
What is the best way to do this?

Selecting first 10 characters of content text and using it as your link's text is better aproach. This will reduce size of data that retrieved from database like that :
SELECT ContentId, SUBSTRING(Content, 0, 10) AS Content
FROM ContentTable;
Then you can use template column for this column that includes a label and a link. Lbel for the description text, link for the details.
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label
Text='<%# Eval("Content") %>'
runat="server"/>
<a href='<%# Eval("ContentId", "contentdetails.aspx?id={0}") %>'>More</a>
</ItemTemplate>
</asp:TemplateColumn>

This will help you.
http://www.asp.net/community/control-gallery/Item.aspx?i=1465

try this. http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx

Use the power of CSS!
Place this inside your gridview row. It will naturally push out the row to the height of your content, or the amount of rows required.
<div class="toggle">
<div class="toggle-header">
Toggle!
</div>
<div class="toggle-height">
<div class="toggle-transform">
<p>2nd line of text</p>
<p>3rd line</p>
<p>4th line</p>
<p>etc</p>
</div>
</div>
</div>
And use this CSS...
body {
font-family: sans-serif;
}
.toggle {
position: relative;
border: 2px solid #333;
border-radius: 3px;
margin: 5px;
width: 200px;
}
.toggle-header {
margin: 0;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
cursor: pointer;
}
.toggle-height {
background-color: tomato;
overflow: hidden;
transition: max-height .6s ease;
max-height: 0;
}
.toggle:hover .toggle-height {
max-height: 1000px;
}
.toggle-transform {
padding: 5px;
color: white;
transition: transform .4s ease;
transform: translateY(-100%);
}
.toggle:hover .toggle-transform {
transform: translateY(0);
}
You may want to disguise the "toggle" with a textbox of your "(more)" line to expand the rest.
Let us know if it worked.