my Obout calendar working fine but there seems to be a problem as the month scroller is not visible, after some trial and error i have found the cause of the problem to be one line in my asp css styling in the head however i cannot remove that line as it will cause problems with the rest of my website.
here is the line that is cause in the problem table-layout: fixed;
it is located in the head:
<style type="text/css">
#form1
{
text-align: center;
}
td { overflow: hidden; }
table { padding: 0px;
table-layout: fixed;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
margin-right: 0px;
text-align: left;
}
.style54
{
width: 1158px;
border-collapse: collapse;
}
.style73
{
width: 99%;
margin-left: 0px;
}
...............
here is my Obout calendar :
<table border = "1" ><tr> <td> Date :
<ASP:TextBox runat="server" id="txtDate" />
<obout:Calendar ID="Calendar2" runat="server"
CultureName="en-GB"
DatePickerMode = "true"
TextBoxId = "txtDate"
Align="Under" DatePickerImagePath = "images/icon2.gif" >
</obout:Calendar>
</td></tr></table>
how can i use my calender without the table-layout: fixed; line interfering?
thanks
Have you try to override table-layout:fixed in the Obout CSS?
Related
Textbox and button not aligned properly
Hi everyone, I'm facing problem here that my textbox and the button couldn't align properly. I tried to adjust the margin including margin top and margin bottom, they still stay exactly the same location. I am clueless on what's wrong here. Can you please help me?
Asp.Net:
<asp:Panel HorizontalAlign="center" runat="server">
<asp:TextBox ID="SearchTextBox" runat="server" placeholder=" Search your item here." CssClass="textbox"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" OnClick="SearchOnClick" CssClass="button-add" />
</asp:Panel>
Css:
.textbox {
border: 1px solid #848484;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 25px;
outline: none;
margin-bottom:10px;
height: 25px;
width: 350px;
background-color: #ede6e6;
}
.button-add {
background-image: url(../Images/button_searchSmall.gif);
background-size: auto;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
margin-top:20px;
color: transparent;
background-color: transparent;
outline: 1px;
border: none;
}
Add display: inline-block; vertical-align: middle; in .button-add and .textbox see here
Instead of using margin-bottom in the textbox class, you can use margin-bottom in the button-add class. That way x amount of margin will be left under button-add and then your textbox can come. Dont put any margin command in the textbox class.
Hope this helps!
I'm having issues centering an ASP menu, it is 100% of the time aligning to the left of the window. I have it enclosed in a Div, and then nested in another Div.
I can get it to align right if I have the nested Div to float:right. I've been reading on including !important to override some styles from other divs that may be causing this Header div to not align properly.
CSS
body {
}
#Header
{
width: 100%;
height: 40px;
font-family: Calibri;
text-align:center !important;
}
#LeftColumn
{
font-family: Verdana;
font-size: small;
text-align: left;
float: left;
padding-top: 20px;
padding-left: 2%;
width: 19%;
height: 250px;
}
#MainContent
{
font-family: Verdana;
font-size: medium;
padding-top: 20px;
width: 79%;
height: 250px;
float: right;
text-align: center;
position: relative;
}
#Footer
{
font-family: Verdana;
font-size: x-small;
color: white;
padding-left: 20%;
width: 79%;
height: 15px;
float:
}
Default.aspx
<div id="Header">
<div style="text-align:center !important">
<asp:Menu ID="Menu" runat="server" Orientation="Horizontal" >
<Items>
<asp:MenuItem Text="MenuItem1" Value="MenuItem1">
<asp:MenuItem Text="Test1" Value="Test1" />
<asp:MenuItem Text="Test2" Value="Test2" />
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
Asp:Menu alignment depends on "dir" attribute of parent element which is "ltr" by default.
Set dir="rtl" attribute on a parent element for asp:Menu right alignment, for example:
<div dir="rtl">
<asp:Menu>
</asp:Menu>
</div>
I have a asp:Button, I used css styles with cssClass property in asp:Button, but those styles are not working.
This is my asp button:
<tr>
<td>
<div class="form_row">
<asp:Button ID="ButtonSend" CssClass="BtnSend" runat="server" Text="Send" OnClick="ButtonSend_Click" />
</div>
</td>
</tr>
This is my CSS:
.BtnSend {
width: 53px;
height: 24px;
display: block;
float: right;
margin: 0 0 0 10px;
background: url(../../Images/contact_bt.gif) no-repeat center;
text-decoration: none;
text-align: center;
line-height: 24px;
color: #fff;
}
If I'm not wrong, I should use something like this:
input[type="submit"]
{
//css coding
}
but I don't know where to put it and how to affect only this button.
Based on your comment, add/change this in your css:
.BtnSend {
border: none;
background: transparent url(../../Images/contact_bt.gif) no-repeat center;
}
What I'm trying to do is make a list item visible when the Admin logs in within the navigation section. I am unable to use the AD so I can use roles so I'm using SQL server to to control which users have access to what. I found a way to make the list item visible once that admin logs in, but to do so, I had to use runat="server" within the unordered list. Once I use this, the css formatting that I use for the navigation is no longer. How am I able to fix this problem and achieve what I would like to do? This is my code within the master page..
<section runat="server" id="login">
<asp:LoginView id="loginview" runat="server" ViewStateMode="Disabled">
<LoggedInTemplate>
<p id="paragraph">
Welcome,
<asp:LoginName ID="loginName" runat="server" CssClass="username" />
</a>!
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/Account/Login.aspx" />
<ul runat="server" id="menu">
<li>Dashboard</li>
<li><a runat="server" href="~/DeliveredDeals.aspx">Delivered Deals</a></li>
<li><a runat="server" href="~/DealTracking.aspx">Deal Tracking</a></li>
<li><a runat="server" id="allUsers" href="~/Users.aspx" visible="false">Users</a></li>
</ul>
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
This is how I have it set up. Once I remove the runat="server" from the <ul> I'm no longer able to view the new list item (allUsers) but the formatting is back. Any suggestions are appreciated. Thanks you.
Here is the css..
/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login a.username {
background: none;
margin-left: 0px;
text-decoration: underline;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover {
color: #333;
text-decoration: none
}
Since you use runat="server", the ID will be modified via ASP.NET resulting in your css issue. You should change your ul to use a class instead of styling it based on the id.
<ul runat="server" class="menu">
<!--Html-->
</ul>
Css:
/* menu
----------------------------------------------------------*/
ul.menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul.menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul.menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul.menu li a:hover {
color: #333;
text-decoration: none
}
If you add runat="server" ASP.NET will add a prefix to your ID which will most likely break the CSS
For Example :
If you place your element in <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"><asp:Content>
It will change <ul runat="server" id="menu"> to <ul id="MainContent_menu">
So check the page source then adjust your CSS.
You could also consider using a css class instead of and ID for that purpose. Then you don't have to worry about .NET adding names to the style setting part of your element dynamically, thus making the css easier to deal with.
Should look something like this in other words:
<ul runat="server" class="menu">
<li>lorem ipsum</li>
</ul>
All of the objects on the screen are centered with the exception of the CrystalReportViewer.
Does the CrystalReportViewer not work with CSS?
Here's my CSS class that I'm using for this part of the page:
.reportForm {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
The report is all the way to the left of the screen, I just want to center it.
Again, all other controls are centered on the screen.
The report is also embedded on a paragraph tag.
Here's the actual control:
<form runat="server" class="reportForm">
<p>
<CR:CrystalReportViewer ID="crvSchedules" runat="server" AutoDataBind="True" DisplayStatusbar="False" EnableDatabaseLogonPrompt="False" EnableDrillDown="False" EnableParameterPrompt="False" EnableTheming="False" EnableToolTips="False" HasCrystalLogo="False" HasDrilldownTabs="False" HasDrillUpButton="False" HasGotoPageButton="False" HasPageNavigationButtons="False" HasSearchButton="False" HasToggleGroupTreeButton="False" HasToggleParameterPanelButton="False" HasZoomFactorList="False" Height="1153px" ToolPanelView="None" Width="868px" GroupTreeImagesFolderUrl="" ToolbarImagesFolderUrl="" ToolPanelWidth="200px" HasExportButton="False" HasPrintButton="False" />
</p>
</form>
This is the ENTIRE CSS file:
.reportForm {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 0.8em;
font-weight: 600;
padding: 6px;
margin-right: 8px;
width: auto;
}
I couldn't figure out what the issue was with this so I just put the report in a table and centered it.