so i have this bit of asp here:
<asp:Panel runat="server" ID="pnlNavigator" CssClass="panel panel-primary">
<div class="panel-body" style="width:100%">
<div style="display:inline-block" >
<br /><br />
<div class="container" style="display:inline-block">
<asp:TextBox runat="server" Enabled="false" Width="33%" TextMode="MultiLine" Text=" ***Teacher Training, CPD, Mentor Training***">
</asp:TextBox>
<asp:TextBox runat="server" Enabled="false" Width="33%" TextMode="MultiLine" Text="***Sports Science, steps, FMS facilitator***">
</asp:TextBox>
<asp:TextBox runat="server" Enabled="false" Width="33%" TextMode="MultiLine" Text="***Professional Development, Consultant***">
</asp:TextBox>
</div>
</div>
</div>
</asp:Panel>
and basically they aren't filling up the entire panel,they're only reaching about half way then starting a new line underneath, any help?
Bootstrap .css adds a pixel ::before and ::after the elements so the combined width of the three textareas exceeds 100%.
1st solution: decrease the width by 1%
<asp:TextBox runat="server" Enabled="false" Width="32%" TextMode="MultiLine" Text="***Sports Science, steps, FMS facilitator***">
</asp:TextBox>
2nd solution: use bootstrap grid system to control layout
<asp:Panel runat="server" ID="pnlNavigator" CssClass="panel panel-primary">
<div class="panel-body">
<%-- style="width:100%">--%>
<div class="container-fluid">
<%-- style="display:inline-block" >--%>
<%-- <br /><br />--%>
<div class="row">
<%-- style="display:inline-block">--%>
<div class="col-sm-4">
<asp:TextBox runat="server" Enabled="false" Width="100%" TextMode="MultiLine" Text=" ***Teacher Training, CPD, Mentor Training***">
</asp:TextBox>
</div>
<div class="col-sm-4">
<asp:TextBox runat="server" Enabled="false" Width="100%" TextMode="MultiLine" Text="***Sports Science, steps, FMS facilitator***">
</asp:TextBox>
</div>
<div class="col-sm-4">
<asp:TextBox runat="server" Enabled="false" Width="100%" TextMode="MultiLine" Text="***Professional Development, Consultant***">
</asp:TextBox>
</div>
</div>
</div>
</div>
</asp:Panel>
Related
I want to have the two text boxes below Account to be align horizontally. I've tried using different amounts of columns but I cannot seem to get them to change from being stacked on top of each other. I have a link to a prototype that I quickly made it Adobe Xd of how I want the textboxes to look.
This is what I have:
This is what I want it to look like:
This is the code i have right now
<div class="form-group">
<asp:Label ID="lblwk_num" runat="server" AssociatedControlID="txtwk_num" Text="Work Order #" CssClass=""></asp:Label>
<asp:TextBox ID="txtwk_num" runat="server" ReadOnly="True" CssClass="form-control" Enabled="False"></asp:TextBox>
</div>
<div class ="form-group">
<asp:Label ID="lblwk_acct" runat="server" AssociatedControlID="txtwk_acct" Text="Account" ></asp:Label>
<asp:TextBox ID="txtwk_acct" ReadOnly="True" Enabled="False" CssClass="form-control" runat="server" ></asp:TextBox>
<asp:TextBox ID="txtwk_suffix" runat="server" CssClass="form-control" ReadOnly="True" Enabled="False"></asp:TextBox>
</div>
I used form-inline class and I got the text boxes side by side. Find the attached sample output. Accept my answer if it works for you.
However there could be a better approach. Will post here if I found any.
<div class="form-group">
<asp:Label ID="lblwk_num" runat="server" AssociatedControlID="txtwk_num" Text="Work Order #" CssClass=""></asp:Label>
<asp:TextBox ID="txtwk_num" runat="server" ReadOnly="True" CssClass="form-control" Enabled="False"></asp:TextBox>
</div>
<asp:Label ID="lblwk_acct" runat="server" AssociatedControlID="txtwk_acct" Text="Account" ></asp:Label>
<div class="form-inline">
<div class="form-group">
<asp:TextBox ID="txtwk_acct" ReadOnly="True" Enabled="False" CssClass="form-control" runat="server" ></asp:TextBox>
</div>
<div class="form-group">
<asp:TextBox ID="txtwk_suffix" runat="server" CssClass="form-control" ReadOnly="True" Enabled="False"></asp:TextBox>
</div>
</div>
I have a repeater set up in Visual Studio to try and grab the latest 3 blog titles from the database and show the associated image along with the title, intro and a link.
However the parent div of each blog needs to have a different ID.
Currently I have the following code but it's not working because I've since found out you can't have an itemtemplate followed by an alternating item template followed by another item template.
I there any workaround to this?
<asp:Repeater runat="server" ID="repeaterNews1" DataSourceID="SQLDataNews1">
<ItemTemplate>
<div id="blog1">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image1" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div id="blog2">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image2" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</AlternatingItemTemplate>
<ItemTemplate>
<div id="blog3">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image3" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
No, you cannot create a third template.
What you can do is make sure the ID's are still unique by using Container.DataItemIndex
<ItemTemplate>
<div id="blog<%# Container.DataItemIndex %>"></div>
</ItemTemplate>
I have a listview control that is bounded by an entity query. The main listview is bounded to the entity called Article. The second listview(nested one) is bounded to an icollection of Article_Comment. I am trying to get the ID of a article so that I can use it in updating the article comment table. Below is what I have so far.
<asp:ListView ID="listComment" runat="server" DataKeyNames="ArticleID" >
<LayoutTemplate>
<div class="row">
<h3>Comments</h3>
<blockquote>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</blockquote>
</div>
</LayoutTemplate>
<ItemSeparatorTemplate>
<hr />
</ItemSeparatorTemplate>
<ItemTemplate>
<h4 class="text-error"><%#Eval("Title")%></h4>
<br />
<h4 class="text-error"><%#Eval("ArticleID")%></h4
<br />
<p><%#Eval("ArticleContent")%> </p>
<asp:ListView ID="list" runat="server" DataSource='<%# Eval("Article_CommentTable")%>'
InsertItemPosition="LastItem" OnItemCommand="list_ItemCommand" OnItemDataBound="list_ItemDataBound"
DataKeyNames="ArticleID" OnItemInserting="list_ItemInserting">
<LayoutTemplate>
<div class="row">
<h3>Comments</h3>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<ItemTemplate>
<p>
Username : <%#Eval("UserName")%>
<br />
Comments : <%#Eval("Comment")%>
<br />
<%--<asp:Label ID="lblID" runat="server" Text='<%# Bind("ArticleID")%>'></asp:Label>--%>
<asp:HiddenField ID="hid" runat="server" Value='<%# Bind("ArticleID")%>' />
</p>
</ItemTemplate>
<InsertItemTemplate>
<div class="row" runat="server">
<asp:TextBox ID="txtUserName" runat="server" CssClass="form-control" />
<br />
<asp:TextBox ID="txtComment" runat="server" CssClass="form-control" />
<FCKeditorV2:FCKeditor ID="editorArticle" runat="server"
BasePath="~/FCKeditor/" Height="200px" Width="400px"
Value="Start typing here" ToolbarStartExpanded="False">
</FCKeditorV2:FCKeditor>
<br />
<asp:Button ID="btnAddComment" runat="server" CssClass="btn btn-info"
CommandName="insert" Text="Join The Discussion" CommandArgument='<%#Eval("ArticleID")%>' />
</div>
</InsertItemTemplate>
</asp:ListView>
</ItemTemplate>
</asp:ListView>
I am trying to access the ArticleID for each row that a button is clicked. How should I do that?
you can get it in ItemCommand event as listComment.DataKeys[dataItem.DisplayIndex].Value
I have textbox and HtmlEditorExtender inside the Repeater Item, the rendering went all wrong! Anybody has any idea how to solve this?
Below is the sample code.
<asp:Repeater ID="rptQuestion" runat="server">
<ItemTemplate>
<div class="row">
<div class="colTitle">
Question <%# Eval("sequence") %>
</div>
<div class="colColon">:</div>
<div class="colContent">
<asp:TextBox ID="tbxQuestion" runat="server" Text='<%# Eval("questionText") %>'
TextMode="MultiLine" Columns="50" Rows="10" CssClass="textbox">
</asp:TextBox>
<ajaxToolkit:HtmlEditorExtender ID="tbxQuestion_HtmlEditorExtender" runat="server"
TargetControlID="tbxQuestion" DisplaySourceTab="true">
</ajaxToolkit:HtmlEditorExtender>
</div>
</div>
<asp:Repeater ID="rptAnswer" runat="server" DataSource="<%# GetAnswers(Container.DataItem) %>">
<ItemTemplate>
<div class="row">
<div class="colTitle" style="text-align:right">
Answer <%# Eval("sequence") %>
</div>
<div class="colColon">:</div>
<div class="colContent">
<asp:TextBox ID="tbxAnswer" runat="server" Text='<%# Eval("answerText") %>'
TextMode="MultiLine" Columns="50" Rows="10" CssClass="textbox">
</asp:TextBox>
<ajaxToolkit:HtmlEditorExtender ID="tbxAnswer_HtmlEditorExtender" runat="server"
TargetControlID="tbxAnswer" DisplaySourceTab="true">
</ajaxToolkit:HtmlEditorExtender>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
<SeparatorTemplate>
<div class="row"> </div>
</SeparatorTemplate>
</asp:Repeater>
Solved this by added a dummy HTML editor outside of the UpdatePanel to enable correct rendering all the time. The HTML editor is set to absolute and away from the screen.
I am trying to replicate this table structure by using div.
<asp:Table ID="tblAnnualReportServiceForm" runat="server" Width="100%" CellSpacing="1" CellPadding="5">
<asp:TableRow >
<asp:TableCell HorizontalAlign="Left">
<asp:Table ID="Table1" runat="server" CellSpacing="1" CellPadding="5">
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow >
<asp:TableCell>
<asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
I have tried the following DIV and I haven't have much CSS experience.
<div>
<div style="float:left">
<asp:Label ID="Label1" runat="server" Text="Start Date"></asp:Label>
</div>
<div>
<asp:TextBox ID="TextBox1" Width="130px" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="Label2" runat="server" Text="End Date"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
</div>
</div>
Any pointers would be of great help. I have too many table structure that needs to be converted to DIV. I appreciate the help
A general structure to replicate table is like.
<!--table-->
<div>
<!--tr-->
<div style="clear:both"></div>
<!--td-->
<div style="float:left">
</div>
<!--td-->
<div style="float:right">
</div>
<!--tr-->
<div style="clear:both"></div>
<!--td-->
<div style="float:left">
</div>
<!--td-->
<div style="float:right">
</div>
<!--tr-->
<div style="clear:both"></div>
</div>
You can do something like this:
<div>
<div style="clear:both;">
<div style="float:left;width:50%;">
<asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
</div>
<div style="float:left;width:50%;">
<asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
</div>
</div>
<div style="clear:both;">
<div style="float:left;width:50%;">
<asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
</div>
<div style="float:left;width:50%;">
<asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
</div>
</div>
</div>
If you want to get some paddings/margins you can add another div into a cell div:
<div style="float:left;width:50%;">
<div style="border:solid 1px black;padding:5px;margin:1px;">
<asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
</div>
</div>
JsFiddle DEMO or here is a demo with classes (using style is not a very good idea, so I created few classes and removed styles from div tags)
Check out:
1.) YUI Grids - for Tableless design
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
2.) 960 Grid System: The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.