I'm creating a webapp that is able to view on the phone while it fits nicely to screen. I have so far tried it by changing the CSS of the respective webapp. Initially it fits nicely like this below making any selection to the dropdownlistbox.
However, making a selection that is filled with images/text, the layout change drastically.
This is my CSS code where i re-size the parent layout, which is ContentPlaceHolder as shown below
#ContentPlaceHolder
{
position:absolute;
margin:0px;
width:100%;
left:0px;
}
I have inserted this contentplaceholder css attribute in the masterpage via this tag
<div id="ContentPlaceHolder"></div>
The layout of the all the details below is categorize as headerbody.
#headerbody
{
margin-top:50px;
position:absolute;
left:0%;
margin: 0px;
width:100%;
}
The 3 textbox shown in the picture also has a width:100% attribute in it as shown below.
<asp:TextBox ID="txtOR" runat="server" ReadOnly="True" TextMode="MultiLine" Height="80px" Width="100%"></asp:TextBox>
Prior to my knowledge, as long as the parent layout which is contentplaceholder is 100%, shouldn't the picture extends beyond 100%? It works perfectly on my desktop but not on my opera emulator. Would appreciate if anyone can enlighten me on this.
Regards.
UPDATE
By reducing the size i have fixed for the images, it fix nicely to my mobile emulator. However, the picture is a little too small. Is it possible all 5 picture to fit nicely to screen?
As an alternative, try using:
<div style="width:80%;overflow-y: visible">
<ul style="width:100%">
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
</ul>
</div>
overflow-y: visible; will add horizontal scroll bar to the container div.
#ContentPlaceHolder
{
position:absolute;
margin:0px;
width:100%;
left:0;
right:0;
}
Related
So i have a div with a textbox inside and for some reason i can't make the textbox wider than 50% of the div width. I tried to set the width manually in pixels but it will never grow more than that. In the design interface it grown normally but when i run the project it doesn't. Tried in all browsers, always the same result.
<div style="width:100%;text-align:left;display:table" runat="server" id="DIVAdd">
<asp:TextBox ID="TBDes" runat="server" Height="25px" Width="100%"></asp:TextBox>
</div>
The width attribute on an input element is only used for images.
You have to apply the width as a style.
<div style="width:100%;text-align:left;display:table" runat="server" id="DIVAdd">
<asp:TextBox ID="TBDes" runat="server" Height="25px" style="width: 100%"></asp:TextBox>
</div>
<div style="width:100%;text-align:left;display:table" runat="server" id="DIVAdd">
<input type="textBox" ID="TBDes" runat="server" Height="25px" style="width: 100%" />
</div>
On the W3 Input Attribute Chart you can see what attributes apply to which type of input.
Ok so basically i was using a MS Template and in the css page Site.css was this
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}
i have this page ASP.Net Web Forms Page
<!-- Sidebar menu -->
<div id="sidebar-menu ">
<div id="topPanel"
<asp:Table runat="server" ID="table_PageHeader">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
<asp:HyperLink ID="hyperlink_TruckList" runat="server" Text="Truck List" NavigateUrl="~/View/Trucklist.aspx" Font-Underline="false"></asp:HyperLink>
</asp:TableHeaderCell>
<asp:TableHeaderCell>
<asp:HyperLink ID="hyperlink_Reports" runat="server" Text="Reports" NavigateUrl="~/View/Reports.aspx" Font-Underline="false"></asp:HyperLink>
</asp:TableHeaderCell>
<asp:TableHeaderCell>
<asp:HyperLink ID="hyperlink_Profile" runat="server" Text="Profile" NavigateUrl="~/View/Profile.aspx" Font-Underline="false"></asp:HyperLink>
</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
</div>
want to implement this
<!-- Sidebar menu -->
<div id="sidebar-menu">
<ul>
<li><i class="glyphicon glyphicon-info-sign" style="color:black"></i> Truck Data </li>
<li><i class="glyphicon glyphicon-folder-close" style="color:black"></i> Maintenance Record </li>
<li><i class="glyphicon glyphicon-calendar" style="color:black"></i> Maintenance Schedule </li>
</ul>
</div><!-- End div #sidebar-menu -->
</div><!-- End div .body .rows .scroll-y -->
</div>
<!-- END SIDEBAR -->
How can i insert the <li> and <i> in the Asp.net Web Form?
Thanks in advance
At you interacting with the elements server side? If not just add the HTML as is. ASPX pages work fine with HTML elements.
If you want to interact with the elements server side, give them an ID and add runat="server". E.g:
<div id="sidebar-menu" runat="server">
You can then access server side with sidebar-menu.
I believe you want to populate the unordered list from code behind. One option would be to make use of HtmlGenericControl class.
Your list item mark up looks like this
<li><i class="glyphicon glyphicon-info-sign" style="color:black"></i> Truck Data </li>
I believe the text should be within the <i></i> tags. So it should look like this.
<li><i class="glyphicon glyphicon-info-sign" style="color:black">Truck Data</i></li>
Based on this you can just have a placeholder in the aspx page and set it from code behind. Here in the example I am just populating a list item. Based on your needs you can loop/ create additional list items.
place holder in aspx
<asp:PlaceHolder ID="sidemenu" runat="server" />
code behind
HtmlGenericControl list = new HtmlGenericControl("ul");
HtmlGenericControl li = new HtmlGenericControl("li");
HyperLink a = new HyperLink();
a.NavigateUrl = "index.html";
a.Attributes.Add("style", "font-size: 18px; color: black");
HtmlGenericControl i = new HtmlGenericControl("i");
i.Attributes.Add("class", "glyphicon glyphicon-info-sign");
i.Attributes.Add("style", "color:black");
i.InnerText = "Truck Data";
a.Controls.Add(i);
li.Controls.Add(a);
list.Controls.Add(li);
sidemenu.Controls.Add(list);
namespace
using System.Web.UI.HtmlControls;
Generated markup
<ul>
<li>
<a href="index.html" style="font-size: 18px; color: black">
<i class="glyphicon glyphicon-info-sign" style="color:black">Truck Data</i>
</a>
<li>
</ul>
I have an ASP page, and I have a calendar which is shown (set to visible) on the page when an image button is clicked.
The problem is everytime the calendar is shown it moves other components on the page down, and when it's invisible components move back up again.
Could anyone give me an idea plz. Here is what i did finally: (Now its fixed)
<body>
<form id="form1" runat="server">
<asp:TextBox ID="CreationTimeTextBox" runat="server" ClientIDMode="Static">Creation Time</asp:TextBox><br />
<script>
AnyTime.picker("CreationTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:TextBox ID="EndTimeTextBox" runat="server" ClientIDMode="Static">End Time</asp:TextBox>
<script>
AnyTime.picker("EndTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:Button ID="btnResetSearchInput" runat="server" Text=" Reset search input" CssClass="resetBtn" Width="140px" OnClick="btnResetSearchInput_Click" />
To not moving the rest of the page down, the calendar must a correct style that allow him to show as pseudo-dialog on the page.
The main attributes on the css that must be correct and set is the position, top and left.
Here is an example:
.dialog {
position: absolute;
top:10px;
left:20px;
width: 140px;
height: 30px;
background-color:blue;
color:white;
}
.NotDialog {
width: 200px;
height: 30px;
background-color:blue;
color:white;
}
<div>Some other text before
<div class="dialog">open as dialog</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
<br><br><br>
<div>Some other text before
<div class="NotDialog">open by moving the text down</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
More to read
CSS OVERLAY TECHNIQUES
I have a list on top of my page that has a few different countries on it. I need to have an #anchor that will pop half way down the page to the country picked. However the countries down the page are pulled from a Database and are listed by HyperLinks in a repeater.
<td align="center">
<ul style="list-style-type: none;">
<li>USA </li>
<li>Canada </li>
<li>Australia </li>
</ul>
</td>
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<asp:HyperLink ID="hlCountryName" runat="server" Style="color: #6D94B8; font-size: 20px; font-weight: bold; margin-bottom: 5px; padding-left: 10px;"></asp:HyperLink>
And inside the DataList1_ItemDataBound method in the C# section I did:
hlCountryName.Attributes.Add("href", "#" + drCountry[Common.Data.Country.Constants.countryName].ToString());
Yet when I click on the link at the top of the page I am not taken anywhere. I am wondering what I could be missing in my code? Or if I have miss understood how to do this altogether? Any help is appreciated. Thanks!
You should just try to replace this line :
hlCountryName.Attributes.Add("href", "#" + drCountry[Common.Data.Country.Constants.countryName].ToString());
with :
hlCountryName.Attributes.Add("name",drCountry[Common.Data.Country.Constants.countryName].ToString());
I want the arrow-collapsed image to be displyed before accordian headers and when accordian header is clicked and expanded, arrow-collapsed image should change to arrow-expanded image. What am I doing wrong below? Also, image paths are all correct. I have checked many times.
my accordian:-
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
css
Am I giving the CSS Class names incorrectly or what ????
#denis..its still not displaying the images..cant find the images in Firebug either
Firstly, I would suggest to take a look at Accordion sample page which lists all available properties along with their descriptions. You'll notice that the Accordion also exposes HeaderSelectedCssClass property - this is where you set a style for the collapsed state. So, you could re-write your markup like so:
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler"
HeaderSelectedCssClass="accordionHeader toggler-expanded"
ContentCssClass="accordionContent">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
And for CSS:
<style type="text/css">
.accordionHeader {
cursor: pointer;
margin-top: 10px;
margin-left: 20px;
}
.toggler {
background: url('../../images/arrow-collapsed.png') no-repeat left center transparent;
}
.toggler-expanded {
background: url('../../images/arrow-expanded.png') no-repeat left center transparent;
}
.accordionContent {
margin-top: 10px;
margin-left: 20px;
}
</style>
And please remove all those scripts.