I'm trying to add a databound text box in a GridView row:
<ItemTemplate >
<asp:TextBox ID="TextBox" runat="server" Visible="true" Enabled="true"
Wrap="true" text='<%#Eval("Notes")%>' TextMode="MultiLine" >
</asp:TextBox>
</ItemTemplate>
I can't figure out how to make the textbox autosize to the height of the GridView row
If you want to know the height of a content in a multiline textbox you can you a simple formula depend on the font size of the textbox.
enter code hereExample (the number are not real).
If a line of 80 characters consume 400px in width and 20px in height, a line of 160 characters consume always 400px in width but 40px in height.
So, in the Height attribute of the TextBox you can write
Height='<% (Eval("Comments").Length / 80) * 20 %>'
<asp:TextBox TextMode="multiLine" Width="400" Text='<%#Eval("field_name") %>'
Height='<%# Eval("field_name").ToString().Length*2%>' `enter code here`
ID="TextBox1" runat="server"></asp:TextBox>
You Can do by java script too
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Automatic Resize TextBox</title>
<script type="text/javascript">
function setHeight(txtdesc) {
txtdesc.style.height = txtdesc.scrollHeight + "px";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtDesc" runat= "server" TextMode="MultiLine" onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
</form>
</body>
</html>
Related
I have Panel that needs to have a button beside it but have been unsuccessful in formatting it. Currently this is what I have.
<asp:Panel runat="server" CssClass="form" ID="panSomeParameters"></asp:Panel>
<asp:Button runat="server" CssClass="form" ID="btnSomeButton" Text="Button" />
Basically I need the Button in the blue area.
You just need to set your Panel display to "inline-block" as panel is rendered as Div and div is a block element so it will cover the whole row. I have set width and height also so panel will contain space on the view.
<asp:Panel runat="server" style="display:inline-block;width:100px;height:20px;" CssClass="form" ID="panSomeParameters"></asp:Panel>
<asp:Button runat="server" CssClass="form" ID="btnSomeButton" Text="Button" />
If it helps then accept the Answer.
You could give them both a class and set the float to left.
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="float-left">
Contents
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="float-left" />
</div>
<style>
.float-left {
float: left;
}
</style>
I am Working With ASP VB.net in that I have A checkBox ,I want to change the Size Of that checkbox I added css to change but its not working the outer portion only get changing the rectangle remains same . can somebody help me ?
<asp:CheckBox ID="chkDate" width="83pt" runat="server" Height="20px"
style="text-align: right; font-size:small"
BorderStyle="None" autosize="false" size="250px" EnableViewState="False" />
Use CSS
<style type="text/css">
.BigCheckBox input {width:20px; height:20px;}
</style>
In asp.net,
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="BigCheckBox" />
I have a gridview and i want to preserve its width no matter what data it is displaying. For example, if there is a word with the length of 900 (Eg. abbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb) I want gridview to display in a new line instead of widening its width (girdview width is 700). For instance, like stackoverfolw, it is displaying my example word very well. This textbox has not widen than it should, hasn't ?
My current code can't do the job. Thanks. Any help?
My code.
<asp:GridView ID="gv" runat="server" CssClass="gv" AutoGenerateColumns="False" Width="700px">
<Columns>
<asp:BoundField DataField="" HeaderText=""
dataformatstring="{0:dd-MM-yyyy}" HtmlEncode="false" SortExpression="" >
<ControlStyle Width="100" />
<HeaderStyle Width="100" />
<ItemStyle Width="100" />
</asp:BoundField>
.gv th
{
width: 100px;
}
This works for me
.my-text
{
float:left;
overflow-y:auto;
overflow-x:auto;
word-break:break-all;
}
Inside your template field
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" CssClass="my-text"
Text='<%# Bind("YourColumnName")'
></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Give width of div containing grid in pixels instead of percentage
<div id="divGrid" style='position:absolute; width:800px;'>
<!-- your grid here -->
</div>
Also, You can take width of screen in pixel and calculate the pixel in percentage. suppose width of screen is 1000 pixel is return by screen.width then you 90% will be 900px.
In javascript :
<script language="javascript" type="text/javascript">
document.getElementById('divGrid').style.width = screen.width + "px";
</script>
?
Need fixed Header Row from Vertical Scroll bar, because my GridView is very large.
Making 2 panels was my the best try (but also won't works) :
added :
<asp:Panel style="width:720px;" runat="server" ScrollBars="Horizontal">
<asp:GridView ID="GV3" runat="server" />
<br />
<asp:Label ID="justfortest" Text="11111" runat="server" />
<hr />
<asp:Panel style="max-height:400px;border-style: outset; border-width: 4px; "
ID=HGix runat="server" ScrollBars="Vertical">
<asp:GridView ID="GridView2" runat="server" CellPadding="4"
.........................
</asp:GridView>
</asp:Panel>
</asp:Panel>
why the horizontal line adds to second panel, it's ScrollBars="Vertical" but works as Both
Implementing a Fixed GridView Header in ASP.NET (Uses Panels)
Using jQuery
Stackoverflow
Freezing gridview header in a fixed width div
Table - fixed header, scrollable body, most robust/simple solution?
I have a Repeater control used to display uploaded images.
How can I show the images in the repeater horizontally? How can i give the caption to the bottom of picture in this?
assuming you have some code like this:
<asp:repeater ...>
</asp:repeater>
just inject "<itemtemplate>" with some html code with the look and feel you want to. nothing special about showing horizontal or vertical it just depends on what html tags you use inside item templates.
If you don't especially need a Repeater to do this, you can use a DataList instead and set the RepeatDirection="Horizontal"
how to display horizontal line after each row
<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal" onitemdatabound="dlstmovie_ItemDataBound" >
<ItemTemplate>
<asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'>
<img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" />
</asp:LinkButton>
<br />
<asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext">
</asp:Label>
</FooterTemplate>
</asp:DataList>
You can build your ItemTemplate like:
<ItemTemplate>
<div class="floating">
<img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' />
<span><%# /* Code to Eval your image caption from datasource */ %></span>
</div>
</ItemTemplate>
where the .floating class of the div is:
.floating { float:left; overflow:hidden; }
.floating img { display: block; }
I usually put a div for clear after a sequence of floating element, to reset the state of box model.
<div style="clear:both;"></div>
Depends on what you are using to display, i.e. if your pictures are in a div put float:left; on it, or use the DataList.
Like #numenor said in this other answer, it's just a matter of what html you use. Here, an example of how to acomplish what you need using html tables.
<table width="<%= this.TotalWidth %>">
<tr>
<asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound">
<ItemTemplate>
<td class="itemWidth">
Your item goes here and will be
displayed horizontally as a column.
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
Note that the width is handled with a server side property TotalWidth that calculates the total width needed based on, of course, the count of items repeater will display. Creating a CSS class to define the width of each item is also recomended to ensure proper layout.
protected string TotalWidth
{
get
{
//In this example this.Madibu.Materiales is the datasource for the Repeater,
//so this.Madibu.Materiales.Count is the column count for your table.
//75 must be equal to the width defined in CSS class 'itemWidth'
return (this.Madibu.Materiales.Count * 75).ToString() + "px";
}
}