Element size inside div - c#

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;
}

Related

How to hide Literal in Codebehind within a ListView

I currently have a panel within a listview, displaying a bunch of literals. There is a column I need to hide in the codebehind of the page. How would I go about this? The panel that contains these literal fields has UpdateMode on always.
<div class="col-md-2 col-sm-3 col-sm-offset-0 col-xs-4 col-xs-offset-0 col-md-offset-0 text-truncate ">
<p class="key">
<asp:Literal ID="Literal4" runat="server" Text='' />
</p>
<p class="text-truncate">
<asp:Literal ID="Literal7" runat="server" Text=' <%# Eval("Status") %>' />
</p>
</div>
If you are aiming to hide them from the view, you can use the code behind as displayed in this answer
Literal4.Visible = false;

How to get panels/classes side by side in ASP.NET?

This is the problem I am having:
How my page looks on firefox
and How my page looks on chrome
What I want to do is get reserve form and data source forms side by side. I have already set a class using the fieldset method but can't figure out what to use to have it side by side.
Using this for data sources form
.tables
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
and using this for Reserve Form
.mreg
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
Just want two get the two forms side by side.
Edit -
Asp.net coding for Reserve Form:
<asp:Label ID="lblerrormsg" runat="server" Text="Error Message" Visible="False"></asp:Label>
<fieldset class="mreg">
<legend>Reserve </legend>
<asp:Label ID="Label2" runat="server" Text="Reserve ID" Font-Bold=true></asp:Label>
<br />
<asp:TextBox ID="txtRID" runat="server" Height="18px" Width="213px"></asp:TextBox>
<%--<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtLID" ErrorMessage="Loan ID Required"></asp:RequiredFieldValidator>--%>
<br />
<br />
<br />
</fieldset>
Coding for data source form:
fieldset class="tables">
<legend>Data Sources </legend>
<asp:Label ID="Label6" runat="server" Text="Reservation Table" Font-Bold=true></asp:Label>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AutoGenerateDeleteButton="True"
DataKeyNames="Reservation_ID" DataSourceID="SqlDataSource1" BorderStyle="Dotted">
</asp:SqlDataSource>
</fieldset>
</asp:Content>
Is there anything wrong with the code?
You should give float:left to float to the left of screen and get side by side. Also it is not a good practice to give width as px as screen sizes vary.
.tables
{
width:48%;
border-color:Black;
float:left;
display:block;
height:500px;
}
.mreg
{
width:48%;
border-color:Black;
float:left;
display:block
height:500px;
}
You have multiple css options that you could use. As one:
float:left;
...will allow the divs to effectively "float" to the left side of their container, which will solve your problem. However, floats are problematic for a number of reasons, and there are often better options. For example, you can consider taking advantage of the "display" css property, such as:
display: inline-block;
This would also display your divs in a horizontal fashion, and tends to behave more consistently and with fewer problems. There are more options for the "display" property, though, which is worth looking into -- a good overview of some of the options can be found here:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

how to access fieldset control in c#

