I have a piece of code that is wrapped in a css class, the problem is that there is one particular line there that needs to be in the <span> but does not need the css class. How can I tell it to not take that css? for that line
<span id="myPrice" class="Price" runat="server">
<uc:CustomMessage ID="mPrice" MessageKey="myMsg" runat="server" /> //does not need css
<span ><asp:Literal ID="litPrice" runat="server" /></span>
</span>
So as you can see the second line, we dont want the css applied to it.. but it needs to be within that "myPrice" span.
Is there a way to achieve this?
Thank you
From a design standpoint it would be better to move the styling to the inner <span> instead, but if that's not possible you could probably exclude it like this:
.Price:not(input[type="button"]) { color:red; }
The above excludes buttons, but you can replace this with whatever element you need. Here's a more detailed reference:
http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/
Give your user control its own CSS class, and specify rules that undo the effect of Price.
<uc:CustomMessage CssClass="noStyles" ID="mPrice" MessageKey="myMsg" runat="server" />
Then, have a rule called noStyles that undoes any effects of Price.
Can you apply the css rule just to the first line ?
#myPrice #mPrice { your rule }
Related
enter image description here
how to design the top right box in bootstrap with 4 rows and 2 columns.
I try grid design and try to give border but i cant able to do it . Can anybody help with this .
Ok, so the way to think of this is like playing with blocks.
you can float a block left, then add more blocks.
Do you want that block placed just next to the previous block, or a new line?
so, say these 3 blocks:
Just start placing "blocks" (each block is a "div") on the page.
I have this:
<div id="block1" style="border:solid;width:30em;padding:25px">
<h2>Block1</h2>
<div style="padding:5px;text-align:right">
<p>Hotel Name: <asp:TextBox ID="HotelName" runat="server" /></p>
<p>First Name: <asp:TextBox ID="FirstName" runat="server" /></p>
<p>Last Name: <asp:TextBox ID="LastName" runat="server" /></p>
<p>City: <asp:TextBox ID="City" runat="server" /></p>
<p>Province: <asp:TextBox ID="Province" runat="server" /></p>
Active: <asp:CheckBox ID="Active" runat="server" />
</div>
</div>
<div id="block2" style="border:solid;width:20%">
<h2>Block2</h2>
</div>
<div id="block3" style="border:solid;width:20%">
<h2>Block3</h2>
</div>
So, really, we want some content on the left side, but a block on the right!
So, lets float block 1 to the right.
so:
<div id="block1" style="border:solid;width:30em;padding:25px;float:right">
And we now have this:
Now, I might say want block 1, and block 2 on the same line.
so. lets float block1 left, and block 2 left
<div id="block2" style="border:solid;width:20%;float:left">
<h2>Block2</h2>
</div>
<div id="block3" style="border:solid;width:20%;float:left">
<h2>Block3</h2>
</div>
And now we have this:
Hum, how about some space between block 2 and 3?
so, block 3, lets push it over a bit to the right,
(add some margin left).
<div id="block3" style="border:solid;width:20%;float:left;margin-left:20px">
we now have this:
So, really, just DUMP all that mumbo-jumbo about bootstrap columns, and just think of each "thing" you drop into a page as a block.
You drop blocks starts upper left.
(and float left)
Do you want the next block to the right of first block, or start a new line???).
So above, we have block 2, and 3
lets move block 3 down to line below - so:
<div id="block3" style="border:solid;width:20%;">
and now we have this:
However, I would for above put both block 2 and 3 into ANOTHER block, and float that left.
But, really, just think of your layout as groups of blocks.
Drop a block on a page.
Now, next block, do you want it on the same line (to the right of first block)?
If yes, then float left.
If no, and you want to start on next line?
Then don't float left, or better yet, a "new line" then I use
<div style="clear:both"></div>
Then start droppping more blocks.
So, I use the drop the blocks on the page. It VERY much like playing with children's play blocks, and this approach makes layout beyond easy.
Same goes for buttons. drag + drop in 2 buttons.
We have this:
<asp:Button ID="Button1" runat="server" Text="Button1" CssClass="btn"/>
<asp:Button ID="Button2" runat="server" Text="Button2" CssClass="btn"/>
and:
But, I want some space between the 2 buttons. So, just like I added margin-left to the block, lets do the same with the 2nd button.
So this:
<asp:Button ID="Button2" runat="server" Text="Button2" CssClass="btn"
style="margin-left:14px"/>
And now the buttons are like this:
(this tip saves all those crazy examples where people start intoduction of tables - don't do that!!!).
So start your form from upper left.
Start dropping in blocks - either to the right of the previous block, or next line.
And just float them, and use margain-left to space them out a bit.
Note only does the above work fantastic, but the page actually remains "responsive", and you don't need to learn bootstrap and all that jazz either.
So, you can well continue to drag + drop things onto a form in the designer, but to group and place things/controls where you want, think of using blocks (those floated divs).
Once you get the hang of this, you can quite much layout a page anyway you want, say I want that "thingy" on the right above as per example.
If you are using Asp.Net Web Forms, you must learn how to use css.
You have no direct control over the position of the controls.
ASP.NET ends up to be HTML and Javascript.
If you want to set the control on a specific position, you have to append a class to it.
Then style that class and determine its positioning using CSS.
If you are a c# novice, it is recommended that you use Winforms or Wpf, they can better drag and drop controls, that is, what you see is what you get.
Maybe you will like this reference link.
I have a asp label that I need to be able to change according to the code behind. How can I do this?
ASPX: (The first part works correctly only for "TestA#abc.com" and the second part dynamically changes the label (EmailLabel) according to the "if" statement in the code behind. How can I integrate these two so the label is mailto? Thanks.
<p>Email at TestA#abc.com.</p>
<p>Email at <asp:Label ID="EmailLabel" runat="server"></asp:Label>.</p>
Code Behind:
public changeLabel()
{
if (//Some Condition Here)
{
this.EmailLabel.Text = "TestA#abc.com";
}
else
{
this.EmailLabel.Text = "TestB#abc.com";
}
}
What you are trying to do there won't work. Label's render out as <span> tags, so it will never be "clickable". You want to do something more like this:
<p>Email at TestA#abc.com.</p>
<p>Email at <asp:LinkButton ID="EmailLabel" runat="server"></asp:LinkButton>.</p>
And then instead of changing the Text property, change the NavigateUrl property.
You could also use an HtmlControl, which is basically a standard HTML tag that you add the runat="server" attribute to.
<p>Email at <a id="EmailLabel" runat="server" href=""></a>.</p>
You would then be able to modify this <a> tag via server side code, the properties will be slightly different, but now you've got a real live anchor tag to work with.
This other SO question might also be helpful: How to launching email client on LinkButton click event?
<html>
<body>
<span id="foo"
onclick="document.getElementById('foo').innerHTML = 'never say never'"
>
Click Me!
</span>
</body>
</html>
For your Label, just remember that .Text is the server equivalent of .innerHTML so you can put whatever HTML you want right into the asp:Label when setting .Text. Just watch out for cross-site-scripting exploits.
I was trying to display lblName1 and lblName2 only if they have text. Even when i dont have any value for lblName2, the break still has an impact. Can someone please advice me if there is any other way to display or conditionally display
<asp:Label ID="lblName1" runat="server" Visible= "false" ></asp:Label> <br />
<asp:Label ID="lblName2" runat="server" Visible= "false"> </asp:Label>
Thanks in advance..
Give the label a CSS class name and set the margin for that class:
<asp:Label ID="lblName1" CssClass="Testing123" runat="server" Visible= "false" ></asp:Label> <br />
.Testing123{ margin-bottom: 20px; }
If the Label is not rendered then no gap will be created.
You might consider adding a litteral to handle the br and this way play with its visibilty :
<asp:Literal runat=server Id=C_lit_Br><br /></asp:Literal>
with in your codebehind :
if (!lblName2.Visible)
C_lit_Br.Visible=false;
It is a quick patch, but it should work.
It is better to use literal in that case:
In literal text you also write html in it
wrap the labels in p tags:
<p><label1></p>
<p><label2></p>
Going with what you have and ignoring using any code behind changes, you can use some css to provide a break without using a <br /> tag.
By this, I mean if you were to give your <label> controls a css class, class="labelStyle
.labelStyle{
float: left;
clear: left;
}
Your html produced would look like
<span class="labelStyle">Some Text</span><span class="labelStyle">More Text</span>
If there is no value in the Labels, then your html would contain two empty span tags.
This will move the 2nd label onto the next line. However this may not fit in with the rest of your html, and because you are floating elements, then your overall layout might break.
An example is here http://jsfiddle.net/2v93f/
I am using a button that has to be invible and should be used by a javascript function.
<asp:Button ID ="btnDummy1" runat="server" Visible ="true" OnClick="btnSubmit1_Click" width="0px" height="0px"/
I cannot keep visible = false as it the javascript will not use invible content in the poage. I havetried to give width=0 and height=0, still it showws up in Chrome. What do you guys think i should do?
Thanks in advance :)
A pretty clean approach in ASP.Net it give it a "hidden" class:
<asp:Button ID ="btnDummy1" runat="server" CssClass="hidden" />
Then in your stylesheet:
.hidden { display: none; }
If you set it to Visible="False" then the code will not be executed.
Instead I think you should wrap it in a <div> and set display:none via css:
<div style="display: none;">
<asp:Button ID ="btnDummy1" runat="server" OnClick="btnSubmit1_Click" />
</div>
adding style="display:none" would hide the button till you make it visible again
<asp:Button ID ="btnDummy1" runat="server" OnClick="btnSubmit1_Click" style="display:none"/>
How about
style="display:none"
for the button instead of Visible = "true".
Can you just use a hidden form field in this case? This is generally the preferred method of passing information along.
See http://www.tizag.com/htmlT/htmlhidden.php
<asp:Button ID="btnMyOrders" runat="server" Text="my orders" CssClass="dropdown-item" OnClick="btnMyOrders_Click" Visible="False" />
Example then in Form(){
btn.Visible = true; to show it again
}
I think the first question you should ask yourself is : why would I put in my HTML doc a button that should not be visible ?
An HTML document should be used ONLY TO DESCRIBE A CONTENT'S SEMANTICS. So an HTML doc should ONLY contain the content you want to publish and extra data to explain the content's SEMANTIC !! NOTHING about the way it is displayed, NOTHING about the way it behaves !!
All displaying and behaviors questions should be managed with CSS and Javascript, NEVER within HTML itself.
Any element needed for Javascript only purpose should be added in the doc by Javascript itself !
You should never find, in an HTML doc, such things as prev/next buttons for a javascript picture gallery for example. The HTML doc should only contain the pictures list, than your JS script will change the way this list is shown, making it a eye candy gallery and add buttons for navigation.
So in your example, your saying you want to add in your HTML doc an invisible button with some Javascript actions on it.... that's probably an example of some content that should never be in the HTML doc.
public string BannerText {get;set;}
public void SetBanner()
{
BannerText = "This is line 1. \nThis is line 2."
}
in the aspx page I am setting it like this:
<div>
<h1><%: Model.BannerText %></h1>
</div>
However, the text still shows up in a single line. I have tried <br /> and <br> as well but that doesn't seem to work. I am sure it has to be something simple, but need SO help :)
EDIT:Kirk Woll and Mike suggestion worked!
use: <h1><%= Model.BannerText %></h1>
First, \n will absolutely not work. This is HTML. You do need to use <br /> (or wrap them in <div>, etc.). However, the purpose of <%: (as opposed to <%=) is to HTML-encode your string. So presumably your line breaks (<br />) are being encoded. You should try <%= instead and see if that fixes your issue.
What is "<%:"? I haven't seen that before. Have you tried "<%="? That will use an HTMLTextWriter to pass the string to render. Then just use HTML (<br />) in your string.