I have the same behavior from many similar questions here.
But I tried anything and nothing happens to me.
I have 2 html controls. One anchor tag and a input button.
I applied vertical-align:top; float:right; display:inline-block; independently and together and nothing happens.
When I click on Close, I see a shadow like a button! I want them inline both controls
At the end of table I incluided a Div like this.
<div style="float:right;">
<asp:Button ID="btnInput" runat="server" Text="Add selected"></asp:Button>Close
</div>
You need to set a width for each element when you make them display:inline-block, otherwise they default to 100%.
Here is a jsFiddle with the closest equivalent markup I could make. (asp buttons don't work)
As Dolchio said, every element must have display: inline-block for this to work. Note that your float:right will not achieve anything helpful in this scenario.
Try adding the CssClass attribute to the asp button and styling that class.
So it would look like <asp:Button ID="btnInput" runat="server" CssClass="myButton" Text="Add selected"></asp> and in your css myButton{display:inline-block,vertical-align: top, width: 200px substitute width for whatever the width of the button is (not entirely familiar with asp buttons and their implied widths).
Related
I'm attempting to add bootstrap style to an old application. One thing I have come across repeatedly is wanting to style an asp:DropDownList as a bootstrap dropdown.
I came across a SO post that said to use the form-control class. This actually works however it gives the control a width of 100% thanks to the form-control class which is taking priority over the grid's width.
I have been trying to figure out how to get it to prioritize the grid width, however I wonder that applying form-control is the wrong solution in the first place.
I would definitely prefer not to rewrite the asp:DropDownList using a button and ul as done in bootstrap examples b/c I would have to repeat this transformation a hundred times and it's simply not worth it.
Hum, you could add a width to the dropdownlist like this:
<asp:DropDownList ID="DropDownList1" CssClass="form-control" runat="server"
DataValueField="ID"
DataTextField="HotelName"
width="180px"
></asp:DropDownList>
I declared an picture in my ASP.NET and set it to hidden by default with style="visbility:hidden;". Is there anyway to access this image from the C# and change its visibility? Here is the img line from the ASP.NET:
<img src="canoe.png" alt="Boat Trailer" height="350px" width="600px" id="canoe" style="float:right; margin-right: 100px; visibility:hidden;" />
Use ASP:Image instead.
<ASP:Image id="myImage" Visibile="False" ImgUrl="link" runat="server">
Then you can access it in the backend with:
myImage.Visible = true;
If it is just server side to control the image visibility, just use,
<asp:Image ID="Image1" runat="server" Visible="false" />
You'll need to make this into a server tag first by adding runat='server' and an id. Then you can change its properties before the page loads like so:
<IMG ID>.Style["visibility"] = "visible";
replacing with the ID of your element.
Note about other answers: C# Visibility property will not change the CSS visibility but will actually remove or add the element, if you simply change that while the element is still set to visibility: hidden then it will still not be visible
Discalimer, this is an untested solution, you may have to check the syntax on the use of the Style property
Option 1
You can change it on the server side by adding an ID attribute and runat='server'.
Option 2
You can use an ASP.NET Image control and apply your changes there.
<asp:Image id="myimg" runat='server'.../>
HOWEVER, if you go with this option, you should still use CSS/Javascript to show/hide your image since setting Visible='false' on a server side control will prevent the HTML from rendering altogether which I doubt is the output your are expecting.
If you are performing this logic on the server side, why do you need to render the image as hidden? If you are showing the image based on user input then you should do it on client side Javascript.
I'm working with code someone else has written that I cannot change too much for now.
It has a table defined in the html, something like this:
<table id="tblResult">
some stuff defined in here.
</table>
I would like to use the behind code to make this table and all its contents invisible, but I notice I can't address the table directly as tblResult.visible in the code behind. This makes sense to me, since this is not an asp object. Simply changing this to an asp:table doesn't work, as there's some stuff going on inside that table I prefer not to mess with. Is it possible to address that table and set visibility to false from the behindcode?
Wrap it into a <asp:PlaceHolder> amd then toggle the placeholder visibility.
Add runat='server' to the tag. The other thing you can do is wrap it around a server side tag of div, panel, etc and set them to visible='false' Something to this effect:
<div id='myDiv' runat='server'>
<table id="tblResult">
//stuff
</table>
</div>
Then in your code-behind:
this.myDiv.Visible=False;
This will now ensure your table is not visible. Again you can use div's, panels (which are just divs really), literals, placeholders, etc.
You can wrap it in a Literal:
<asp:Literal runat="server" ID="Literal1" Visible="False">
<table> ... </table>
</asp:Literal>
I have set the attribute in my accordion AutoSize="None", even then when I click on some headers, scroll bars are being displayed. How do I get rid of these scroll bars for good?
please check my accordion code here
Accordian: Arrow image not displaying even though image path is correct
my accordion:
<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>
There is two ways to avoid the scrollbar.
To set overflow=hidden on the divs that you gets them http://www.w3.org/TR/CSS21/visufx.html#overflow
To set a little less size on the inner divs that show them. For example, set on the HeaderTemplate width=98%, so its always a little less and no see the scollbar. Why the less size is hide scollbar, because the scrollbar some times is made because the one div is too big to fit the father div, and the father div create scollbar to show it all.
hope this help.
I've got a very simple form with the following troubled snippet:
<asp:Panel class="normal" ID="Panel1" runat="server">
<strong><asp:Label ID="Panel1Error" class="error" Visible="false" runat="server"/></strong>
<label for="TextBox1"><em>*</em> Don't leave this blank</label>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:RequiredFieldValidator ID="TextBox1RFV" runat="server"
ControlToValidate="TextBox1" ErrorMessage="This field cannot be blank."
Display="None" />
<--- other validators --->
</asp:Panel>
There are two things I want to do when the page fails validation:
Change the style of Panel1 (to one which shows different colors to indicate an error). I was able to do this by calling Page.Validate in Page_Load, then iterating over Page.Validators, getting each validator's parent control, casting it to a Panel, then setting .CssClass Doesn't seem like a superb solution, but it got the job done - is there a better way?
I want to take whatever validation error(s) are thrown and put them in the Panel1Error label, as well as set it to visible. This is where I am a bit baffled. I thought at first I could possibly specify the Label in which a validator writes its ErrorMessage, but I had no such luck. If I just toss the validator inside the Label, its formatting messes up the entire layout of the page, regardless of whether I directly assign it the 'error' CSS class or just leave it in the Label.
Just to clarify, in production, I would be doing this process for multiple Panels on a page, each with one form element, preventing me from calling the Panels explicitly and just saying Panel1.CssClass, etc.
I would recommend a javascript solution. ASP.NET injects a global js variable called Page_Validators, which is an array of all of the validator spans on the page. I wrote about this on my blog. It's a different solution, but it should give you enough insight to get started.
Use ValidationSummary controls with a ValidationGroup for each panel.
Seems fine if it worked.
Use a ValidationSummary control. Or you can inherit from the controls and override the render event.