I would like to be able to adjust the position of the map type control. I have it set to top right however I need to drop it by about 50 pixels. I read on custom controls you can pad the DIV, what about non custom controls? Can I extend the control?
Below is the HTML generated by the API for the control:
<div class="gmnoprint" style="margin: 5px; z-index: 11; position: absolute; cursor: pointer; text-align: left; top: 0px; right: 0px;">
<div style="width: 80px; position: relative; overflow: hidden; border: 1px solid black;">
<div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 0px 5px; font-weight: bold; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112) rgb(208, 208, 208) rgb(208, 208, 208) rgb(112, 112, 112);" title="Change map style">Map<img style="position: absolute; right: 4px; top: 4px; display: block;" src="http://maps.gstatic.com/intl/en_us/mapfiles/down-arrow.gif"></div>
</div>
<div style="border: 1px solid black; width: 80px; display: none;">
<div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show street map">Map</div>
<div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show satellite imagery">Satellite</div>
<div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show imagery with street names">Hybrid</div>
<div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show street map with terrain">Terrain</div>
</div></div>
As an interim solution I am using the following jquery code to alter the padding of this specific control:
$('[title="Change map style"]').parent().css('padding-top', '36px');
Far from ideal, but does the job in this case :/
One way to do it would be with JQuery, like Mat.E said over there, but instead of searching the Control by specific css style, an easy way would be to search the element with a class gmnoprint which has a child div containing the text 'Map' (which is the MapTypeControl that you're looking for)
$('.gmnoprint>div>div:contains("Map")').parent().parent().css('margin-left','35px');
We hacked this. With the help of jQuery we label elements with a class or id based on their custom style elements when the map is first created. This allows us to do stuff like ('.zoom_controls').css('top', '50px') to move the zoom controls down.
It's a hack that could break at any time but it works for us at v3.4. We'll revisit when it becomes an issue. I don't know why Google just don't put IDs in there.
Classes: https://gist.github.com/887917
IDs: https://gist.github.com/887918
Seems like you should be able to move this using some CSS (and maybe some JS). I visited http://maps.google.com and it looks like these controls have an ID ('lmc3d' in my case) and are positioned absolutely. Have you tried something like this in your style sheet:
#lmc3d{
top: 50px; /* adjust these two to move */
left: 50px;
}
You can do it with CSS only. Padding top only example:
#your_map_id_container .gm-style .gmnoprint{
margin-top: 100px! important;
}
#your_map_id_container .gm-style .gmnoprint .gmnoprint{
margin-top: 0px !important;
}
Related
When using text-decoration on a link, the child element (span) is not included, so then the underline doesn't extend:
a {
font-size: 36px;
text-decoration: underline dotted rgb(221, 221, 221);
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
.badge-dark {
font-size: 9px;
margin-left: 2px;
position: relative;
text-align: center;
top: -5px;
}
<a href="#">
My title is here
<span class="badge badge-dark">Special</span>
</a>
See fiddle
Is it possible for the span to be included or is text-decoration ignoring spans by design?
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration:
The text-decoration shorthand CSS property sets the appearance of decorative lines on text.
This means that the underline will be directly under the text in question and not under the element. If you zoom in enough, you will see the underline is actually under the word special
If you want to continue the line under special, perhaps you could use a pseduo element for your badge and add some non-breaking spaces for it to sit in:
a {
font-size: 36px;
text-decoration: underline dotted rgb(221, 221, 221);
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
.badge {
display: inline-block;
position: relative;
text-decoration: underline dotted rgb(221, 221, 221);
}
.badge-dark:after {
content: 'Special';
display: inline-block;
color: #ffffff;
background: #555555;
padding: 3px 5px;
border-radius: 5px;
font-size: 9px;
position: absolute;
text-align: center;
right: 5px;
top: 50%;
transform: translateY(-50%);
margin-top: -5px;
}
<a href="#" class="badge badge-dark">
My title is here
</a>
You can apply text-decoration to your span, however it will appear just under the span text and not inline with the preceding text. To make it inline you will need to make your span the same height as its parent container. Alternatively you can likely use a pseudo element (:before or :after) to put the line where you want it.
This happens because of the CSS specification that basicly say, you can't have text-decoration in inline block elements. If you span to also be affected by text-decoration, you must change the display:inline-block. Further information can be found in this question .
Just to show you , how it would work, if the span was being effected by the text-decoration, here is an example:
a {
font-size: 36px;
text-decoration: underline dotted rgb(221, 221, 221);
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
.badge-dark {
font-size: 20px;
margin-left: 2px;
position: relative;
text-align: center;
top: -5px;
}
<a href="#">
My title is here
<span class="badge badge-dark">Special</span>
</a>
Also, in the code you posted in SO, the text-decoration property is working properly, just not in the fiddle. If you want it to be equal through the whole link, try using border instead.
You can use border-bottom property instead of text-decoration.
also see that I have changed the a to an inline-block element.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
padding: 10px;
}
.title-link {
display: inline-block;
font-size: 36px;
border-bottom: 4px dotted rgb(221, 221, 221);
color: #000;
text-decoration: none;
}
.title-link:hover {
border-bottom: none;
color: #000;
text-decoration: none;
}
.badge-dark {
font-size: 9px;
margin-left: 2px;
position: relative;
text-align: center;
top: -5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col">
<a class="title-link" href="#">My title is here
<span class="badge badge-dark">Special</span></a>
</div>
</div>
</div>
The font size of the content in the badge is different from the other link text and you also have an alignment of top:-5px. These two break the line and even without using the bootstrap badge you would get the text-decoration broken. Yes it would extend to the span text but be broken and it would not be what you want. And bootstrap badge also has the style of text-decoration: none...
Another way of getting the dotted underline to extend the badge is removing the text-decoration and using border-bottom like this below:
a {
font-size: 36px;
border-bottom: 3px dotted rgb(221, 221, 221);
color: #000;
}
a:hover {
color: #000;
border-bottom: none;
}
I need to display a border around a div tag with a title in the border itself. In order to do this, this is what I have come up with so far
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}
.componentTitle {
font-size: 18px;
width: 15%;
background-color: white;
margin-top: -25px;
}
<div class='componentWraper'><p class='componentTitle'>This is the title</p>This is the component body text</div>
As you can see I am using margin property to push the title up on top of the border. I am not sure if this is the proper approach to do this and I have the following questions.
I am positioning the title using pixels (margin) and a fixed value (-25px). This is a site that has to work on mobile phones, tablets as well. Is this an acceptable approach?
I am setting the background-color to white so that the border does not appear behind the text, is this an ok approach?
Is there a better and more acceptable way to do this, I do not want to use fieldset because we have little control over the border (border-radius).
There are three logical ways you can use to achieve this.
You can use a <fieldset> with a legend which is the basic HTML way of doing this. You can find more information about this here.
Use custom CSS with positioning, not negative margins or etc.:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper .componentTitle {
position: absolute;
top: -25px;
background: #fff;
padding: 0 10px;
}
<div class='componentWraper'>
<p class='componentTitle'>This is the title</p>This is the component body text</div>
Use custom CSS with pseudo-elements:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper::before {
content: 'This is the title';
position: absolute;
top: -10px;
padding: 0 10px;
background: #fff;
}
<div class='componentWraper'>This is the component body text</div>
I think you're on the right track. I'd make a few changes to have more control over the styling. You can use ems or pixels.
Wrap the title and content in a new div and give that a negative margin:
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
.componentWrapper div {
margin-top: -1em;
}
Set your title to display: inline-block and use padding to control the white space around it (instead of using width)
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em;
}
codepen
snippet:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
margin-top: 1em;
}
.componentWrapper div {
margin-top: -1.2em;
}
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em .3em;
}
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
This is what I came up with. I wanted to get rid of the negative margin, but couldn't figure out a way to do that.
See the Pen offset title by Yvonne Aburrow (#vogelbeere) on CodePen.
HTML
<div class="componentWrapper">This is the component body text</div>
CSS
.componentWrapper {
border: 1px solid blue;
border-radius: 40px;
padding: 16px;
width: 95%;
margin: 3em;
}
.componentWrapper:before {
content: "this is the title";
font-size: 18px;
width: 10%;
background-color: white;
border: 1px solid blue;
border-radius: 12px;
display: block;
margin-top: -29px;
padding: 3px;
}
I am not sure how a screen reader would deal with the title text being in the CSS (or how you would scale that up if you have a lot of different titles.
I have a tab that sits at the bottom of a global nav.
I want that tab to expand and contract on click preferably not using jquery.
When the tab expands it will contain a list with links vertically and the tab should stick to the bottom of the expanded list.
I've looked many places online to find something similar but have not been able to locate what I'm looking to achieve.
Mobile friendly would be nice and needs to toggle when clicked outside the region.
Here is the css for the tab.
.findprod {
position: absolute;
top: 11.5vw;
background-color:rgba(0, 0, 0, 0.5);
text-decoration: none;
text-align:center;
right:7vw;
top-padding:-.7vw;
margin:-.7vw;
width:10.75vw;
font-family: Lato;
color: white;
font-size: .88vw;
font-weight: 400;
line-height: 3.1vw;
border: none;
-webkit-border-radius: 0 1px 22px 22px;
border-radius: 0 1px 22px 22px;
white-space: nowrap;
overflow: hidden;
z-index:1;
}
html: <div class="findprod"> Find a Product </div>
Here is a simple example of how to do this with jQuery.
See: https://jsfiddle.net/552xrcf3/
$('.findprod').click(showHide);
function showHide(){
$('#list').slideToggle();
}
.findprod {
background-color:rgba(0, 0, 0, 0.5);
text-align:center;
color: white;
font-family: sans-serif;
display: inline-block;
padding: 20px 30px;
border-radius: 0 0 40px 40px;
cursor: pointer;
}
#list{
display: none;
list-style-type: none;
font-family: sans-serif;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>Rocks</li>
<li>Pipes</li>
<li>Cookies</li>
<li>Office Supplies</li>
<li>Fireworks</li>
</ul>
<div class="findprod"> Find a Product</div>
I keep getting a problem with my css - tried modifying the code many times but still stuck. Before I paste all the CSS (there is a lot), maybe someone knows what the problem could be from the GIF below.
Basically, when you hover over the language, the menu opens. When you move down to French/Russian the dropdown disappears.
I get the feeling it has something to do with hovering over the picture below.
Many thanks.
EDITED
Just found the answer here: Can't get CSS drop down nav to go over content
I had to set the z-index for the nav to 9999 in order to get bring it into highest priority.
Many thanks for your comments and answers.
~Aivoric
Try this one - JSFiddle
HTML
<div class="language-choice">
ENGLISH <span class="red active"></span>
GERMAN <span class="red"></span>
FRENCH <span class="red"></span>
RUSSIAN <span class="red"></span>
</div>
CSS
.language-choice{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
height: 40px;
width: 200px;
border: green solid 2px;
background-color: #fff;
overflow: hidden;
}
.language-choice:hover{
height: 160px;
}
.language-choice a{
display: block;
padding: 10px;
text-decoration: none;
color: green;
}
.language-choice a:hover{
text-decoration: underline;
}
.language-choice a .red{
width: 16px;
height: 16px;
float: right;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: red solid 2px;
}
.language-choice a:hover .red, .language-choice a .active{
background-color: red;
}
Display="Position: Relative;" is Juggling in IE (Browser Mode: IE7/8/9 - Document Mode: Quirks) But If I changed Document Mode from Quirks to IE7/8 or even 9 it's working fine. How to set through CSS this issue? Please see sample code below:
CSS
.aFlyOut{
padding: 10px;
bottom: 0px;
border: 1px solid #a6adb3;
background-color: #FFFFFF;
position: relative;
z-index: 9999;
}
.aFlyoutCollapse
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutExpand
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutButton{
height: 12px;
float: right;
width: 38px;
cursor: hand;
padding-right: 4px;
}
.aFlyout{
float: right;
background-color: #FFFFFF;
border:1px solid #a5acb2;
right: 6px;
#right: 8px;
padding: 0px;
}
.aFlyoutHeader{
padding: 4px 6px 3px 0;
background: url("/vtpOnline/images/actionFlyoutHeaderIcon.gif") #090999 no-repeat;
color: #FFFFFF;
text-indent: 23px;
font-size: 11px;
font-weight: bold;
}
.aFlyoutLinkWrapper{
padding:5px;
}
.aFlyoutLinkWrapper a{
padding: 5px;
color: #010356;
font-size: 11px;
display: block;
text-decoration: none;
}
.aFlyoutLinkWrapper a:hover{
color: #0060ff;
background-color: #f2f2f2;
}
.aFlyoutRefreshLink{
background: url("/vtpOnline/images/addNote.png") no-repeat 0 50%;
text-indent: 12px;
#text-indent: 10px;
}
HTML
<div class="aFlyoutButton" id="aFlyoutLink">
<!-- Action Flyout Action Button -->
<div class="aFlyoutExpand" title="Actions" id="aFlyoutButton" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()" onClick="aFlyoutExpandCollapse()"> </div>
<div id="aFlyout" class="aFlyout" style="display: block;" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()">
<!-- Action Flyout Action Header -->
<div class="aFlyoutHeader" style="color: #FFFFFF;font-size: 11px !important;"> Actions </div>
<!-- Action Flyout Links Panel -->
<div class="aFlyoutLinkWrapper" style="width: 100px;"> <a class="aFlyoutRefreshLink" href="#" id="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" name="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" onClick="aFlyoutExpandCollapse();;A4J.AJAX.Submit('j_id_jsp_2094016106_0','j_id_jsp_2094016106_1',event,{'oncomplete':function(request,event,data){Richfaces.showModalPanel('AddNoteModalPanel');setValues();return false;},'similarityGroupingId':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION','parameters':{'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION'} ,'actionUrl':'/vtpOnline/faces/order/edit/default.jsf'} );return false;">Notes</a> </div>
</div>
</div>
When i mouse hover it shows:
However, it should be as:
Document mode quirks means that you're essentially running a pre-IE6 rendering engine. A good solution to solve this is to add a doctype to the top of your HTML document. This will put the browser in standards mode by default, and will allow your position:relative; to work as expected.
The simplest doctype is the HTML5 one:
<!DOCTYPE html>
Put that on line 1 of your HTML. There is no way to force standards mode via CSS.
Thanks everyone, it has been resolved; please see following code reference. I've changed position from relative to absolute and set top & height to fix the positioning.
.aFlyOut{
position: absolute;
top: 28px;
height: 70px;
}