I have below code:
<fieldset id="preFacts">
<div id="divstructures" runat="server" style="width: 100%;">
<div id="divleft" runat="server" style="width: 48%; float:left">
<label>Desk:</label>
<asp:TextBox ID="txtDesk" runat="server"> </asp:TextBox>
<label>Desk2:</label>
<asp:TextBox ID="txtDesk2" runat="server"> </asp:TextBox>
</div>
<div id="divright" runat="server" style="width: 48%; float:right">
<label>Desk3:</label>
<asp:TextBox ID="txtDesk3" runat="server"> </asp:TextBox>
<label>Desk4:</label>
<asp:TextBox ID="txtDesk4" runat="server"> </asp:TextBox>
</div>
</div>
</fieldset>
CSS:
fieldset#preFacts label
{
width: 20em;
}
now in c# if condition = true i want to display divright(new controls) along with divleft(existing controls) or if condition = false then i want to display divleft(existing controls) always in center using above css(fieldset#preFacts label).
how can i set width: 10em;(fieldset#preFacts label) when the condition is true in c#(dynamically) so that both div's display properly left and right.
fieldset is not a control but an HTML tag. You can use
<fieldset id="preFacts" runat="server">
to make it visible to ASP.NET.
You could implement a multiview or set the CSS in your code-behind when the page is loaded.
Also, you could take divright in your code-behind and set its style to display:none; When your condition is met. See here https://www.google.com/url?sa=t&source=web&rct=j&url=https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.style(v%3Dvs.110).aspx&ved=0CB8QFjABahUKEwjptP3HlcfHAhWG1RoKHclpDV8&usg=AFQjCNEJS7adTj2Jh1eFqMPU0IcmOa8qNw
Yet, you might consider to move your intention away from server side code. Processing your requirements via client code is the better approach today.
First off, I'd avoid your inline styles. They will generally take precedence over any other class you apply, which makes it more difficult to work with. Also note that the IDs you're setting on server controls may change unless you also set ClientIDMode="Static", which might prevent your CSS from being applied correctly.
I'm not completely sure what you're trying to achieve, but here's one approach to make the 'left' side take up the whole fieldset if your condition is false, or half the width if true:
CSS:
Here, I'm setting a few classes, rather than depending on IDs.
.divstructures { width: 100%; }
.divfalse { width: 100%; }
.divleft { width: 48%; float: left; }
.divright { width: 48%; float: right; }
ASPX:
This is using an asp:Panel control instead of the inner divs. There are many other approaches you could take:
<fieldset id="preFacts">
<div id="divstructures" runat="server" style="width: 100%;">
<asp:Panel id="divleft" runat="server">
<label>Desk:</label>
<asp:TextBox ID="txtDesk" runat="server"> </asp:TextBox>
<label>Desk2:</label>
<asp:TextBox ID="txtDesk2" runat="server"> </asp:TextBox>
</asp:Panel>
<asp:Panel id="divright" CssClass="divright" runat="server">
<label>Desk3:</label>
<asp:TextBox ID="txtDesk3" runat="server"> </asp:TextBox>
<label>Desk4:</label>
<asp:TextBox ID="txtDesk4" runat="server"> </asp:TextBox>
</asp:Panel>
</div>
</fieldset>
C#:
Here the panel style and visibility is set based on your condition:
...
bool condition = true; // or whatever way you need to set this value
...
divright.Visible = condition;
divleft.CssClass = condition ? "divleft" : "divfalse";
...
You may need to tweak the CSS to get the exact effect you're looking for.

<asp:PlaceHolder> is not showing on iphone

I have a code in my master page that I used placeholder to show and hide 2 different parts.It is completely works fine in all the Browsers, but it is not working on Iphone Even it is working on Android.
this is my code:
<div class="actions">
<asp:PlaceHolder ID="phLogout" runat="server">
<input TYPE="button" VALUE="Log Out" class="Button Orange" onclick="window.location.href = 'Logout.aspx'">
</asp:PlaceHolder>
<asp:PlaceHolder ID="phLogin" runat="server">
<p class="Title">Current users sign in:</p>
<asp:TextBox runat="server" ID="username" holder="Username"></asp:TextBox>
<asp:TextBox runat="server" ID="password" holder="Password" TextMode="Password"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Log In" class="Button Orange" OnClick="btn_login_Click" ></asp:Button>
<p class="Forgot">Forgot password?</p>
</asp:PlaceHolder>
</div>
I just found out that this part is not showing in the iphone with all the content inside the .
what I can use instead of tag?
I tried but all the styling gets off. Is the only tag replacing this so I may work more on style sheet or you are suggesting something else? Or even if the reason for not showing is the ?
I believe the "holder" attribute in your textboxes should be "placeholder" instead.

display:none; on a Placeholder?

I have a placholder that I dont just want to use Visible="false" on, becouse it reserv some space on the page. I dont want the space reservation. How can I do that? Maybe use somethingels?
<asp:DataList ID="ImageList" runat="server" RepeatDirection="Horizontal" EditItemStyle-VerticalAlign="Top"
RepeatColumns="4">
<ItemTemplate>
<asp:PlaceHolder ID="phImage" runat="server" Visible="false">
<div class="prodImagesBorder"> "SOME STUFF with auto length and width"
<div class="prodImages"> "SOME STUFF"
<div class="thumbnail"> "SOME STUFF"
</div>
</div>
</div>
</asp:PlaceHolder>
</ItemTemplate>
</asp:DataList>
Codebehind:
if(ImageTabel.Rows[i]["ImgUrl"].ToString() != lblOldImgUrl.Text)
{
PlaceHolder phImage = (PlaceHolder)ImageList.Items[i].FindControl("phImage");
phImage.Visible=true;
}
A PlaceHolder does not render a tag - it's just a container for other server controls. So there's no tag on which you can set display:none.
elements with the CSS style display:None will take up no space. if you apply it to div.prodImagesBorder, it should completely hide that element.

Categories

Resources