i have text box and i want it when i start typing the autocomplete will show the suggestion. this is my html code
<tr>
<td valign="top" align="right">
<asp:Label ID="labelPayableAccount" runat="server" CssClass="ItemTitle" Text="Payable Account"></asp:Label>
</td>
<td valign="top" align="center" class="style2">
<asp:Label ID="labelPayableAccountColon" runat="server" CssClass="ItemTitle" Text=":"></asp:Label>
</td>
<td valign="top" align="left">
<asp:TextBox ID="txtPayableAccount" runat="server" Width="400px" CssClass="textBoxString"></asp:TextBox>
<div id="divwidth1">
</div>
<ajaxToolkit:AutoCompleteExtender ID="autoComplete1" runat="server" EnableCaching="true"
BehaviorID="AutoCompleteEx" MinimumPrefixLength="1" TargetControlID="txtPayableAccount"
CompletionListElementID="divwidth1" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight" ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionListPayableAccount" CompletionSetCount="20" CompletionInterval="1"
DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="false">
</ajaxToolkit:AutoCompleteExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidatortxtPayableAccount" runat="server"
ErrorMessage="Required !" ControlToValidate="txtSupplierType">
</asp:RequiredFieldValidator>
</td>
</tr>
and this is the css code for the autocomplete layout
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
border: solid 1px #006699;
line-height: 20px;
padding: 10px;
background-color: White;
margin-left: 10px;
max-height:180px;
}
.AutoExtenderList
{
border-bottom: dotted 1px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
#divwidth1
{
width: auto !important;
height:180px !important;
}
#divwidth1 div
{
width: auto !important;
}
i have design the layout so that the height of autocomplete frame is 180px, but the list wouldn't do the same, here is the snapshot
can anybody help me?
Perhaps try adding the overflow css property?
#divwidth1
{
width: auto !important;
height:180px !important;
**overflow: hidden;**
}
Related
I want the color to change when the user hovers on datagridview row. I am only able to get the rows that are gray to change to blue when the user hover on them. However, when I try to get it to work for them with rows the footer also becomes blue when the user hovers on it which is not what I want. How can I fix this? Thank you for your help.
Here is my aspx
<asp:GridView ID="editingGrid" runat="server" AutoGenerateColumns="false" ShowFooter="false" DataKeyNames="componente_id"
ShowHeaderWhenEmpty="true" AllowPaging="True" OnPageIndexChanging="gridView_PageIndexChanging" OnRowDataBound = "OnRowDataBound" OnSelectedIndexChanged = "OnSelectedIndexChanged"
CellPadding="3" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
<PagerSettings Mode="Numeric" />
<Columns>
<asp:TemplateField HeaderText="Familia">
<ItemTemplate>
<asp:Label Text='<%# Eval("familia") %>' runat="server" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtfamilie" Text='<%# Eval("familia") %>' runat="server" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Here is my CSS and HTML:
:root {
--main-color: #1b9bff;
}
.mGrid {
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
}
.mGrid td {
padding: 2px;
border: solid 1px #c1c1c1;
color: #000;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background: #424242 url(/images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.mGrid th:hover {
color: #1b9bff;
}
.mGrid .alt {
background: #c4c9d2 url(/images/rd_alt.png) repeat-x top;
}
.mGrid .alt:hover {
background-color: #1b9bff;
}
.mGrid .pgr {
background: #424242 url(/images/grd_pgr.png) repeat-x top;
}
.mGrid .pgr table {
margin: 5px 0;
}
.mGrid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a {
color: #666;
text-decoration: none;
}
.mGrid .pgr a:hover {
color: #000;
text-decoration: none;
}
<table class="mGrid" cellspacing="0" cellpadding="3" id="PageContent_editingGrid" style="border-collapse:collapse;">
<tr>
<th scope="col">Familia</th>
<th scope="col">Marca</th>
<th scope="col">Tipo</th>
<th scope="col">Designacion</th>
<th scope="col">Referencia</th>
</tr>
<tr title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack('ctl00$PageContent$editingGrid','Select$0')">
<td>
<span>circuito integrado</span>
</td>
<td>
<span id="PageContent_editingGrid_myText_0">Kemet</span>
</td>
<td>
<span>electronics</span>
</td>
<td>
<span>capteur</span>
</td>
<td>
<span>calle mayor</span>
</td>
</tr>
<tr class="alt" title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack('ctl00$PageContent$editingGrid','Select$0')">
<td>
<span>circuito integrado</span>
</td>
<td>
<span id="PageContent_editingGrid_myText_0">Kemet</span>
</td>
<td>
<span>electronics</span>
</td>
<td>
<span>capteur</span>
</td>
<td>
<span>calle mayor</span>
</td>
</tr>
<tr class="pgr">
<td colspan="5">
<table>
<tr>
<td><span>1</span></td>
<td>2</td>
</tr>
</table>
</td>
</tr>
</table>
If you want all rows of data (not header row or footer pager row) to turn blue on hover you can add this style to your stylesheet:
.mGrid > tbody > tr:not(.pgr):hover {
background-color: #1b9bff;
}
The .mGrid tbody > tr part will select all rows in the body of the table (so the header column in the <thead> will not be affected), the :not(.pgr) part will exclude the footer/pager row, and the :hover will only style it on hover.
:root {
--main-color: #1b9bff;
}
.mGrid {
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
}
.mGrid td {
padding: 2px;
border: solid 1px #c1c1c1;
color: #000;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background: #424242 url(/images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.mGrid th:hover {
color: #1b9bff;
}
.mGrid .alt {
background: #c4c9d2 url(/images/rd_alt.png) repeat-x top;
}
.mGrid > tbody > tr:not(.pgr):hover {
background-color: #1b9bff;
}
.mGrid .pgr {
background: #424242 url(/images/grd_pgr.png) repeat-x top;
}
.mGrid .pgr table {
margin: 5px 0;
}
.mGrid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a {
color: #666;
text-decoration: none;
}
.mGrid .pgr a:hover {
color: #000;
text-decoration: none;
}
<table class="mGrid" cellspacing="0" cellpadding="3" id="PageContent_editingGrid" style="border-collapse:collapse;">
<tr>
<th scope="col">Familia</th>
<th scope="col">Marca</th>
<th scope="col">Tipo</th>
<th scope="col">Designacion</th>
<th scope="col">Referencia</th>
</tr>
<tr title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack('ctl00$PageContent$editingGrid','Select$0')">
<td>
<span>circuito integrado</span>
</td>
<td>
<span id="PageContent_editingGrid_myText_0">Kemet</span>
</td>
<td>
<span>electronics</span>
</td>
<td>
<span>capteur</span>
</td>
<td>
<span>calle mayor</span>
</td>
</tr>
<tr class="alt" title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack('ctl00$PageContent$editingGrid','Select$0')">
<td>
<span>circuito integrado</span>
</td>
<td>
<span id="PageContent_editingGrid_myText_0">Kemet</span>
</td>
<td>
<span>electronics</span>
</td>
<td>
<span>capteur</span>
</td>
<td>
<span>calle mayor</span>
</td>
</tr>
<tr class="pgr">
<td colspan="5">
<table>
<tr>
<td><span>1</span></td>
<td>2</td>
</tr>
</table>
</td>
</tr>
</table>
Right now you are only changing the font color of the individual cell in the header, because you are applying the hover style to:
.mGrid th:hover{...}
if you want the same style to be applied to cells in each row you just need to add td:hover in to the mix:
.mGrid th:hover, .mGrid td:hover {...}
Note: you need to separate them by comma and apply the full css style selector for the td. But this will only apply to the cell of each row, not to the entire row. So only the cell will be affected.
To get the entire row involved you need to add another selector. In this example I am changing the background color:
.mGrid tr:hover {
background-color: #eeeeee;
}
If I try to add font color changes it won't work, even if I add the !important flag - still only the background color changes.
.mGrid tr:hover {
color: #1b9bff !important;
background-color: #eeeeee;
}
This is because the tr has a background color property, but no foreground (font) color.
So what you need to do is to make sure that you apply the style to the nested child elements like when you hover over the row, like this...
.mGrid tr:hover td {
color: #1b9bff;
background-color: #eeeeee;
}
Voila... your row background and font colors should now change on hover. (and you don't even need the !important flag)
I'm trying to make a log in form similar to Google Gmail where the email and password textboxes have exactly the same width but when I can't get it right especially with the button. Both have the same style yet the button appears shorter and has a margin-left.
ASP.Net Markup
<div class="loginWindow">
<asp:Login ID="Login1" runat="server" RenderOuterTable="False">
<LayoutTemplate>
<asp:TextBox ID="UserName" placeholder="Username" runat="server" CssClass="Logintextbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="Login1" ForeColor="White">*</asp:RequiredFieldValidator>
<asp:TextBox ID="Password" placeholder="Password" runat="server" TextMode="Password" CssClass="Logintextbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1" ForeColor="White">*</asp:RequiredFieldValidator>
<asp:Button ID="LoginButton" CssClass="Loginbutton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1" />
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
<asp:ValidationSummary ID="ValidationSummary1" CssClass="ValidationSummary" runat="server" ValidationGroup="Login1"></asp:ValidationSummary>
</LayoutTemplate>
</asp:Login>
</div>
CSS:
.loginWindow {
height: 340px;
width: 300px;
outline: 1px solid #e2e2e2;
border: none;
padding: 15px 25px 15px 25px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
.Logintextbox {
border: 1px solid #e2e2e2;
display: inline;
padding: 5px 10px 5px 10px;
margin:0;
width: 220px;
height:30px;
}
.Loginbutton {
border: 1px solid #e2e2e2;
display: inline;
padding: 5px 10px 5px 10px;
margin:0;
width: 220px;
height:30px;
}
try applying:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
to all your elements. It makes it so the element's padding and border are added without causing an increase in overall width. inputs are usually rendered this way by default but there may be something different with the ASP rendered inputs. Try to rule this out at least.
http://css-tricks.com/box-sizing/
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
check out the difference between box-sizing and non box-sizing
http://jsfiddle.net/Davidicus/f5r3R/
I'm trying to place a small icon inside the ValidationSummary div (to the left of the bullet list). The image shows up, but with repeat when I use:
background:url(Images/exclamation.png);
The image does not show at all, when I say:
background:url(Images/exclamation.png) no-repeat 12px 30px;
What am I missing here.
CSS:
.validationsummary
{
background:url(Images/exclamation.png) no-repeat 12px 30px;
border:1px solid #b08b38;
width:99%;
}
.validationsummary ul
{
color:#982b12;
background-color:PeachPuff;
}
.validationsummary ul li
{
padding:2px 0px 0px 15px;
font-size:12px;
}
ASPX:
<table width="100%">
<tr>
<td width="100%">
<asp:ValidationSummary ID="vs" runat="server" CssClass="validationsummary"
DisplayMode="BulletList" />
</td>
</tr>
</table>
<table width="100%" cellspacing="10px">
<tr>
<td width="11%" align="left">
* Surname
</td>
<td width="18%" align="left">
<asp:TextBox ID="txtSurname" runat="server" Width="93%"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtSurname" SetFocusOnError="true" Text="*" ForeColor="Red"
Display="Dynamic" ErrorMessage="Surname Is Required"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
Try
.validationsummary
{
background:url(Images/exclamation.png) no-repeat 0 0;
border:1px solid #b08b38;
width:99%;
}
If it is working, position your background accordingly.
background-image:url('Images/exclamation.png');
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
Also define the height of your background image
.validationsummary
{
background:url(Images/exclamation.png) no-repeat 12px 30px;
border:1px solid #b08b38;
width:99%;
height: 200px; /* change it with your requirement */
}
.validationsummary
{
background-image: url('Images/exclamation.png);
background-repeat: no-repeat;
background-position: left top;
background-size: 16px;
padding-left: 20px; /* Depends on the size of the image - 16px + 4px actual padding to indent the text to the right of the image */
}
I am having an issue with what I believe is the AJAX AutoComplete extender for an ASP.NET page.
Basically I have a form where a user enters a variety of info. It’s the FOD entry form. One of the input boxes on this FOD entry form is to select an organization - this has a corresponding hyperlink which upon clicking takes them to the search form to select an organization.
For this search form I am using UpdatePanels and AutoExtenders. So, a user can begin typing in either an org code or an org name and the AJAX AutoExtender will display a dropdown as they type which displays the possible org codes and names.
If they hit “Enter” with either a partial entry or full entry of the org they want, a hyperlink will display with the org code, name, and address for each of the possibles. They can then click the link for the org they want and it will return to the FOD entry form with the organization box populated with the data they selected from the org search form.
However, the problem is if they don’t hit “Enter” but rather select a name from the drop down list by using the mouse, that hyperlink containing the info they need to populate the FOD form will not show. I haven’t been able to figure this out thus far and am wondering if it’s something I’m doing in the AJAX controls. Any help would me most appreciated!
Thanks!
Here is the code for just the part under discussion (OrganizationSearch.aspx):
<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:TextBox ID="OrganizationName" runat="server" AutoPostBack="true"
OnTextChanged="GetCompleteList" Width="420px" />
<asp:AutoCompleteExtender
ID="AutoCompleteExtender1"
TargetControlID="OrganizationName"
runat="server"
ServiceMethod="getNames"
CompletionInterval="500"
minimumprefixLength="1"
completionsetcount="5"
/>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td colspan="2">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView
id="GridView1"
runat="server"
AutoGenerateColumns="false" Width="700px"
>
<Columns>
<asp:TemplateField HeaderText="Select the organization from the list below:">
<ItemTemplate>
<%#"<a href='javascript:setParentName(" + Eval("OrganizationID").ToString() + ",'" + Eval("Organization").ToString() + "');'>" + Eval("Organization").ToString() + "</a>"%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="OrganizationName" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="primarylight" style="MIN-HEIGHT: 0.042in">
<td style="BORDER-BOTTOM: #000000 1pt; BORDER-LEFT: #000000 1pt; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; VERTICAL-ALIGN: middle; BORDER-TOP: #000000 1pt; BORDER-RIGHT: #000000 1pt; PADDING-TOP: 1px">
<h4 align="center" style="FONT-WEIGHT: normal">If you cannot find a particular organization, please contact the help desk via phone (000) 000-0000 or visit the website at:
<a target="_blank" href="helpdeskwebsite"
xd:disableediting="yes"><font size="2">Organizational Help Desk</font></a> The following information is required: Org Code, name, address, and phone number of the organization</h4>
</td>
</tr>
<tr class="primarylight" style="MIN-HEIGHT: 0.042in">
<td style="BORDER-BOTTOM: #000000 1pt; BORDER-LEFT: #000000 1pt; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; VERTICAL-ALIGN: middle; BORDER-TOP: #000000 1pt; BORDER-RIGHT: #000000 1pt; PADDING-TOP: 1px" align="center">
</td>
</tr>
Here is the code for the full page:
<%# Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%# Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%# Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<%# Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="OrganizationSearch.aspx.cs" Inherits="PMT30.Layouts.PMT30.OrganizationSearch" %>
<%# Register Assembly="AjaxControlToolkit, Version=3.5.50508.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<style type="text/css">
TABLE {
BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-COLLAPSE: collapse; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
TABLE {
FONT-FAMILY: Verdana; FONT-SIZE: 10pt
}
TABLE {
BEHAVIOR: url (#default#urn::tables/NDTable)
}
.primaryVeryDark {
BACKGROUND-COLOR: #1e3c7b; COLOR: #ebf0f9
}
TABLE.xdFormLayout TD {
BEHAVIOR: url(#default#LayoutText)
}
TABLE.xdLayout TD {
BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
TD {
BORDER-BOTTOM-COLOR: #517dbf; BORDER-TOP-COLOR: #517dbf; BORDER-RIGHT-COLOR: #517dbf; BORDER-LEFT-COLOR: #517dbf
}
.primaryLight {
BACKGROUND-COLOR: #ebf0f9; COLOR: black
}
H4 {
MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; COLOR: #1e3c7b
}
.xdRepeating {
DISPLAY: inline-block; BEHAVIOR: url(#default#RepeatingItemUI) url(#default#DataBindingUI)
}
.xdSection {
BORDER-BOTTOM: #ffffff 1pt solid; BORDER-LEFT: #ffffff 1pt solid; PADDING-BOTTOM: 1px; MARGIN: 6px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 1px; BORDER-TOP: #ffffff 1pt solid; BORDER-RIGHT: #ffffff 1pt solid; PADDING-TOP: 1px
}
.xdTextBox {
BORDER-BOTTOM: #dcdcdc 1pt solid; TEXT-ALIGN: left; BORDER-LEFT: #dcdcdc 1pt solid; PADDING-BOTTOM: 1px; BACKGROUND-COLOR: window; MARGIN: 1px; PADDING-LEFT: 1px; TEXT-OVERFLOW: ellipsis; PADDING-RIGHT: 1px; DISPLAY: inline-block; WORD-WRAP: normal; WHITE-SPACE: nowrap; COLOR: windowtext; OVERFLOW: hidden; BORDER-TOP: #dcdcdc 1pt solid; BORDER-RIGHT: #dcdcdc 1pt solid; PADDING-TOP: 1px; BEHAVIOR: url(#default#DataBindingUI)
}
.xdAspTextBox {
BORDER-BOTTOM: #dcdcdc 1pt solid; TEXT-ALIGN: left; BORDER-LEFT: #dcdcdc 1pt solid; PADDING-BOTTOM: 1px; BACKGROUND-COLOR: window; MARGIN: 1px; PADDING-LEFT: 1px; TEXT-OVERFLOW: ellipsis; PADDING-RIGHT: 1px; DISPLAY: inline-block; WORD-WRAP: normal; WHITE-SPACE: nowrap; COLOR: windowtext; OVERFLOW: hidden; BORDER-TOP: #dcdcdc 1pt solid; BORDER-RIGHT: #dcdcdc 1pt solid; PADDING-TOP: 1px; BEHAVIOR: url(#default#DataBindingUI)
}
.xdBehavior_Select {
BEHAVIOR: url(#default#SelectHelper) url(#default#DataBindingUI/Select)
}
.xdComboBox {
MARGIN: 1px
}
SELECT {
FONT-FAMILY: Verdana; FONT-SIZE: 10pt
}
.xdXButton {
FONT-FAMILY: Verdana; BEHAVIOR: url(#default#DataBindingUI)
}
.xdBehavior_Boolean {
BEHAVIOR: url(#default#BooleanHelper) url(#default#DataBindingUI)
}
.xdDTPicker {
BORDER-BOTTOM: #dcdcdc 1pt solid; BORDER-LEFT: #dcdcdc 1pt solid; BACKGROUND-COLOR: window; TEXT-INDENT: 0px; MARGIN: 1px 1px 2px; DISPLAY: inline; COLOR: windowtext; OVERFLOW: hidden; BORDER-TOP: #dcdcdc 1pt solid; BORDER-RIGHT: #dcdcdc 1pt solid; BEHAVIOR: url(#default#DataBindingUI)
}
.xdDTText {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; HEIGHT: 100%; OVERFLOW: hidden; MARGIN-RIGHT: 22px; PADDING-TOP: 0px
}
.xdBehavior_FormattingNoBUI {
BEHAVIOR: url(#default#Formatting)
}
.xdDTButton {
WIDTH: 20px; HEIGHT: 18px; MARGIN-LEFT: -21px; BEHAVIOR: url(#default#DTPicker)
}
.xdRichTextBox {
BORDER-BOTTOM: #dcdcdc 1pt solid; TEXT-ALIGN: left; BORDER-LEFT: #dcdcdc 1pt solid; PADDING-BOTTOM: 1px; OVERFLOW-X: hidden; BACKGROUND-COLOR: window; FONT-STYLE: normal; MARGIN: 1px; PADDING-LEFT: 1px; TEXT-OVERFLOW: ellipsis; PADDING-RIGHT: 1px; DISPLAY: inline-block; WORD-WRAP: break-word; COLOR: windowtext; VERTICAL-ALIGN: baseline; BORDER-TOP: #dcdcdc 1pt solid; FONT-WEIGHT: normal; BORDER-RIGHT: #dcdcdc 1pt solid; TEXT-DECORATION: none; PADDING-TOP: 1px; BEHAVIOR: url(#default#DataBindingUI)
}
.xdBehavior_Formatting {
BEHAVIOR: url(#default#Formatting) url(#default#DataBindingUI)
}
TABLE.msoUcTable TD {
BORDER-BOTTOM: 1pt solid; BORDER-LEFT: 1pt solid; BORDER-TOP: 1pt solid; BORDER-RIGHT: 1pt solid
}
.xdRepeatingTable {
BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-COLLAPSE: collapse; WORD-WRAP: break-word; BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none; BEHAVIOR: url(#default#urn::tables/NDTable) url(#default#RepeatingItemUI) url(#default#DataBindingUI)
}
.xdTableHeader {
BACKGROUND-COLOR: #ebf0f9; COLOR: black
}
.xdRepeatingTable TD {
VERTICAL-ALIGN: top
}
.style1
{
color: #FF0000;
}
.style2
{
width: 183px;
}
.style3
{
width: 81px;
}
.style4
{
width: 15px;
}
.style5
{
width: 182px;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Organization Selection</title>
<script language="javascript" type="text/javascript">
var Prefix = "FODForm_TabContainer1_TabPanelRI_RI_";
var PrefixPI = "FODForm_TabContainer1_TabPanelPI_PI_";
var PrefixPT = "FODForm_TabContainer1_TabPanelPT_PT_";
var PrefixFI = "FODForm_TabContainer1_TabPanelFI_FI_";
var PrefixIC = "FODForm_TabContainer1_TabPanelIC_IC_";
var PrefixPSI = "FODForm_TabContainer1_TabPanelPSI_PSI_";
function setParentName(FOD, fName) {
var organization = opener.document.getElementById(Prefix + "txtOrganization");
var organizationid = opener.document.getElementById(Prefix + "txtOrganizationID");
if (organization) {
organization.value = fName;
organizationid.value = FOD;
//opener.document.getElementById(Prefix + "txtOrganization").value = fName;
//opener.document.getElementById(Prefix + "txtOrganizationID").value = FOD;
}
else {
organization = opener.document.getElementById("CtrInfoForm_txtOrganization");
organizationid = opener.document.getElementById("CtrInfoForm_txtOrganizationID");
organization.value = fName;
organizationid.value = FOD;
}
self.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ToolkitScriptManager>
<div style="width: 767px" >
<table table border="1" class="xdFormLayout xdLayout"
style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; WIDTH: 765px; BORDER-COLLAPSE: collapse; WORD-WRAP: break-word; BORDER-TOP-STYLE: none; TABLE-LAYOUT: fixed; BORDER-LEFT-STYLE: none"
tabindex="-1">
<colgroup>
<col style="WIDTH: 754px" />
</colgroup>
<tr class="primaryVeryDark" style="MIN-HEIGHT: 27px">
<td style="BORDER-BOTTOM: #000000 1pt solid; BORDER-LEFT: #000000 1pt solid; BORDER-TOP: #000000 1pt solid; BORDER-RIGHT: #000000 1pt solid">
<div align="center">
<font size="4">Search/Select Organization</font></div>
</td>
</tr>
<tr class="primarylight" style="MIN-HEIGHT: 0.042in">
<td style="BORDER-BOTTOM: 5pt solid; TEXT-ALIGN: left; BORDER-LEFT: #517dbf 1pt solid; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; VERTICAL-ALIGN: middle; BORDER-TOP: #517dbf 1pt solid; BORDER-RIGHT: #517dbf 1pt solid; PADDING-TOP: 1px">
<div align="center">
<table border="1" bordercolor="buttontext" class="xdLayout"
style="border-style: none; border-color: inherit; border-width: medium; WIDTH: 640px; BORDER-COLLAPSE: collapse; WORD-WRAP: break-word; TABLE-LAYOUT: fixed; "
tabindex="-1">
<colgroup>
<col style="WIDTH: 100px" />
<col style="WIDTH: 250px" />
</colgroup>
<tbody valign="top">
<tr style="MIN-HEIGHT: 27px">
<td style="PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; VERTICAL-ALIGN: middle; PADDING-TOP: 1px">
<asp:Label ID="lblOrganization" runat="server" Text="Enter name to search:" Font-Bold="True"
Font-Names="Verdana" ForeColor="#1E3C7B" Width="170px"></asp:Label>
</td>
<td>
<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:TextBox ID="OrganizationName" runat="server" AutoPostBack="true"
OnTextChanged="GetCompleteList" Width="420px" />
<asp:AutoCompleteExtender
ID="AutoCompleteExtender1"
TargetControlID="OrganizationName"
runat="server"
ServiceMethod="getNames"
CompletionInterval="500"
minimumprefixLength="1"
completionsetcount="5"
/>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td colspan="2">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView
id="GridView1"
runat="server"
AutoGenerateColumns="false" Width="700px"
>
<Columns>
<asp:TemplateField HeaderText="Select the organization from the list below:">
<ItemTemplate>
<%#"<a href='javascript:setParentName(" + Eval("OrganizationID").ToString() + ",'" + Eval("Organization").ToString() + "');'>" + Eval("Organization").ToString() + "</a>"%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="OrganizationName" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="primarylight" style="MIN-HEIGHT: 0.042in">
<td style="BORDER-BOTTOM: #000000 1pt; BORDER-LEFT: #000000 1pt; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; VERTICAL-ALIGN: middle; BORDER-TOP: #000000 1pt; BORDER-RIGHT: #000000 1pt; PADDING-TOP: 1px">
<h4 align="center" style="FONT-WEIGHT: normal">If you cannot find a particular organization, please contact the help desk via phone (000) 000-0000 or visit the website at:
<a target="_blank" href="helpdeskwebsite"
xd:disableediting="yes"><font size="2">Organizational Help Desk</font></a> The following information is required: Org Code, name, address, and phone number of the organization</h4>
</td>
</tr>
<tr class="primarylight" style="MIN-HEIGHT: 0.042in">
<td style="BORDER-BOTTOM: #000000 1pt; BORDER-LEFT: #000000 1pt; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; VERTICAL-ALIGN: middle; BORDER-TOP: #000000 1pt; BORDER-RIGHT: #000000 1pt; PADDING-TOP: 1px" align="center">
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
And here is the code that retrieves the data (OrganizationSearch.aspx.cs):
using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Text;
using System.Data.SqlClient;
using System.Collections.Generic;
using IDE_Utility.DBConnection;
namespace ORG40.Layouts.ORG40
{
public partial class OrganizationSearch : LayoutsPageBase
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void GetCompleteList(object sender, EventArgs e)
{
DataSet DS = new DataSet();
SqlParameter sqlParamComp = new SqlParameter();
sqlParamComp.ParameterName = "#oName";
sqlParamComp.DbType = DbType.String;
sqlParamComp.Value = "%" + OrganizationName.Text + "%";
SqlParameter[] sqlParams = new SqlParameter[]{
new SqlParameter("#orgCode", DBNull.Value),
sqlParamComp
};
DS = DBConnection.GetDataSet("getL_Organization", CommandType.StoredProcedure, sqlParams);
GridView1.DataSource = DS;
GridView1.DataBind();
}
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static string[] getNames(string prefixText, int count)
{
DataSet DS = new DataSet();
SqlParameter sqlParamComp = new SqlParameter();
sqlParamComp.ParameterName = "#oName";
sqlParamComp.DbType = DbType.String;
sqlParamComp.Value = "%" + prefixText + "%";
SqlParameter[] sqlParams = new SqlParameter[]{
new SqlParameter("#orgCode", DBNull.Value),
sqlParamComp
};
DS = DBConnection.GetDataSet("getL_Organization", CommandType.StoredProcedure, sqlParams);
DataTable Dt = new DataTable();
Dt = DS.Tables[0].DefaultView.ToTable(true, new string[] {"OrgCode", "Name"});
DataRow[] Dr = new DataRow[Dt.Rows.Count];
Dt.Rows.CopyTo(Dr, 0);
return Array.ConvertAll(Dr, new Converter<DataRow, String>(DataRowToString));
}
public static string DataRowToString(DataRow pDr)
{
return (Convert.ToString(pDr["OrgCode"]) + ": " + Convert.ToString(pDr["Name"]));
}
}
}
Ah, sorry for the very long and inaccurate post. This issue was in my stored procedure which code is not posted. Was improperly factoring in semicolon in the parameters.
I have asp.net Button, table and Button as below:
<table style="width: 600px;">
<tr>
<td>
<div style="float: right;">
<asp:Button ID="_btn01" runat="server" Text="GO" />
<table class="IHCommandButtonContainer" cellpadding="0" cellspacing="0">
<tr>
<td class="IHCommandButtonL"><asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Test/Images/btn_Search.gif" /></td>
<td class="IHCommandButtonM"><span>Search</span></td>
<td class="IHCommandButtonR"><img src="/Test/Images/btn_R.gif" /></td>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="GO" />
</div>
</td>
</tr>
</table>
The problem is that I cannot put them in the same line.
They look like as below:
My css is below:
<style type="text/css">
.IHCommandButtonContainer { height: 21px; border: 0px; display: inline-block; cursor: pointer; margin: 0px; padding: 0px; border-spacing: 0px; border-collapse: collapse; }
.IHCommandButtonL { width: 22px; height: 21px; }
.IHCommandButtonL input { width: 22px; height: 21px; }
.IHCommandButtonM { background-image: url(/Test/Images/btn_M.gif); height: 21px; font-size: 9pt; font-family: Sans-serif, Arial, Dotum; }
.IHCommandButtonM span { margin: 0px 2px 0px 0px; }
.IHCommandButtonM_ { background-image: url(/Test/Images/btn_M_.gif); height: 21px; font-size: 9pt; font-family: Sans-serif, Arial, Dotum; }
.IHCommandButtonM_ span { margin: 0px 2px 0px 0px; }
.IHCommandButtonR { width: 3px; height: 21px; }
.IHCommandButtonR img { width: 3px; height: 21px; cursor: pointer; }
</style>
How can I put them in the same line?
Like 2 GO buttons are in the same line, but the table in the middle is upper than them.
User "vertical-align" attribute in your css. Set the value to "middle".
Cheers
Vertical align is the right answer, although I'm against to use the 'Developer Tools'...
The trick is to understand what you are doing...
this would help you: http://phrogz.net/css/vertical-align/index.html
take notice that putting the buttons in "display: inline-block" will help you to fix this problem easy!