I have found numerous references to this but still cannot get it to work.
Several people have pointed to a previous post from 7 years ago that has a similar sounding problem but as detailed below the solution for that does not work at all.
I have the following asp code:
<asp:CheckBox id="checkbox1" runat="server" Style="display:inline;"
AutoPostBack="True" Text="Send Emails" TextAlign="Right"/>
It displays like this:
If I go into the elements explorer in Chrome I see the following:
If I manually add the style attribute to the input line like this (using the Chrome Elements right click menu), it works:
What am I doing wrong and how can I fix this?
Update: This is the "solution" I wound up doing:
<div >
<input id="checkbox1" type="checkbox" name="checkbox1" style="display: inline"/>
<label for="checkbox1">I would like to receive periodic email</label>
</div>
While this works it is obviously just avoiding the question entirely by switching to a HTML control vs ASP.
There could be a solution. As asp:CheckBox creating three controls and the ID is checkbox1 try the css for ID's
#checkbox1
{
display:inline !important;
}
This should work properly.
Related
I have a problem with the trigger of the OnCheckedChanged. When I click the checkbox (switch toggle), the OnCheckedChanged is not firing. I already tried many solutions like trigger it in JS part but no luck.
Below is the checkbox code:
<input type="checkbox" data-toggle="toggle" data-onstyle="info" data-offstyle="secondary" data-on="Ja" data-off="Nee" data-size="xs" runat="server"
oncheckedchanged="showProductFoto_CheckedChanged" AutoPostBack="true"
style="margin-top: -5px;" runat="server" id="showProductFoto" onchange="IncludeWithoutPhotos(this)" ClientIDMode="Static"/>
Well, then get the css working for the check box, and then you back to using the standard asp.net controls - and they are a pure joy to use, and easy to use.
So, say I have this check box:
<asp:CheckBox ID="CheckBox1"
runat="server" Text="Confirm to send email"
OnCheckedChanged="CheckBox1_CheckedChanged" >
We get this ugly thing:
so, I can see your motivation to want to dump that ugly above.
but, a check box gets renderd as a html input (type = checkbox), and also puts in a label for you.
So, you can style it anyway you want.
Say, like this:
<style>
.bigcheck input {width:28px;height:28px;cursor:pointer;
box-shadow: 5px 5px 5px grey}
.bigcheck label {position:absolute;margin-left:15px;margin-top:10px}
</style>
<asp:CheckBox ID="CheckBox1" CssClass="bigcheck"
runat="server" Text="Confirm to send email"
OnCheckedChanged="CheckBox1_CheckedChanged" />
And now we get this:
so, you still have quite much unlimited css you can apply against that check box.
I've got a styling question on my hands. Using sensenet, a platform for ASP.net functionality, forms are done with not only sensenet language, but also ASP.net language as well.
I'm having a problem making the ASP:TextBox feature look like the bootstrap input box. I've called the bootstrap css file, tried changing the class for the ASP:TextBox code, but nothing works aside from just using the html tag of
<input class="text input-sm">
Here's the code I have so far:
<asp:TextBox CssClass="text input-sm" ID="InnerControl" placeholder="Middle Name" runat="server"></asp:TextBox>
.. and the css is being incoporated here:
<sn:CssRequest CSSPath="$skin/styles/Projectname/bootstrap.min.css" ID="pageTemplateUIStyleReq1" runat="server" />
Is there anyway to make the ASP:TextBox to look like the bootstrap input box but also function the way it's meant to function through ASP language?
Attached are images of the before and after-sought effects:
what I have now:
what I'm looking to attain:
The way you are adding the class to your textbox is correct. The problem is here:
<sn:CssRequest CSSPath="$skin/styles/Projectname/bootstrap.min.css" ID="pageTemplateUIStyleReq1" runat="server" />
Just add a normal reference to your stylesheet and don't try to load it server side. If your page requires this, check to ensure it is loading bootstrap correctly in your browsers dev tools.
How do I put a hint/placeholder inside a asp:TextBox? When I say a hint I mean some text which disappears when the user clicks on it. Is there a way to achieve the same using html / css?
The placeholder attribute
You're looking for the placeholder attribute. Use it like any other attribute inside your ASP.net control:
<asp:textbox id="txtWithHint" placeholder="hint" runat="server"/>
Don't bother about your IDE (i.e. Visual Studio) maybe not knowing the attribute. Attributes which are not registered with ASP.net are passed through and rendered as is. So the above code (basically) renders to:
<input type="text" placeholder="hint"/>
Using placeholder in resources
A fine way of applying the hint to the control is using resources. This way you may have localized hints. Let's say you have an index.aspx file, your App_LocalResources/index.aspx.resx file contains
<data name="WithHint.placeholder">
<value>hint</value>
</data>
and your control looks like
<asp:textbox id="txtWithHint" meta:resourcekey="WithHint" runat="server"/>
the rendered result will look the same as the one in the chapter above.
Add attribute in code behind
Like any other attribute you can add the placeholder to the AttributeCollection:
txtWithHint.Attributes.Add("placeholder", "hint");
Just write like this:
<asp:TextBox ID="TextBox1" runat="server" placeholder="hi test"></asp:TextBox>
<asp:TextBox runat="server" ID="txtPassword" placeholder="Password">
This will work you might some time feel that it is not working due to Intellisence not showing placeholder
Adding placeholder attributes from code-behind:
txtFilterTerm.Attributes.Add("placeholder", "Filter" + Filter.Name);
Or
txtFilterTerm.Attributes["placeholder"] = "Filter" + Filter.Name;
Adding placeholder attributes from aspx Page
<asp:TextBox type="text" runat="server" id="txtFilterTerm" placeholder="Filter" />
Or
<input type="text" id="txtFilterTerm" placeholder="Filter"/>
asp:TextBox ID="txtName" placeholder="any text here"
Even though "Text" property is set to Text=""
asp:TextBox MaxLength="256" runat="server" ID="passwordTxt" TextMode="Password" Text=""
I also tried this on Page_load :-
passwordTxt.Text="";
I am still seeing 5 dots in the Password text box..How to make it go away ? Why is it there anyway ? like why ?
[EDIT]
I was not able to see Bold, Code tag buttons when posting this ques..so couldnt include my code lines inside of code tags..whats wrong with this website ??
[EDIT2]
ok I can see the buttons now
It's probably the browser auto-populating for you. View the source, it will be empty.
To stop firefox auto prompting to save this data in a form, add the following property to the form tag
autocomplete="off"
i.e. :
form id="myForm" runat="server" autocomplete="off"
Here's an example of a regular standard HTML input for my radiobuttonlist:
<label><input type="radio" name="rbRSelectionGroup" checked value="0" />None</label>
<asp:Repeater ID="rptRsOptions" runat="server">
<ItemTemplate>
<div>
<label><input type="radio" name="rbRSelectionGroup" value='<%# ((RItem)Container.DataItem).Id %>' /><%# ((RItem)Container.DataItem).Name %></label>
</div>
</ItemTemplate>
</asp:Repeater>
I removed some stuff for this thread, one being I put an r for some name that I do not want to expose here so just an fyi.
Now, I would assume that this would or should happen:
Page loads the first time, the None radio button is checked / defaulted
I go and select a different radiobutton in this radiobutton list
I do an F5 refresh in my browser
The None radio button is pre-selected again after it has come back from the refresh
but #4 is not happening. It's retaining the radiobutton that I selected in #2 and I don't know why. I mean in regular HTML it's stateless. So what could be holding this value? I want this to act like a normal input button.
I know the question of "why not use an ASP.NET control" will come up. Well there are 2 reasons:
The stupid radiobuttonlist bug that everyone knows about
I just want to brush up more on standard input tags
We are not moving to MVC so this is as close as I'll get and it's ok, because the rest of the team is on par with having mixed ASP.NET controls with standard HTML controls in our pages
Anyway my main question here is I'm surprised that it's retaining the change in selection after postback.
This is a Firefox behavior.
Firefox will persist form values when you reload a webpage.
For example, if you go to StackOverflow's Ask Question page, enter some text, and reload the page, Firefox will remember the text, but IE will not.
If you re-request the page (as opposed to refreshing it) by pressing Enter in the address bar, the form will not be persisted.