I have a div contains following CSS.
HTML
<div class="fixed-bottom pull-right" id="supdiv" onClick="myfunction()">Support</div>
CSS
#supdiv
{
left: unset !Important;
z-index: 999999999;
display:none
}
In Chrome
In IE
Its working fine on Chrome but expand div width in IE.
So is there any solution to this problem.
Thanks All of you guys.
I found a simple solution to my problem.
Its very simple infect. I just change the following code.
OLD CODE:
left: unset !Important;
NEW CODE:
left: auto;
Related
I have problem scrolling with touch scrolling, it's working just fine with mouse and keyboard arrows but not by touching.
This is the html code:
<div class="drive-dashboard">
<div id="dashboardContainer" class="dashboard-container"/>
</div>
And this is the CSS part
.drive-dashboard {
height: 100%;
width: 100%;
position: absolute;
overflow: auto;
}
Any suggestions where the problem is?
I've run into this before and in React i've been able to solve it with something like:
`document.addEventListener("touchstart", function() {}, true);`
But, I have to admit sometimes i've needed to use it and sometimes not, so I am not sure which html elements respond and which don't.
Here is some reference
I hope you'll have an answer for me.
In CSS there's the property background-attachment: fixed; which looks really fancy, so my question is there any property which I can use to "fix" some divs with text's etc. in the document?
If not, how to solve it in Typescript?
I hope you know what I mean
//edit:
Okay, i will try to describe it: with the property background-attachment: fixed; the background of a div is fixed but not it's content, so a parallax effect appears, like this: w3schools.com/howto/tryhow_css_parallax_demo.htm And know I wanted to know if it is possible to do the same with the content like texts etc.
Can you try it like this ?
HTML
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"> </div>
And here goes your style
CSS
<style>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb;
}
</style>
Credit originally goes to : this link and stackoverflow user aaronk6 and Joseph Marikle at their posts :
this link and at this link respectively.
I'm having a problem with border-radius on iPhone and iPad. I'm trying to generate a round googlemap, which is working fine in every browser and on every system except ios.
What I've done so far is, I've got a map-canvas
<div class="col-sm-4"><div id="map_canvas"></div></div>
and my css
#map_canvas {
height:474px;
width:474px;
border-radius:237px;
margin-bottom:73px;
display: block;
overflow:hidden !important;
position: relative !important;
}
after this wasn't working, i tried to add more border-radius:
.gm-style {
height:474px;
width:474px;
border-radius:237px;
overflow:hidden !important;
}
#map_canvas .gm-style > div {
border-radius:237px;
}
but still no success. Here's a live example:
http://kristinwalzer.at/website/kontakt.php
Anyone knows this problem? And a solution perhaps?
Add one more div for round box and add properties to that round box
<div class="col-sm-4">
<div class="roundBox">
<div id="map_canvas"></div>
</div>
</div>
.roundBox{
height:474px;
width:474px;
border-radius:237px;
overflow:hidden !important;
position: relative !important;
z-index: 999;
}
#map_canvas {
height:474px;
width:474px;
display: block;
border-radius:237px;
}
I've found this In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?
All fiddles in this post won't work on safari (windows and ios).
But even if they said in that question that it is solved, it is not. Looks like a Googlemap V3 Bug.
EDIT: I'm not sure what the issue was, but it seems to have resolved itself. Perhaps I forgot to update my manifest file. I have no idea what the problem was, but it is working now. :/
Here is an example of my html code:
<div id="well_comments_container" class="element_container" name='well_comments' type="textarea" require="0">
<label for="well_comment">What did we do really well?</label><br />
<textarea id="well_comment" name="well_comment" rows="4"></textarea>
</div>
Here is an example of my css code:
.element_container{
display: inline-block;
padding: .5em .5em;
}
.element_container[type="textarea"]{
width: 100%;
}
This works on a laptop just fine, but when I look at it on a touchpad it doesn't seem to work. It's width is clearly not 100% of the parent like it is in chrome.
Warmth.
Are you really sure it is working?
Try this CSS:
.element_container textarea {
width: 100%;
}
Now it depends on the width of your parent element.
JSFiddle
I'm not able to click links inside a div the is position:absolute. It seems to not work on mobile android as it works fine on the desktop in Chrome and even ie8.
As soon as I remove the style it works. The class msg-inner is only for jQuery which has it scrollTop no styling on it. I've read many answers and to use z-index or position:relative on the inner div but none works. I even tried using position:fixed on msg_container and same problem. The inner div scrolls and everything looks right but just the links are broken, BTW sporadically some will work and some don't. I took away all styling and just put plain links inside to see if it was a format issue and still nothing.
<div id="msg_container" class="absolute" style="overflow-y:auto;width:100%;height:75%">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.absolute {
position: absolute;
}
Your #msg_container shouldn't have a position of absolute, the .msg_inner should. Try this:
HTML
<div class="msg_container">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.msg_container {
position: relative;
width: 400px;
height: 400px;
}
.msg_inner {
position: absolute;
top: 0px;
left: 0px;
}
Also note that I made msg_container a class, not an ID. It's considered bad practice to have multiple ID's of the same name. While I don't know your code of course, I assumed that you might have multiple msg_containers on a page... so I used a class instead.