I have two model popup windows in my project. When i clcik a search button first modul popup will popp in the window. This model popup have option to view details. When i click on it i need another popup to pop and show details.
Now problem is when i click on the view option the second popup is coming behind first popup and its not visible.
What may be the mistake i have done
if (e.CommandName.Equals("View"))
{
ModalRearrangement.Show();
ModalViewDocument.Show();
}
In the above code ModalRearrangement is the first popup.
Update
CSS
.modalBackground
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #3CB371;
border-radius: 12px;
padding:0
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .footer
{
padding: 6px;
}
This is common css for both popup.
Add This To your HTML in Popup Div
Give z-index : 990 To First Pop up
And z-index : 9990 To Second Pop up
Related
I am creating an Windows phone application which is rendering html content on web browser.
I have a css file where i need to alter some values which are in a special format.
Following is an example of my data, where you can see a number of '.position-page{n}-{n}'
style tags there includes 3 properties in each margin left ,right & top.
</style><style type='text/css'>
.position-page2-1 {
margin-right: 180px;
margin-left: 180px;
margin-top: 280px;
}
.position-page2-2 {
margin-right: 350px;
margin-left: 150px;
margin-top: 20px;
}
.position-page2-3 {
margin-right: 180px;
margin-left: 220px;
margin-top: 80px;
}
.position-page2-4 {
margin-right: 180px;
margin-left: 220px;
margin-top: -20px;
}
.position-page2-5 {
margin-right: 350px;
margin-left: 140px;
margin-top: -10px;
color: #5ED6FB;
}
.page2-2 {
font-size: 20px;
text-align: justify;
line-height: 25px;
}
.page2-3 {
font-size: 15px;
text-align: justify;
line-height: 20px;
}
.page2-4 {
font-size: 15px;
text-align: justify;
line-height: 20px;
}
.page2-5 {
font-size: 20px;
text-align: justify;
line-height: 25px;
}
</style>
We are getting this style text as response from a 3rd party service.
As per our requirement i need to reduce margin's value to some percentage. Suppose if 150px is the margin i want replace it by 30px , i need to replace each margin value in to currentmargin/5 px.
What is the best way to do this?
Is that possible for you to use viewport scale?
In that case you should not change anything in css at all.
<meta name="viewport" content="width=320, initial-scale=1">
Here is more info about design adaptation, provided by Microsoft:
Managing the Windows Phone Browser Viewport
I'm not able to align the label and Ajax Rating Control in a single line.
Code is,
<label class="Informlabel" style="font-size: 13px; font-weight: bold; float: left;
width: 100%; overflow: auto; display: block; vertical-align: top;">
Rating :</label>
<asp:Rating ID="Rating1" runat="server" MaxRating="5" CurrentRating="0" CssClass="ratingStar"
StarCssClass="ratingItem" WaitingStarCssClass="Saved" FilledStarCssClass="Filled"
EmptyStarCssClass="Empty" AutoPostBack="false">
</asp:Rating>
Here is the css of Rating tool
li
{
clear:both;
margin-bottom:1em;
border-bottom:1px solid #eee;
}
/* ****************** RatingStar ****************** */
.ratingStar
{
white-space:nowrap;
margin:1em;
height:17px;
vertical-align:top;
}
.ratingStar .ratingItem {
font-size: 0pt;
width: 20px;
height: 16px;
margin: 0px;
padding: 0px;
display: inline-block;
background-repeat: no-repeat;
cursor:pointer;
}
.ratingStar .Filled {
background-image: url(Images/Rating/Selected.gif);
}
.ratingStar .Empty {
background-image: url(Images/Rating/Empty.gif);
}
.ratingStar .Saved {
background-image: url(Images/Rating/Hover.gif);
}
Can you Help me out ??
It's because you have display:block on your label, it should be display: inline-block; same for the output of Ajax Rating Control
On my Master page, I have created a Horizontal menu, styled by CSS. The list items show panels with link buttons on them to take users to different pages.
The Panels always show above controls, except for one page.
The content of the page shows 2 asp:Buttons. On this page, the panel gets hidden behind the buttons, but the border for the panel still shows.
The image below will illustrate clearly:
The CSS for the horizontal menu is as follows:
/* Horizontal menue style */
ul
{
padding: 0;
margin: 0 0 0 0 ;
list-style: none;
}
li
{
cursor: default;
float: left;
position: relative;
width: 90px;
color: darkgray;
text-align: center;
background-color: white;
height: 23px;
padding-top: 2px;
}
li:hover {
background-color: white;
color: black;
padding-top: 2px;
}
li ul
{
display: none;
position: absolute;
margin: 0;
padding: 0;
margin-top: -9px;
width: 100px;
}
li > ul
{
top: auto;
left: auto;
}
li:hover ul, li.over ul
{
display: block;
}
The panel goes through a skin file:
<asp:Panel runat="server" CssClass="menuWrapper" SkinID="MenuWrapper"></asp:Panel>
.menuWrapper
{
z-index: 500;
font-size: small;
margin-top: 15px;
margin-left: -2px;
padding: 5px;
padding-left: 15px;
line-height: 25px;
background-color: white;
width: 190px;
text-align: left;
border-left: 1px lightgray solid;
border-bottom: 1px lightgray solid;
border-right: 1px lightgray solid;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
Ive even fiddles with the z-index. How can I create a solution.
The answer lies in the z-index of the UL.
I have changed the UL css to the following:
ul
{
padding: 0;
margin: 0 0 0 0 ;
list-style: none;
z-index: 499;
}
Which has now fixed the issue.
This is what I have and it is not being centered. It's all the way to the left for some reason.
<div>
<asp:Label ID="eagleReplicationManagerLabel" runat="server" CssClass="eagleReplicationManagerLabel">
Eagle Replication Manager
</asp:Label>
</div>
css for it:
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
}
It is actually working but you couldn't see the result because it is rendered as a span which takes the exact width of its content. So the text didn't have enough space to adjust.
Increasing the width in your css style will show you why
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
width:500px;
}
The text-align: center; needs to be on the <div> that contains the label.
the text is centered but is is an inline element so it is only as wide as the text inside.
That is why you can't tell that it is centered.
Give it some width or make it block and you will see the centering.
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
display:block
}
The problem here is that asp:Label is rendered as a span on html and span elements are, by default, styled with display:inline; as a result, your CSS class does nothing.
If you want to center the text in the DIV, set the text-align:center on the DIV or set display:block on .eagleReplicationManagerLabel
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
display:block;
}
.center{
width:200px;
margin:auto;
}
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
}
<div>
<div class="center">
<asp:Label Text="Eagle Replication Manager" ID="eagleReplicationManagerLabel1" runat="server" CssClass="eagleReplicationManagerLabel"></asp:Label>
</div>
</div>
I have a sitemap in my project i did some changes and then the sitemap lost its appearance and its appearing like this.
And what I have in another site is like this..
Both of them are using the same style sheet. Even I tried copying from one to another but when i paste it then it will loose its design color. I don't know what's wrong. I checked the config file and other project properties but doesn't seems like working.
I'm using Visual Studio 2010 SP1 and .Net framework 4.0 in both cases
Code for the Menu control(Which is same in both):
CSS :
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:white;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #F87431;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #F87431;
color: #cfdbe6;
text-decoration: none;
}
Your CSS targets a list but old versions of .NET render the menu as a table - see if you have this setting somewhere in your Web.Config
controlRenderingCompatibilityVersion=3.5
This tells .NET to render controls the old way via tables so your CSS will not be applied - remove that and it should render as UL/LI tags and your styles will now work.