I am having a few style issues with an accordion, when the screen is rendered the accordion is displayed properly, however whenever the expanded pane is changed the bottom of the last accordion pane is hidden.
The accordion is stored in a content placeholder within a master page, the content placeholder on the master page is within a div with no height specified.
EDIT - It seems the accordion is calculating its height incorrectly, so when using the developer toolbar in IE you can see the accordion height automatically updates whenever the tab is changed, incorrectly.
When the screen is rendered -
After clicking on a different pane -
The HTML is -
Page with the issue -
<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolderMain">
<h2 style="width: 836px">Manage Fields</h2>
<br />
<cc1:Accordion ID="uxAccordion" runat="server" SelectedIndex="2">
<Panes>
<cc1:AccordionPane ID="pane1" runat="server" ContentCssClass="accordionContent" HeaderCssClass="accordionHead" BorderStyle="Solid" BorderWidth="1" BorderColor="Black">
<Header>
<h3>> Custom Categories</h3>
</Header>
<Content>
<div class="accordionInnerContainer">
<uc1:CustomCategories ID="CustomCategories1" runat="server" />
</div>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="pane2" runat="server" ContentCssClass="accordionContent" HeaderCssClass="accordionHead" BorderStyle="Solid" BorderWidth="1" BorderColor="Black">
<Header>
<h3>> Custom Fields</h3>
</Header>
<Content>
<div class="accordionInnerContainer">
<uc2:CustomFields ID="CustomFields1" runat="server" />
</div>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="pane3" runat="server" ContentCssClass="accordionContent" HeaderCssClass="accordionHead" BorderStyle="Solid" BorderWidth="1" BorderColor="Black">
<Header>
<h3>> Custom Help</h3>
</Header>
<Content>
<div class="accordionInnerContainer">
<uc3:CustomHelp ID="CustomHelp2" runat="server" />
</div>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</asp:Content>
Master Page -
<body class="onecol">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="bodyContainer">
<div id="headerContainer">
<uc2:UserPanel id="UserPanel1" runat="server"></uc2:UserPanel>
<uc3:PrimaryNav ID="PrimaryNav1" runat="server" />
</div>
<div id="mainContainer">
<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="subNav">
<p> </p>
</div>
<div id="sideContainer">
</div>
<div id="footer">
<uc1:footer ID="Footer1" runat="server" />
</div>
</div>
</form>
</body>
Css -
body{font: 72% arial,sans-serif;text-align:center}
div#bodyContainer{text-align:left;width:900px;margin:0 auto;background-color:#FFF;}
div#headerContainer{background:url(../images/headerbackgrad.jpg) repeat-x;height:116px;}
div#mainContainer{float:left;width:100%}
div#contentContainer{margin: 0 470px 0 0}
div#subNav{float:left;width:150px;margin-left:-700px}
div#subNav{display:none;}
div#sideContainer{float:left;width:400px;margin-left:-420px}
div#footer{clear:left;width:100%}
div#mainContainer{min-height:400px;_height:400px;}
.accordionHead
{
padding: 1px;
font-weight:bold;
background-color:#ceeffe;
border-bottom: 1px solid black;
}
.accordionContent
{
}
.accordionInnerContainer
{
width: 850px;
padding-left: 5px;
}
Thanks in advance for any help.
Found a solution, setting the following on the accordion sorts the problem -
AutoSize="Limit"
Related
I've got an AdRotator set up in the typical way (I think), with an xml file like so:
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>Images\Space3.jpg</ImageUrl>
<NavigateUrl>https://www.amazon.com</NavigateUrl>
</Ad>
<Ad>
<ImageUrl>Images\eatAtJoes.jpg</ImageUrl>
<NavigateUrl>https://www.gutenberg.org</NavigateUrl>
</Ad>
. . .
<Ad>
<ImageUrl>Images\thisSpace4Rent.png</ImageUrl>
<NavigateUrl>https://www.wikipedia.org</NavigateUrl>
</Ad>
</Advertisements>
...and am adding it to my html like so:
<div class="container">
<div class="row">
<div class="col">
<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/AdRotatorLeft.xml" />
</div>
. . .
I'm thinking this should keep the AdRotator images within that column, but they spill out over the whole page - into the middle column and the right column, also:
The images/ads should remain within the black rectangle. Why is the image/"ad" overflowing the div it's placed in, and how can I force it to remain within bounds?
UPDATE
I have the same exact problem when I change out the AdRotator for a Hyperlink:
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://www.amazon.com/Still- Casting-Shadows-Shared-History/dp/0595397247/">
<asp:image runat="server" ImageUrl="images/EatAtJoesCaptioned.png" /><br />
<asp:Label runat="server" Text="Some Text"></asp:Label>
</asp:HyperLink>
</div>
</div>
. . .
Please share more html wand try to what you try to acheive. But like what you made row > col > row is useless, based on what I see. Just staop by what you made first. Then to fix img width, you need to add classes like: mh-100 mw-100 or:
style="max-width:100%; max-height:100%;"
This way your image will respect your container.
So based on your last update, I would recommand that you try this:
<div class="container">
<div class="row">
<div class="col">
<div class="row mx-0">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://www.amazon.com/Still- Casting-Shadows-Shared-History/dp/0595397247/">
<asp:image style="max-width:100%; max-height:100%;" runat="server" ImageUrl="images/EatAtJoesCaptioned.png" /><br />
<asp:Label runat="server" Text="Some Text"></asp:Label>
</asp:HyperLink>
</div>
</div>
...............
I have an asp menu, I want to float it to left so the element after it can come to its right side (beside) it. I've set a CssClass for the Menu and added float: leftto it, but it is not working. I've even changed the float:left to float:right to see if it will work or not, but nothing worked.
Here is my code:
<form id="form1" runat="server">
<div class="wrapper">
<div class="navbar">
/*some code*/
</div>
<div class="middle">
<asp:Menu ID="MenuRec" runat="server" CssClass="recFriends">
<Items>
<asp:MenuItem Text="People you may know:" Selectable="false" Enabled="false"></asp:MenuItem>
<asp:MenuItem Text="<br/>" Selectable="false" Enabled="false"></asp:MenuItem>
</Items>
<Items>
<asp:MenuItem Text=" Item1" Selectable="false"></asp:MenuItem>
<asp:MenuItem Text=" Item2" Selectable="false"></asp:MenuItem>
<asp:MenuItem Text=" Item3" Selectable="false"></asp:MenuItem>
</Items>
</asp:Menu>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<!--here goes the customized content-->
</asp:ContentPlaceHolder>
</div>
<div class="footer">
</div>
</div>
</form>
</body>
My CSS:
.recFriends {
float:left;
padding-top:1em;
color:#003366;
font-weight:normal;
font-style:italic;
}
controls inside the ContentPlaceHolder (which will be in a page that inherits from this master page) must come to the right of the menu, but these are coming below it instead.
I've searched a lot, but nothing worked, I've even checked the solutions available here:
CssClass is not working for my asp menu - all code attached
asp Menu control not floating properly
Can anyone tell me how to solve this problem?
Thank you.
Wrap your menu in a div and close the div before the content place holder. Move your CSS class from the menu to the container div.
HTML
<div class="recFriends">
<asp:Menu ID="MenuRec" runat="server">
<Items>
<asp:MenuItem Text="People you may know:" Selectable="false" Enabled="false"></asp:MenuItem>
<asp:MenuItem Text="<br/>" Selectable="false" Enabled="false"></asp:MenuItem>
</Items>
<Items>
<asp:MenuItem Text=" Item1" Selectable="false"></asp:MenuItem>
<asp:MenuItem Text=" Item2" Selectable="false"></asp:MenuItem>
<asp:MenuItem Text=" Item3" Selectable="false"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<!--here goes the customized content-->
</asp:ContentPlaceHolder>
CSS
.recFriends {
float: left;
padding-top: 1em;
color: #003366;
font-weight: normal;
font-style: italic;
width: 20%;
padding-left: 2em;
}
I have been working on creating a website for a family company. It is mostly created, however I cannot get it to work in Chrome or Safari. Specifically, the links to go from page to page do not work. When clicking on the tabs on the left side, or the logo at the top, you should be directed to a different page. This works perfectly on IE. However, they do not work at all in the other 2. I have looked and looked and can't find a reason why. If anybody could help, it would be greatly appreciated.
I realize that the tabs are not uniform in Chrome or Safari as they are in IE. That is just not as important an issue to fix at the moment.
Here is the HTML for one of the pages so you can see what I have done and where I have messed up.
<!DOCTYPE html>
<html>
<head>
<title>
BERK Consulting LLC
</title>
<style type="text/css">
a:link {color:white; }
a:visited{color:white; }
a:hover {color:white; }
body {background-color:#F2E8DE}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;">
<p style="font-size: 18pt; text-align: justify; padding-top: 200px; padding-left: 200px;">
BERK was founded on the desire to remove the bureaucracy, complexity, and hidden agendas from consultancy. When you deal with BERK, you’re dealing directly with the expertise, not a salesperson or a subcontracting agency. <br /> <br />
Our down-to-earth approach combined with extensive 'in the seat' supply chain expertise allows us to advise you on key supply chain evolution decisions, allowing you to maintain focus on managing your business. <br /> <br />
We have eliminated the green beans from our team so that we can establish sustainability in your team and at an affordable rate.
</p>
<p style="text-align: right; font-size: 20pt;"> <strong>
...Securing the Last Piece® <br />
<img src="http://berkllc.com/images/LinkedIn2.png" alt="Follow Us" style="float:right;" width="150px" />
</strong> </p>
</div>
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;">
<img src="http://berkllc.com/images/BERKPic1.jpg" alt="BERK" />
<p style="font-size:11pt; padding-top:50px; ">
<span style="font-family:'Copperplate Gothic Bold'; ">
Home <br /> <br />
Who We Are <br /> <br />
What We Do <br /> <br />
Who We've Helped <br /> <br />
Our Network <br /> <br />
What Are You Missing <br /> <br />
Contact Us <br />
</p>
</span>
</div>
<div id="blank" style="width:100%; padding-top:1px;">
</div>
<div id="Legal1" style="background-color:#1F497D; position: absolute; padding-top:125px; width:994px; text-align:center;">
<table id="Legal2" border="0" style="border-collapse:collapse; font-size:8pt; color:white; margin-left: auto; margin-right: auto;" cellpadding="10px">
<tr>
<th style="cursor: pointer;" onclick="location.href='index.html'">
Home
</th>
<th style="cursor: pointer;" onclick="location.href='BERKContactUs.html'">
Contact Us
</th>
<th style="cursor: pointer;" onclick="location.href='BERKDisclaimers.html'">
Legal Disclaimers
</th>
<th style="cursor: pointer;" onclick="location.href='BERKTrademark.html'">
Trademark/Privacy
</th>
<th style="cursor: pointer;" onclick="location.href='BERKSitemap.html'">
Site Map
</th>
</tr>
</table>
<p style="text-align:center; font-size:6pt; color:white;">
© 2009 BERK Consulting, LLC. All Rights Reserved.
</p>
</div>
</body>
</html>
This is sloppy but add
z-index: 900;position: relative;
to the style for:
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;z-index: 900;position: relative;">
and add
z-index: 1;
to the styles for
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;z-index: 1;">
On an unrelated note I would recommend giving this site or this site a visit if you want to learn good practices and style for html/css/javascript.
The problem is that your "Main" div is covering up the links. And just as I start typing this, I'm called away. In any case, do not trust IE to do this right. Trust Chrome first.
I am using the jQueryUI library to take advantage of tabs on my page and the CSS styles of the tabs are being applied to the content within the div tags.
When I use the Chrome Developer tools I have narrowed it down to the following CSS classes in in the jquery-ui.css class:
.ui-widget {
/*font-family: Verdana,Arial,sans-serif;*/
font-size: 1.1em/*{fsDefault}*/;
}
.ui-widget .ui-widget {
font-size: 1em;
}
How do I remove these CSS styles from my div content containers. I tried the following jQuery snippet and it did not work.
$("#nameSearch").removeClass("ui-widget");
Here is a snippet of my HTML page:
<div id="searchTabs">
<ul>
<li>Name</li>
<li>Case Number</li>
</ul>
<div id="nameSearch">
<b>First Name:</b> <asp:TextBox ID="txtFirstNameSearch" runat="server" CssClass="txt" /><br />
<b>Last Name:</b> <asp:TextBox ID="txtLastNameSearch" runat="server" CssClass="txt" /><br />
<b>Date of Birth:</b> <asp:TextBox ID="txtDateOfBirth" runat="server" CssClass="txt" /><br />
</div>
<div id="caseNumberSearch">
<b>Case Number:</b> <asp:TextBox ID="txtCaseNumberSearch" runat="server" CssClass="txt" /><br />
</div>
</div>
If you know the position of those CSS rules, then:
IE
document.styleSheets[0].removeRule(i);
//i = position of the rule.
Other Browsers
document.styleSheets[0].deleteRule(i);
when I'm using my phone to test the app, I use the back device button to show the previous page this is working with all the pages except one page that shows a not styled page when trying to get to the pervious page so there somthing Odd. Here a briefe explanation.
there is 3 page #main_menu , #first_map , #second_map
when I'm into the #second_map page it should go to the #first_page when I press back button
but actually its showing the #main_menu page with not css styling.
could you plz tell me what is the problem an how we can fix it thank you in advance .
I provide the source code :
this is the main_page
</div>
<h2 id="thx_msg" style="margin:0 auto;"></h2>
<div class="grid2">
<div class="first" id="search_btn">
<div>
<img src="images/loupe.jpg"/>
<div>
</div>Search for a Spot</div>
</div>
<div class="second" id="submit_spot_btn">
<div>
<img src="images/spot.jpg"/>
</div>
<div>Submit a spot</div>
</div>
</div>
<ul style="margin:0 auto;" class="spaced_list" style="widht:280px;" >
<li><input type="button" data-role="none" value="Account info" class="btn" style="margin:0 auto;" id="main_page_account_info"/></li>
<li><input type="button" data-role="none" value="Log Out" class="btn" style="margin:0 auto;"id="main_page_log_out"/></li>
</ul>
</div>
here is the first_map page is named spot_page
<div data-role="page" id="spot_page" data-theme="b">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div id="search_form_holder" style="margin:0px 25px" >
<p class="center" style="font-size:16px;font-weight:bold;">
Search for a Spot
</p>
<ul class="some_space" style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;
width:280px;">
<li><input type="text" id="address_zip" class="field black" placeholder="Address/Zip Code"/></li>
<li id="to"></li>
<li><input type="button" data-role="none" style="width:200px;margin:15px auto;" id="search_spot_btn" class="btn" value="Search for a Spot"></li>
</ul>
<div id="hidden_scroller" style="display:none">
<select id="distance" name="Within">
<option value="1">1 Mile</option>
<option value="3">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>
</div>
</div><!-- search form -->
<div id="first_map" style="width: 100%;
height: 247px;border:1px solid black;margin:0 auto">
</div>
</div><!-- split view -->
and finally the second map here :
<div data-role="page" id="nearby_page">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div class="second_header">Spots nearby</div>
<div id="map" style="width: 100%;
height: 398px;border:1px solid black;margin:0 auto">
</div>
</div>
As you can see the pages are separate from each other.
I have a last question could a navigation plugin help to fix the problem like jquery history plugin and thanks for your help.
Make sure to have your pages on different separate pages. If not these kind of errors will occur. Mostly, you will encounter abnormal navigation error. That is what I have experienced in my experience.
BTW, you should show more of your code for people here to help you out.
Update
PhoneGap and Android's back button do behaves odd. What I have done in my application is disabled the back button and given the soft back button on the top header. Simple history.back() will do the magic for back buttons.
You can disable as follows.
$(function(){
document.addEventListener("deviceready", onDeviceReady, false);
})
// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
console.log("Back button pressed but nothing happened");
}
Anyway this is my approach. You may choose to be different.