CSS:
#header_bar
{
background-repeat: repeat-x;
width:100%;
}
.langpnl
{
float:right;
padding-top: 2px;
padding-right: 0px;
position:relative;
width:45px;
height:16px;
font-size:7pt;
}
#imgLogo
{
width: 156px;
height: 42px;
}
<!-- header.ascx -->
<div id="header_bar">
<div align="center">
<a href="<%=AppPath%>" target="_parent" >
<img id="imgLogo" runat="server" src="~/images/UI/logo.jpg" border="0" /></a>
<asp:DropDownList ID="ddlLanguage" class="langpnl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged">
<asp:ListItem Value="">EN</asp:ListItem>
<asp:ListItem Value="es-ES">ES</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- /header.ascx -->
I am trying to align image in the center and dropdown box to the right top corner. Currently I am able to do it but the Image is slighty to the left. If I remove the dropdown box only then it gets in the center.
In the system browsers you cannot figure it out but this is a mobile website & in mobile view you can figure out the difference.
Here's one way to achieve what you're looking for:
http://jsfiddle.net/NzZak/
You could absolutely position the dropdown - DEMO
<!-- header.ascx -->
<div id="header_bar">
<div id="header_logo_holder">
<a href="<%=AppPath%>" target="_parent" >
<img id="imgLogo" runat="server" src="~/images/UI/logo.jpg" border="0" /></a>
<asp:DropDownList ID="ddlLanguage" class="langpnl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged">
<asp:ListItem Value="">EN</asp:ListItem>
<asp:ListItem Value="es-ES">ES</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- /header.ascx -->
CSS code for "header_logo_holder"
#header_logo_holder {
width: 156px;
margin:0px auto 0px auto;
}
Since your .langpnl has a position:relative it still takes up room in your positioning flow.
Try:
.langpnl {
position:absolute;
right: 0;
}
#header_bar {
position: relative;
}
#header_bar {
background-repeat: repeat-x;
width: 100%;
padding: 0;
margin: 0; /* New */
}
.langpnl {
float: right;
padding-top: 2px;
padding-right: 0px;
position: relative;
width: 45px;
height: 16px;
font-size: 7pt;
vertical-align: top; /* New */
}
#imgLogo {
width: 130px;
height: 35px;
text-align: center;
border:0px; /* New */
}
This solves that issue.
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'm using nopcommerce 3.80 for my site and wanted to use vertical full width slides on home page. I used Jssor slider jquery in place of nivo by editing my Nivo slider plugin. I'm able to see a vertical slider at homepage now, but it is giving a horizontal scroll bar and the image is not extending to full width instead it is giving white blank space in the right side. And also the scrollbar is making the page in the right side with white space and below the slider also. Please see the attached image for reference. Below also is the jssor slider plugin. Any help would be appreciated.
#model Nop.Plugin.Widgets.NivoSlider.Models.PublicInfoModel
#{
Layout = "";
Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jssor.slider-21.1.6.min.js");
#*Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jquery.nivo.slider.js");
Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/nivo-slider.css");
Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/custom/custom.css");*#
}
#using Nop.Web.Framework.UI
#helper RenderSliderLine(string pictureUrl, string text, string link, string dataTransition = "")
{
if (!string.IsNullOrEmpty(pictureUrl))
{
if (!string.IsNullOrEmpty(link))
{
<a href="#link">
<img src="#pictureUrl" data-thumb="#pictureUrl" data-transition="#dataTransition" alt="" title="#text" />
</a>
}
else
{
<img src="#pictureUrl" data-thumb="#pictureUrl" data-transition="#dataTransition" alt="" title="#text" />
}
}
}
<script type="text/javascript">
jssor_1_slider_init = function () {
var jssor_1_options = {
$AutoPlay: true,
$DragOrientation: 2,
$PlayOrientation: 2,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<style>
/* jssor slider arrow navigator skin 08 css */
/*
.jssora08l (normal)
.jssora08r (normal)
.jssora08l:hover (normal mouseover)
.jssora08r:hover (normal mouseover)
.jssora08l.jssora08ldn (mousedown)
.jssora08r.jssora08rdn (mousedown)
*/
.jssora08l, .jssora08r {
display: block;
position: absolute;
/* size of arrow element */
width: 50px;
height: 50px;
cursor: pointer;
background: url('~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/a08.png') no-repeat;
overflow: hidden;
opacity: .4;
filter: alpha(opacity=40);
}
.jssora08l {
background-position: -5px -35px;
}
.jssora08r {
background-position: -65px -35px;
}
.jssora08l:hover {
background-position: -5px -35px;
opacity: .8;
filter: alpha(opacity=80);
}
.jssora08r:hover {
background-position: -65px -35px;
opacity: .8;
filter: alpha(opacity=80);
}
.jssora08l.jssora08ldn {
background-position: -5px -35px;
opacity: .3;
filter: alpha(opacity=30);
}
.jssora08r.jssora08rdn {
background-position: -65px -35px;
opacity: .3;
filter: alpha(opacity=30);
}
</style>
<div class="slider-wrapper theme-custom" id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture1Url, Model.Text1, Model.Link1)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture2Url, Model.Text2, Model.Link2)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture3Url, Model.Text3, Model.Link3)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture4Url, Model.Text4, Model.Link4)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture5Url, Model.Text5, Model.Link5)
</div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora08l" style="top:8px;left:8px;width:50px;height:50px;" data-autocenter="1"></span>
<span data-u="arrowright" class="jssora08r" style="bottom:8px;right:8px;width:50px;height:50px;" data-autocenter="1"></span>
<script type="text/javascript">jssor_1_slider_init();</script>
</div>
I have a web application that has a menu bar on top of the page. This menu bar is showing fine in Internet explorer 9 however in chrome it is showing incorrectly. I don't really know how to make this css file a cross browser css file.
here is how it shows in IE.
and here is how it shows in chrome.
my css is as follows:
div.hideSkiplink
{
background-color: #796540;
width: 100%;
height: 56px;
margin: 0px 5px 20px 0px;
}
div.menu
{
padding: 1px 0px 1px 8px;
margin: 5px 0px 5px 0px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
and here is my page markup
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False"
IncludeStyleBlock="False" Orientation="Horizontal" BackColor="#F7F6F3" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#7C6F57" StaticSubMenuIndent="10px"
DataSourceID="SiteMapDataSource1" OnMenuItemDataBound="NavigationMenu_MenuItemDataBound">
</asp:Menu>
</div>
can somebody please help me?
try override default parameters of li paddings, li margins,hideskipling paddings
Try changing width: 100%; to something fix/constant. Alternatively, try reading this post http://fabenterprises.wordpress.com/2009/03/21/aspnet-menu-not-rendering-correctly-in-googles-chrome/
Sample string:-
<div class="ui-droppable" id="ParentDIV" style="width: 286pt; height: 212pt; background-color: #00752d; background-image: none;">
<div class="be-canvas-grid" style="background-image: none">
<div style="width: 200px; height: 50px; top: 77px; left: 162px; font-family: Arial; font-size: 12pt; color: rgb(0, 0, 0); overflow: hidden;" data-uid="2" class="be-component be-text ui-draggable ui-droppable">
<span>hello from simple text</span>
</div>
<div style="width: 161.567px; height: 39.5667px; top: 127px; left: 172px; font-family: Arial; font-size: 12pt; color: rgb(201, 87, 201); overflow: hidden;" data-uid="3" class="be-component be-text ui-draggable ui-droppable">
<span>{[C-FULLNAME:LC]}</span>
</div>
<div style="width: auto; height: auto; top: 196px; left: 216px;" data-uid="4" class="be-component be-image ui-draggable">
<img src="https://localhost/a/images/BarcodeType1.jpeg" data-qrstub="" alt="">
</div>
<div style="width: 200px; height: 50px; top: 6px; left: 12px; font-family: Arial; font-size: 12pt; color: rgb(201, 87, 201); overflow: hidden;" data-uid="5" class="be-component be-text ui-draggable ui-droppable">
<span>asd</span>
</div>
</div>
</div>
I want to pull the ParentDIV elements's style properties i.e. width and height. Then I want to update the width and height css properties with my values. The order of height and width properties in the style tag of ParentDIV may get changed also.
Please suggest the regex. I would be making this code changes in C#.net.
Regex expression can build with the help of online tool http://www.gskinner.com/RegExr/.
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>