I am using the code available here in my fiddle here.
The problem is that the text in the info window is appearing like this:
It should say: You are here. (in a single line)
Using Firebug, I changed the text's parent style to have width 75px but then a horizontal scrollbar appeared on the text in the info window. I tried to hide that scrollbar using Firebug and it worked but when I put it in the code, the scrollbar appears again.
CSS:
*{
margin: 0;
padding: 0;
}
body{
font-family: arial;
font-size: 62.5%; /* so, 10px = 1rem */
}
#button-container{
}
button{
color: white;
background: #4196c2;
border: 0rem;
border-radius: 0rem 0rem 0.5rem 0.5rem;
padding: 0.5rem;
outline: none;
display: block;
margin: 0 auto;
}
#show-hide{
height: 1.5rem;
line-height: 0;
}
#map-canvas{
z-index: -1;
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.gm-style-iw div{
/*width: 75px;
overflow: hidden;*/
}
.gm-style-iw div div{
/* overflow: hidden;*/
}
How do I fix this?
You can control infoWindow content width by putting html with inline styles in its content like this:
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: '<div style="width: 75px">You are here.</div>'
});
this width is changed dynamically and put into inline styles which have priority over css, thats why it gets overriden even when you put changes in css
Related
I have a problem with a border in Chrome. The green border has some grey lines.
Firefox: not visible -> ok!
Chrome: not visible but visible in the dev tools, mobile phone.
Chrome on my phone: visible
Here is a screenshot that shows my problems!
https://abload.de/img/cssiee7s.jpg
1) When you go to http://www.seelenpuls.at/hpneu/m_biografie_leander_de.php
there are two small grey lines
2) When you go to http://www.seelenpuls.at/hpneu/m_neues_de.php there are even more problems.
3) The menu button has an orange border (mobile only) ... and I don't know why as there is no such color in my CSS.
Please help!
Here's the code. The bold part is the border that causes the problems.
* { padding: 0; margin: 0; }
body
{
font-family: sans-serif, Verdana, Arial;
color: #000000;
background-color: #556B2F;
}
#center {
position: relative;
width: 350px;
height: 630px;
box-sizing: border-box;
margin: 5px auto 0px auto;
}
#logo {
position: absolute;
width: 350px;
height: 220px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 350px 220px;
}
#navi
{
position: absolute;
top: 175px;
width: 60px;
height: 40px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;
}
#header
{
position: absolute;
top: 187px;
width: 238px;
height: 30px;
font-size: 16px;
color: #000000;
left: 85px;
}
#content
{
position: absolute;
top: 218px;
width: 350px;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
**border-bottom: 5px solid #556B2F**;
}
Ok so there is a couple of things that are going on in your css.
White lines
For your content div, I would use a width of 100% for mobile devices now, as you scale to tablets and desktops you can change to a more fixed or fluid width. I would also remove the border bottom property. This is not fully extending to the width of the content box and I am unsure if it has to do with the border-sizing property you are using. I would also apply the border-sizing this way so it is applied to every element in your html
* {
box-sizing: border-box;
}
Orange border - this is caused by the :focus pseudo css property of the button you are using, you can remove it this way
button:focus {
outline: none;
}
CSS Normalize or CSS Reset - consider using one of these stylesheets in your website. They help you rendering all elements more consistently through all browsers. This will save you the time of remove the :focus property, like I mentioned above in any project moving forward. Most popular CSS frameworks utilize this to normalize basic styles.
Link to Normalize.css
The div containing the CF7 is hidden until the user click on an icon, then the icon it's replaced with one with another color in the right bottom corner of the form, so Im using a fixed div for that. The problem is that when an error/success message appears the elements move outside of the form (and of the viewport), I need the form to expand in order to see all the elements or a solution for that.
My CF7
My CF7 after an error/success message
My relevant code:
/*Div for the CF7*/
#div-mail {
display: none;
position: fixed;
bottom: 4%;
right: 3%;
}
.wpcf7-form {
margin: 30px 30px 30px 30px;
width: 350px;
height: 286px;
}
/*First icon*/
#img-mail {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
}
/*second icon*/
#img-mail-active {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
display: none;
z-index: 1;
}
you need to change the height with min-height like this :
.wpcf7-form {
margin: 30px 30px 30px 30px;
width: 350px;
min-height: 286px;
}
I had to deal with something like this recently. Basically, I wrote a function to adjust the height of my form based on the invalid trigger.
$(".wpcf7").on('wpcf7:invalid', function(event){
adjustHeight();
});
For the adjustHeight() function, I did something like this for wider screens.
function adjustHeight() {
if ($(window).width() > 640){
if ($('body').find('.wpcf7-response-output').hasClass('wpcf7-validation-errors')){
$('body').find('.contact-container').css('height', '2500px');
} else {
$('body').find('.contact-container').css('height', '2200px');
}
}
}
Not the most elegant solution, but it worked.
I am using the Tizen 2.3.1 SDK for wearables and have run into an issue where no matter what I do to the style.css file, adding any new ids simply refuses to work.
* {
margin: 0;
padding: 0
}
html, body {
width: 100%;
height: 100%;
background-color: black;
}
#str_day {
position: absolute;
display: -webkit-flex;
width: 50%;
height: 50%;
background: yellow;
color: yellow;
z-index: 4;
opacity: 1;
}
h1 {
font-size: 1.4em;
margin: 10px 0 20px 10px;
color: #6587ac;
}
#box {
display: -webkit-flex;
-webkit-align-items: center;
width: 100%;
height: 100%
}
.canvas {
background: #000;
width: 320px;
height: 320px;
margin: auto;
}
This is my code. I am trying to add the str_day id however it doesn't show up when I run the package through the emulator. The rest of the css (the canvas element, mainly) works fine, but str_day just doesn't show up. I tried specifying the z-index and opacity in case some weird issue was occuring but that doesn't seem to be the problem.
This is my full code on github.
https://github.com/JoyfulOwl/RadialWatch/commit/86d096710c7187b6b3679e02416548e18a3e986e
Probably because of improper CSS layout str_day is rendered/painted outside the viewport of your watchface because of which its not visible.
I think better would be to use canvas fillText command to print the date on canvas.
Try below example.
var canvas = document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.font="30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText(str_Day, mCenterX, mCenterY); // mCenterX & mCenterY are the position where text has to be shown.
I've coded my website for all browsers but of course IE has issues. Specifically only IE 7. I'm hoping to find a resolution to why it's behaving the way it is with two issues and what I can add so IE will display it properly.
My submit buttons are aligning to the bottom of their containing divs.
CSS for the SUBMIT button for the SEARCH field
#searchform { /*container widget */ position: relative; left: 15px; width: 97%; height: 30px; background-color: #f3f3f3; border: 2px solid #742222;}
#searchform label { display: none; }
#searchform input#s { width: 75%; height: 20px;}
input[type=text],input#s { margin: 0 10px 0 0; width: 60%; }
#searchsubmit{ position: relative; float: right; width: 30px; height: 30px; text-indent: -999px; background: url(http://averylawoffice.ca/img/SEARCH-submit.jpg) center; border: 0px;}
This CSS works in all browsers but IE version 7. Is there a way to make it top align without having to position absolute?
I've managed to move the SUBMIT button up (to the correct position) by left-floating the text-box.
.subscription_email {
...
float: left;
}
Same goes for the search text-box:
#s {
...
float: left;
}
By making those changes, the resulting presentation will be exactly the same as in Firefox.
I want to display a noscript warning when users have javascript disabled, in the same way StackOverflow does.
I use this html:
<noscript>
<div id="noscript-warning">
Este sitio funciona mejor con JavaScript habilitado. Descubrí
cómo habilitarlo.
</div>
</noscript>
and this css:
#noscript-warning
{
font-family: Arial,Helvetica,sans-serif;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 101;
text-align: center;
font-weight: bold;
font-size: 12pt;
color: white;
background-color: #AE0000;
padding: 10px 0;
display: block;
}
#noscript-warning a
{
color: #FFFFC6;
}
#container
{
width: 98%;
margin: auto;
padding: auto;
background-color: #fff;
color: black;
border-style: solid;
border-color: #3E4F4F;
border-width: 1px 2px 2px 1px;
line-height: 130%;
}
where #container is the main content element of my template.
When the noscript tag is visible, it appears in front of some content. I don't want that, the content should be displayed below the warning.
How can I do that?
If you want the behavior of position: fixed AND need to push the initial content down from the top, you can include a second div in your noscript area. Give this div visibility: hidden and a height equal to the height of the div with position: fixed.
The problem is with you setting position: fixed on the warning. You can't really expect the page's content to move around that, since you're fixing it to the top of the browser window. What would happen when you scroll down? The whole page's content rearranges itself to go around the warning?
Do you want the warning to be stuck at the top of the browser window even if they scroll? If not, position: fixed isn't what you're looking for.