As you know, in ASP.NET, there is a simple space between the button and textbox. I want to remove this space and put them besides each other directly without any space. How to do that?
My CSS file:
.input, .button {
margin:-10px 0px 0px 0px;
}
My ASP.NET code:
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" CssClass="button" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" CssClass="input" runat="server"></asp:TextBox>
</div>
</form>
And when I rendered it in IE 8 Browser, nothing happened. I don't know why. Any help?
That has less to do with ASP.NET and more to do with the default CSS values a browser applies to the elements on the page.
That being said, adding a CSS rule of...
input, button {
margin:0;
}
should work...
EDIT:
If you don't want to use margins, make sure you do not add a line return in your markup:
<asp:Button ID="Button1" CssClass="button" runat="server" Text="Button" /><asp:TextBox ID="TextBox1" CssClass="input" runat="server"></asp:TextBox>
That line return gets rendered as a space by most browsers.
Otherwise, something like this works: http://jsfiddle.net/a4TPt/
Your layout details would be helpful. But I think margin: -5 0 0 0 on the control on right side should work for what you are looking for. You need to adjust -5 to correct value as per your needs.
Related
I am using Visual Studio 2015 to create a ASP.NET web site. I have a DIV that is hidden by default and I am trying to display it if the user checks a check box. I am wondering if there is a way using C# to immediately display the DIV as soon as the user checks the box. I can't seem to find a way to recognize the change in state without the form being first submitted. I can easily achieve this using JavaScript however this is for a uni assignment and requires functionality to be implemented in C#.
This is the HTML for the checkBox:
<form id="form1" runat="server">
Limit Stations To My Location<asp:CheckBox ID="limitOptions" runat="server" onClick="toggleOptions()" />
<br /><br />
<div id="locationOptions" runat="server" hidden="hidden">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
<asp:Button ID="updateList" runat="server" Text="Button" OnClick="updateList_Click"/>
</div>
Any help would be greatly appreciated.
You can do this with C# in code behind. Add a OnCheckedChanged event to the CheckBox and set the AutoPostBack to true and handle the change. Note that a Panel becomes a div in HTML.
<asp:CheckBox ID="limitOptions" runat="server" OnCheckedChanged="limitOptions_CheckedChanged" AutoPostBack="true" />
<asp:Panel ID="locationOptions" runat="server" Visible="false">
Radius (KM) <asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</asp:Panel>
However this causes a PostBack, so just using JavaScript could be a better option.
<asp:CheckBox ID="limitOptions" runat="server" onclick="toggleOptions()" />
<div id="locationOptions" runat="server" style="display: none">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</div>
<script type="text/javascript">
function toggleOptions() {
var id = '#<% =locationOptions.ClientID %>';
if ($(id).css('display') == 'none') {
$(id).slideDown('fast', function () { });
} else {
$(id).slideUp('fast', function () { });
}
}
</script>
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;
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.
I have 2 views. The last control on view1 is txtName & the first control on view2 is txtAge. Need to change the focus from txtName to txtAge on TAB press, but I fail to acheive this.
ASPX:
<asp:Multiview ID ="multiview1" runat="server" ActiveViewIndex="0">
<asp:view ID="view1" runat="server">
<asp:Textbox id="txtName" runat="server"
onfocusout="SetFocus('<%=txtAge.ClientId%>');"></asp:TextBox>
</asp:view>
<asp:view ID ="view2" runat="server">
<asp:Textbox id="txtAge" runat="server" ></asp:TextBox>
</asp:view>
</asp:Multiview>
JS:
function SetFocus(controlId){
/*alert(controlId);*/
document.getElementById(controlId).focus();
}
When I check the alert, it shows <%=txtAge.ClientId%> in the popup. Where is this going wrong.
Here is my new finding:
This code works well when the target control is in the same view, but when it is in another view, then it doesnt. So I think, something else should also be done to change the view first and then worry about the focus:
<asp:Textbox id="txtName" runat="server"
onfocusout="SetFocus();"></asp:TextBox>
function SetFocus(){
document.getElementById('<%=txtEmail.ClientID%>').focus();
/* txtEmail is in the same view 'view1' as in txtName */
}
You can try setting it in server-side code:
txtName.Attributes["onfocusout"] = String.Format("SetFocus('{0}');", txtAge.ClientId);
Perhaps it is sufficient to use tabindex
http://msdn.microsoft.com/en-us/library/ms178231%28v=vs.100%29.aspx
that uses build in features rather then javascript.
if you use asp.net 4.x you can use clientidmode=static
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
<asp:Multiview ID ="multiview1" runat="server" ActiveViewIndex="0">
<asp:view ID="view1" runat="server">
<!-- other controls -->
<asp:Textbox id="txtName" runat="server" TabIndex="1"/>
</asp:view>
<asp:view ID ="view2" runat="server">
<asp:Textbox id="txtAge" runat="server" TabIndex="2"/>
<!-- other controls -->
</asp:view>
</asp:Multiview>
edit
if you do not mind using jQuery. You can wrap a div around <asp:View.. and then do something like:
$("div.view input:last-child").on("change", function(){
$(this).parent().next().find("input:first-child").focus();
});
please keep in mind that this is pseudo code. It is just an idea.
Try this and see if it's any better.
<asp:Textbox id="txtName" runat="server"
onfocusout='<%= String.Format("SetFocus(\"{0}\");", txtAge.ClientId) %>'></asp:TextBox>
It is not possible to set an attribute using an inline block in that situation... as you can see you are getting the literal <%=txtAge.ClientId%> text, and you are not getting the processed value that you are expecting.
You have two obvious solutions...
The first one (which Yuriy has already given you in his answer) is to set it from the code behind...
txtName.Attributes["onfocusout"] = String.Format("SetFocus('{0}');",
txtAge.ClientId);
(Disclaimer, I don't know what the MultiView is, as I've never used it, so I'm not 100% sure the 2nd option below will actually work in your scenario. Also, it is untested code.)
The other is to use what Murali provides in his answer, but with additional manipulation...
<asp:Textbox id="txtName" runat="server" onfocusout="SetFocus(this);" />
function SetFocus(nameCtrl) {
var ageId = nameCtrl.id.replace(/txtName/,"txtAge");
var ageCtrl = document.getElementById(ageId);
ageCtrl.focus();
}
Change line onfocusout="SetFocus('<%=txtAge.ClientId%>');"></asp:TextBox>
as onfocusout="SetFocus('txtAge');"></asp:TextBox>
You don't need to send ClientId
Every time I include a dropdown menu, my css layout mess up. Can someone explain to me why and how to fix it?
Here is my code:
<asp:Label ID="projnamelbl" runat="server" CssClass="editlabels" Text="Project Name"></asp:Label>
<asp:TextBox ID="projnametxt" runat="server"></asp:TextBox><br />
<asp:Label ID="paymentlbl" runat="server" CssClass="editlabels" Text="Payment Type:"></asp:Label>
<asp:DropDownList ID="paymentype" runat="server">
<asp:ListItem Text="Cash" Value="cash"></asp:ListItem>
<asp:ListItem Text="Intallments" Value="installments"></asp:ListItem>
</asp:DropDownList><br />
<asp:Label ID="projsumlbl" CssClass="editlabels" runat="server" Text="Project Sum:"></asp:Label>
<asp:TextBox ID="projsumtxt" runat="server"></asp:TextBox><br />
CSS:
.editlabels {
float:left;
width:150px;
margin-right:0.2em;
padding-top:0.4em;
padding-left:20px;
text-align:left;
font-weight:bold;
}
Anything that goes after the dropdown menu goes to the right for some reason.
Only if you remove your margin and padding things would automatically fall in place.
You need to put position: relative on the main container then on any sub ones use position: absolute