I have a problem in my web application in the chat part with jQuery Mobile and cordova.
I decided to fixed the footer with an textaera and a button to send message. But when I touch the textarea to write a message my keybord doesn't show up. I guess it is hide :S
Any idea to fixe that?
Here is my code:
<div data-role="content" class="bg">
<div class="chat-liste">
<div class="chat-left">
</div>
<div class="chat-content">
</div>
<div class="chat-form" data-role="footer" data-position="fixed">
<textarea class="chat-form-text"></textarea><input type="submit" class="chat-form-submit send"/>
</div>
</div>
</div>
Thanks :)
Actually the keyboard is not html but a part of the system widgets so it's impossible to hide it behind a html element.
Be sure that no other invisible elements above the textarea are recieving / stealing it's touch event. Prerequisite is that your textarea can be touched.
Would need to see your css and code too to tell if it's a html problem or there is somewhere in your jq an event.preventDefault() on this element.
When it's html-problem. Try to give the textarea a higher z-index like this:
<textarea class="chat-form-text" style="z-index:10000;"></textarea>
Related
I'm using bootstrap panels for the first time, and my panel header and panel body are shorter than my panel which looks a bit strange. I'm a bit stuck as to what's actually happening as the bootstrap styling is being called.
Code below:
<div class="software well row hidden">
<div class="info">
<div class="panel panel-success">
<div class="panel-heading"><h3>This INSERT NAME is available to download!</h3></div>
<div class="panel-body">
Or if you've tried that and experienced issues then please fill out the additional info box below and a member of the service desk will be in touch.
</div>
</div>
</div>
</div>
From the Comments:
Hmm. I [can't reproduce](https://jsfiddle.net/pbdevch/6t9afwdu/) the error in a JSFiddle. Look if your CSS is overwritten by some theme or by your own styles.
Response:
#chade that was it thanks - it was a css style that was overwriting my panel and not my panel-heading as I was expecting!
I'm answering this so other users with the same problem can easily determine the answer that was provided.
I can see lots of answers for this but not quite the right solutions..
Essentially i'm displaying numerous emails in a thread (looks like iMessage a bit) on a page. The messages are looped within a repeated element, with the HTML email displayed inside it.
I have no control over the HTML in the email content as it could be from anywhere.. the problem is that the HTML in the email is inheriting CSS styling from the page style sheets.. this is making it all look weird..
I can't overrule the CSS with a more specific CSS, as there could be any classes or id's coming in the email that match those in the main style sheet..
I've tried adding all:initial to the wrapper div like this:
div.sentMsgBody *{
all: initial !important;
}
This however seems to override any styles that comes with the email and so looks really naff..
Anyone got any ideas how to display the email content with its own HTML without taking on the main styles?
Thanks!!
Addition:
I've been asked to show my code, though that's quite tricky...
there's loops of a certain div in the page like this:
<div id="page">
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
</div>
Of course each loop of this div could have any HTML at all as its showing emails...
eg:
<div id="page">
<div class="sentMsgBody">
<div class="Header">My Email</div>
<div class="Main">This is my email body</div>
<div class="Footer">Email Footer</div>
</div>
<div class="sentMsgBody"> ... ... </div>
<div class="sentMsgBody"> ... ... </div>
</div>
Here the Header and Footer etc may take css from the main page...
I thought about iFrames but they are messy, i don't know how big the content will be for each one, are a bugger with being responsive too, and there could be dozens that have to be created dynamically from the content of each div that is loaded by ajax from a handler.
This is an easy question. But what I want to know is: Is there a way to delete a div without removing its content USING bootstrap? I can also refactor the question to: Is there a way to delete a div CLASS dynamically with Bootstrap?
My code is simple:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
GOOGLE MAP
</div>
<div class="col-md-2"></div>
</div>
</div>
I know there already exists a way to make it visible and or hide it (hidden-phone ..), but what I want to do is actually remove the container, the row and the cols and leave the google map to fill the whole width.
What I have right now is:
<div class="container hidden-phone">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="googleMap"> ... </div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And then, right after that, I add the div of the google map again. But instead of hidden-phone, now:
<div class="googleMap visible-phone"> ... </div>
This way, when you switch to a phone, the container and separations of the map with the screen are none.
This is the easiest way, but it seems a little unpractical, because maybe I don't see one, but it is there, so I'm downloading the map into the client twice, I believe that is not clever.
I could always use JavaScript(jQuery) to listen to the event of resizing and remove it my self.. That is not a problem at all, but maybe bootstrap has a build-in functionality already, something like a data attribute like "data-hidden-phone-class='someClass'", or maybe a class that hides some classes when resizing like: "hidden-classes-phone" this way when the screen resizes to a phone one, boostrap would hide all the classes of that element? Or something.
I know the names for attributes and classes are not attractive, but is for the purpose of the question.
I hope I made myself clear enough, let me know if you don't understand something, thanks!
Is it possible to nest elements with aria-hidden="true" and aria-hidden="false"?
For example:
<div aria-hidden="true">
some hidden content
<div aria-hidden="false">
some visible content
</div>
</div>
This seems not to work for me. I tested it with NVDA and its functionality to display a full list of links on the page. If I set aria hidden true on the body I could not manage to get any links even when I started to set aria hidden to false on some child elements. Currently it looks like I cannot overwrite the aria hidden state in a child element.
I know this might be a quite unusual approach but the problem itself is unusual as well. A huge light box which contains a whole site itself(no simple modal dialog to be short).
No, that is not possible.
You hide the element and its children.
As an example, when creating a modal window you hide everything but the modal, like this:
<div aria-hidden="true" id="page-wrap">
<main role="main">
<p>content</p>
</main>
</div>
<div aria-hidden="false" id="myModal" aria-labelledby="myModal-title">
<h1 id="myModal-title">Sign up!</h1>
...
</div>
This will then hide the #page-wrap and show the #myModal to assistive technologies
I have a page of things that looks like this (and yes, I have included the scriptaculous javascripts, because the toggle actually does work):
<html>
<div id="container">
<div id="thing1" class="thing" >
<p>Some visible stuff 1</p>More1
<div id="extra1" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<div id="thing2" class="thing">
<p>Some visible stuff 2</p>More2
<div id="extra2" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<!-- 96 more entities of class="thing" -->
<div id="thing99" class="thing">
<p>Some visible stuff 99</p>More99
<div id="extra99" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
</div>
</html>
When I click on the "More99" link at id="thing99" which is way down at the bottom of the page, , the div at id="extra99" appears as it should, but the page then the page automatically scrolls back to the top.
When I clck the "More1" link at the top, it stays focused at the top.
Is there anyway I can keep the page from scrolling back to the top and/or to refocus it back to where I just clicked? I don't want to scroll back down and find out which one I just made visible.
Try return false; after your Effect.toggle(); calls.
More99
This isn't the ideal way of handling this, but it should fix your immediate problem. Ideally, you would remove all of your Javascript from your HTML, and do away with all onclick attributes, handling everything from a remote block of Javascript.
Jonathan & Tatu started me on the right track. I tried "return false", and it worked some of the time.
With the "return false" concept in hand, I searched GOogle and stumbled on this page for hrefs and return false.
That "#" tag kept returning me to the top of the page. I tried href="" without the "return false", and it worked as desired, but it randomly reloaded the page as well.
The following solution gave me what I wanted consistently:
More99
Everything worked as desired, and no random page reloads.