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>
Related
I'm working on updating checkbox inputs to use the styles from the US Web Design Standards. However, I've ran into an issue when trying to update the checkboxes in pages still within our .NET app that have the runat="server" attribute.
Without the runat="server" attribute, the checkboxes render as in https://standards.usa.gov/components/form-controls/. With the runat="server" attribute, only the square outline renders and clicking on it does nothing - it doesn't change the background to blue, nor does it insert the checkmark svg.
Any help in understanding what is going on in order to make the styles work with runat="server" will be greatly appreciated.
This is the.NET code
<fieldset class="fieldsGroup standardFieldsGroup termsAndConditions"
runat="server" id="termsAndConditions">
<legend><span class="uppercase small">Terms & Conditions</span></legend>
<div class="formField fieldTypeCheckbox authorized">
<input type="checkbox" runat="server" id="idAuthorized"
name="authorized" class="authorized gs-input"/>
<label for="idAuthorized" class="gs-input">I am authorized by this
organization to update the information on their Page
</label>
<span class="validators">
<span id="idAuthorizedValidator" class="displayHidden">You must be
authorized to update the information on this organization's
Page Form</span>
</span>
</div>
<div class="formField fieldTypeCheckbox acceptTerms">
<input type="checkbox" runat="server" id="idAcceptTerms"
name="acceptTerms" class="acceptTerms gs-input" />
<label for="idAcceptTerms" class="gs-input">I agree to X's <a
id="aTermsAndConditions" href="https://x.org/terms-of-
use" target="_blank" class="black-link underline">Terms and
Conditions</a>
</label>
<span class="validators">
<span id="idAcceptTermsValidator" class="displayHidden">You must
agree to the X Terms and
Conditions
</span>
</span>
</div>
</fieldset>
The following is the CSS
input.gs-input {
//webkit-appearance: none;
//-moz-appearance: none;
//appearance: none;
border: 0.1rem solid #5b616b;
border-radius: 0;
box-sizing: border-box;
color: #212121;
display: block;
font-size: 1.7rem;
height: 4.4rem;
line-height: 1.3;
margin: 0.2em 0;
max-width: 46rem;
padding: 1rem 0.7em;
width: 100%;
}
label.gs-input {
position: relative;
left: 30px;
}
input.gs-input[type="checkbox"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
input.gs-input[type=checkbox] {
position: absolute;
left: -999em;
}
.lt-ie9 [type=checkbox], .lt-ie9
[type=radio] {
border: 0;
float: left;
margin: 0.4em 0.4em 0 0;
position: static;
width: auto;
}
[type=checkbox] + label.gs-input {
cursor: pointer;
font-weight: 400;
margin-bottom: 0.65em;
}
[type=checkbox] + label.gs-input::before {
background: #ffffff;
border-radius: 2px;
box-shadow: 0 0 0 1px #757575;
content: '\a0';
display: inline-block;
height: 2rem;
line-height: 2rem;
margin-right: 0.6em;
text-indent: 0.15em;
vertical-align: middle;
width: 2rem;
position: absolute;
left: -30px;
}
[type=checkbox]:checked + label.gs-input::before {
background-color: #0071bc;
box-shadow: 0 0 0 1px #0071bc;
}
[type=checkbox]:checked + label.gs-input::before {
background-image: url("../img/correct8.png");
background-image: url("../img/correct8.svg");
background-position: 50%;
background-repeat: no-repeat;
}
[type=checkbox]:disabled + label.gs-input {
color: #d6d7d9;
}
[type=checkbox]:focus + label.gs-input::before {
outline: 2px dotted #aeb0b5;
outline-offset: 3px;
}
[type=checkbox]:disabled + label.gs-input::before {
background: #f1f1f1;
box-shadow: 0 0 0 1px #aeb0b5;
cursor: not-allowed;
}
I did a bit of research based on #wazz comment above regarding setting ClientIdMode="Static" in the web.config file. I did not want to affect the entire application, however; just the specific inputs. I came across this blog
https://weblogs.asp.net/scottgu/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series
It mentioned that clientIdMode="Static" could be applied to individual elements. I modified the inputs as shown below and it solved my problem.
<input type="checkbox" clientIdMode="Static" runat="server" id="idAuthorized" name="authorized" class="authorized"/>
Sorry not really an answer; have to post here so i can add an image.
I'm not having trouble with this, but it did take a while to deal with the checkboxes and labels being off the page.
I'm sure you've covered this but just in case, make sure you're accessing the right element. The checkbox is left: -999em; and the label is -30. I took those off just so i could see them and got this (after creating the image and putting it in the right place).
I think it would be worth trying Static. Static will render the id you use on the page, AutoID "concatenates the ID values of each parent naming container with the ID value of the control."
I am trying to change the background of a div after clicking a button. this are the codes.
Div I want to change color:
<div id="example1" runat="server">
</div>
and CSS for it:
#example1 {
position: absolute;
z-index: 5;
top:0;
background-color: orange;
width: 310px;
height: 34px;
color: white;
border-radius: 4px;
}
I want to change it to this:
#example2 {
position: absolute;
z-index: 5;
top:0;
background-color: red;
width: 380px;
height: 38px;
color: white;
border-radius: 4px;
}
I tried to write some code at Page.aspx.cs
example1.CssClass = "example2";
but looks like CssClass is not a function of the div. how can I add it? or whats a way to do it on C#?
You don't have to go back to server, in order to change the color of your div. This can be done solely on client by writing a simple script:
var example1 = document.getElementById("example1");
example1.addEventListener("click", function(){
this.className = "example2";
});
.example2 {
position: absolute;
z-index: 5;
top:0;
background-color: red;
width: 380px;
height: 38px;
color: white;
border-radius: 4px;
}
<div id="example1" runat="server">
sample text
</div>
Important Note
In your case, since your div is a server side control, (runat="server"), the id that is generated before the page is sent to the client is not example1. So in the script I presented above we have to make a change:
var example1 = document.getElementById("<%= example1.ClientID%>");
For this answer, I will assume based on your code that you will be handling the click event on the back end.
The issue is your CSS is targeting the elements by id but you are trying to assign a CSS class by name.
First, change your div to use the class by name:
<div id="example1" class="example1" runat="server">
</div>
(The name of the class is your choice. I just used the same for simplicity)
Then change your CSS classes to NOT target an id:
.example2 {
position: absolute;
z-index: 5;
top:0;
background-color: red;
width: 380px;
height: 38px;
color: white;
border-radius: 4px;
}
Notice the period (.) instead of the hash (#).
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 need to do a lot of divs inside other divs, and I can't seem to understand what is the problem with my code, so the divs do not get the height of the divs below the- and everything is a mess!
my aspx code:
<div class="tabcontent">
<div class="tabcontent-inner">
<div class="tabcontent-inner-left grid_20">
</div>
<div class="tabcontent-inner-right grid_20">
</div>
</div>
</div>
my stylesheet css:
.tabcontent-inner {
width: inherit;
padding: 10px 10px 10px;
margin-top: 10px;
margin-bottom: 1px;
position: relative;
display: block;
}
.tabcontent-inner-left {
padding: 20px 20px;
border-left: solid 1px #ddd;
width: 45%;
float: left
}
.tabcontent-inner-right{
padding: 20px 20px;
border-right: solid 1px #ddd;
width: 45%;
float: right
}
Basically, I want the tabcontent-inner div to get the height of what is inside of it.
this is because on parent .tabcontent-inner you need to put overflow:auto property so that it will cover ups its children's height
you can find more suitable answer here How do you keep parents of floated elements from collapsing?
Add this code to Your CSS
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
and
change
<div class="tabcontent-inner">
to
<div class="tabcontent-inner clearfix">
Semi colons are missing in the css after
float : left
and
float : right
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