Browser: ie11 (My company requires this).
Once expanded, it overflows the div and the footer.
I need it to extend the div behind it so it always fits.
Currently, the div behind has these attributes:
height:600px;
width:650px;
background-color:white;
margin-left:200px;
margin-top:-520px;
position:absolute;
z-index:10;
border-radius:50px 10px 50px 10px;
border:solid;
border-width: 5 5px;
border-color: #fcf17a;
box-shadow:5px 5px 12px black;
font-size: 12px;
I am also using the Vallenato accordion as I'm not too good with JS myself.
Found here:
http://www.switchroyale.com/vallenato/
Image of accordion here
http://i.imgur.com/0mCCeX6.png
Thanks for your time.
Related
I have a website (http://ukchina-trading.com/) with the following header:
HTML
<div class='leftImage'>
<img src='image/unionjack.png'>
</div>
<div class='title'>
<h1>J Plus Trading</h1>
<h2>Briding the gap between China and the UK</h2>
</div>
<div class='rightImage'>
<img src='image/chinawings.png'>
</div>
CSS
.title h1 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
font-size: 68px;
line-height: 65px;
padding-top: 60px;
margin-bottom: 80px;
}
.title h2 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
position:relative;
top:-88px;
left:3px;
font-size: 16px;
color: #FF3300;
}
.rightImage {
position:absolute;
right: 150px;
top: 2px;
}
.leftImage {
position:absolute;
left: 150px;
top: 2px;
}
When the website is view on a computer the header is fine, but when viewed on the iphone screen the images are pushed over the title, hiding it.
What is the best way to redo the header to stop this?
I'd suggest the best thing to do would be to bring the flags inside the 900px width of the website.
Keep them to the left and right of the "J Plus Trading" text but just use floats rather than absolute positioning.
your problem is the absolute positioning you are using, as this causes the images to be in the same position regardless of anything else on the page. instead of absolute try using float:left; and float:right on your left and right images, and this way the text will not be pushed over it. you may have to create extra containing divs with margins or padding so that the images are positioned how you want them
I've styled an ordinary link to resemble a button in our Sencha Touch 2-based mobile application, and I'm having issues with most of the link not functioning in Safari on the iPhone.
The link is an ordinary <a> tag with an inner <span> element containing the label text. There is padding on the <a> element, which allows taps to be registered. It appears that the inner <span> is blocking taps from being registered in the parent anchor as a link tap, and its background is transparent.
Here's the markup:
<a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile">
<span class="x-button-label">View profile on full site</span>
</a>
Testing this in Chrome doesn't present any problems, i.e. clicking the span causes the parent hyperlink to be followed. Both are Webkit-based browsers. One of our testers also tested this in Safari on a Macbook with no problems; I have also tested this in Chrome using a Wacom Bamboo tablet with no problems. This is only an issue on mobile devices (tested on both iPhone and Android 2.2) - which is what we're targeting.
Is there a CSS property I can set on the <span> element to allow taps to fall through to the parent hyperlink? Ideally I want to avoid having to set events through JavaScript. Any ideas as to why this isn't working as I'd expect?
Update: Here are the styles for the inner span as reported by Chrome's developer console:
-webkit-box-align: center;
-webkit-box-flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: white;
cursor: auto;
display: inline;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif;
font-size: 18px;
font-weight: bold;
height: auto;
line-height: 21px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
Many thanks.
Solved it, thanks to this post which mentions the following CSS property:
pointer-events: none;
Adding this to the style for the inner <span> (and inner floated <img> as alluded to in my second comment) allowed these to pass the tap through to the parent hyperlink.
The strange thing is that Sencha Touch 2 seemed to interfere with the DOM, not sure what it was in particular. Mocking up a similarly-styled button on a completely static HTML page (no JavaScript, let alone Sencha Touch 2) did not exhibit the original problem on a mobile device.
Another option in the simple case (single <span>, no floated images) was to refactor the styles to eliminate the need for an inner <span>, though this wasn't feasible for the more complicated case:
<a class="attachment" href="/someRepository/someDownload.pdf">
<img src="/images/fileExtension-pdf.png" alt="Attachment"/>
<span class="title">Title of download</span>
<span class="size">xxx kB</span>
</a>
I think this has to do with Sencha Touch's prevention of zooming. They have added in code to preventDefault most touchstart events (which kill the use of the link). There is an exception for anchors, but not for children of anchors (so tapping on an anchor itself works fine, but not tapping on a span within an anchor). I was able to monkey patch a quickfix in my application launch method:
Ext.Viewport.setPreventZooming(false); // unbind any existing handler
Ext.Viewport.doPreventZooming = Ext.Function.createInterceptor(Ext.Viewport.doPreventZooming, function(e){
return !Ext.fly(e.target).findParent('a');
});
Ext.Viewport.setPreventZooming(true);
The above code comes with no warranties (have not tested on Android and I suspect it to be fairly inefficient). I have also reported this as a bug: http://www.sencha.com/forum/showthread.php?215032-Links-are-prevented-when-tapping-on-children
I am working with GWT. i have a requirement where i need to show the button as below.Please help me how to achieve this?
Thanks!
You can use GWT Button class and style it the way you need. For example, if you're using UiBinder:
<g:Button ui:field="button" styleName="my-button">
<ui:msg key="myButtonMsg">Button</ui:msg>
</g:Button>
with your own css class like
.my-button {
background: green;
border: 1px solid green;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 15px 5px 15px;
font-weight: bold;
}
If you need the text to have white box around it then add <span> around button text and add color: black; and background-color: white; properties for the span.
Here's my problem: I'm showing an overlay (using this) with a message div that has rounded corners.
Here is my css code for message div:
#modal1
{
margin-left: auto;
margin-right: auto;
display: none;
width: 620px;
height: 150px;
position: relative;
background-color: #FFF;
border: 12px solid #FF771C;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
text-align: center;
}
And my problem is that I get a white "border" (if you look closely) in the upper left and right corners. Here is the image so you can see for yourself. Now, I "solved" this by putting top-left and -right border properties of webkit to 0px, but this is not a solution, so I'm asking if you have maybe some ideas? Btw, this is only developed for chrome that's why it's only -webkit up there in the code..
EDIT:
I found the solution on their forum http://flowplayer.org/tools/forum/40/46850
this seems to be the border of another div or element behind your rounded bordered div
I'm having trouble to get the -webkit-tap-highlight-color property to apply to a div - I'm at a loss as to why it isn't. Copying all the styles that apply to it below. The desired outcome is a back button as shown here: http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932102
.backButton {
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
position: absolute;
top: 13px;
left: 6px;
font-size: 14px;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-width: 0 8px 0 14px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-border-image: url(/static/images/backButton.png) 0 8 0 14;
}
.backButton.clicked {
-webkit-border-image: url(/static/images/back_button_clicked.png) 0 8 0 14;
}
.toolbar{
background-color: #e1f7ff;
-webkit-box-sizing:border-box;
border-bottom:1px solid #559D75;
padding:10px;
height:53px;
background-image:-webkit-gradient(linear,left top,left bottom,from(#e1f7ff),to(#a1d2ed));
position:relative;
z-index: 70; }
Applied here:
<div class='toolbar'>
<div class='backButton'>Back</div>
</div>
Viewing it in iPhone simulator (OS 4 enabled) and Safari - same problem with both (tap highlight still shows up).
Thanks in advance.
Try adding:
-webkit-user-select: none;
This is embarrassing. The image I had been using from an example back button online had the background color in it - it wasn't a problem with the CSS property.
I'm almost embarrassed enough not to post this answer, but I'm willing to swallow my pride in hopes of helping others. Let this be a lesson: if you use example images from Google images, etc., be sure the copy you download looks as you expect it to.
I wish I could reclaim the hours I spent trying to debug this, but maybe this will help someone else gain them back.
Lesson learned... thoroughly.