I created my own home automation web app. To authorize actions the user needs to enter a pin. Instead of using an input/password field I want to use a dial/number pad.
I decided to go with this snippet. My big problem is: I'm not good with CSS. I understand HTML and can work with it (at least with Bootstrap). But I have not learned CSS yet.
But I want to display the number pad in a modal (which pops up when the user tries to press the "Turn of PC" button for example).
I copied the css and html from the link. But this is the outcome:
Can someone explain me which part of the css is causing this?
Thanks
Remove the <div class="container"> from the modal body, and change the class on your phone tag to col-md-8 col-md-offset-2 phone.
Updated JSFiddle
Full-screen results
Related
I was working with the ability to paste images into a div where it would then be uploaded via a post request. So far it seems to be working, but I noticed this toolbar that seems to show up when I make the content editable. As a result of this, the user is able to manipulate the div beyond just pasting an image which is what I do not want them to do.
<div tabindex="1" id="pasteZone" contenteditable="true" onkeypress="return false">
<span id="pasteMessage">Right click and paste an image, or click and press (ctrl+v for windows or ⌘+V for Mac)</span>
</div>
I need the paste zone to be editable so that the windows context menu allows for the option to paste the screenshot and have the option to ctrl+v or what have you. But I also do not want my users to be able to add text. It seems that I am able to do that successfully as far as key presses go, but the toolbar destroys that possibility.
What I have done:
I looked online to see if other examples of this occurred but I could not find anything on this particular issue. I checked to see if this was the standard for any contenteditable enabled div, but it is not. Other websites that have this do not show this toolbar.This leads me to believe that this has something to do with Bootstrap. If this is the case, how would I prevent this toolbar from showing?
Image:
I have this line <div id="preview_map"></div> in a code I'm working on. It generates a toolbar with many button on it and display a map. My goal is to add a new button to this toolbar but how am I suppose to do it knowing that they are generated by this line ? I used grep to try to find a JS function who could use this id to generate buttons but nothing at the moment.
<div id="embedded_map" class="mrg-btm">
<div id="preview_map"></div>
</div>
Your application is dynamically generating elements with JavaScript.
Your code only shows a <div> element, this provides nothing to identify how the buttons are being generated.
Open your website on Chrome and click Inspect Element. Then go to sources and you should be able to view the JavaScript that is creating the page.
Alternatively you can search through your source code for the id embedded_map, and you should be able to see the JavaScript written to generate the buttons.
I am writing tests for my Bootstrap 3.x webapp using Nightwatch. All is working fine, but I would like to add the "close modal by clicking somewhere next to it" in one of my tests. I don't seem to be able to identify the html element that's supposed to receive the click event however.
Can anyone help me with this?
Thanks!
The background is a div with class .modal-backdrop. According to the docs: "...generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal."
I'm working on an existing MVC4 application, and need to implement a modal form.
I'm trying to implement this solution...
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
This works just fine, but the example uses a link, and I need it to be a button.
I could try to style the link as a button, but there's a bunch of other buttons on the same form and it would need to look exactly like those, and I haven't found a good way to style the link exactly like the other buttons in every browser, since most of the button's default style properties aren't overridden.
I've tried wrapping the link around a button, like shown below...
<button type="button">Continue</button>
This works fine in Chrome, but in IE11 when I'm testing the button shows up but doesn't do anything when I click it. Again, the exact same code works fine in Chrome - pressing the button does pop the modal open, but doesn't work in IE. Also, you get an HTML5 validation warning when a button is nested inside a link.
So, what can I do to make my link look exactly like all my other buttons? Or is there some way I can implement this modal solution without using a link that directs to an anchor?
Not sure why your current example isn't working but there are plenty of examples in this stack overflow question/answer Here.
I am trying to create a input box somewhere on the screen in chrome, not attached to extension button like a normal popup,
it also needs to be running all the time so the user doesnt need to click the extension button to open it, for example so they do not have to come out of fullscreen.
What i have so far since im not great at html or java just a simple form
What i have: http://i.imgur.com/xCY1a41.png
What i want: http://i.imgur.com/cJH8bD4.png
I would also like to control the position of the form but from what i have above doesnt seem as if i will be able,
Sorry if its a bit vague but anything helps!
What you want to do can't be done in Chrome. This is by design. If web content could display itself outside the boundaries of the browser tab's content area, then users might be confused who was presenting it. Confusion is just the beginning of that problem: if web/extension content could masquerade as a system or browser-level alert, then that content could trick the user into doing something dangerous.
If you need a presence outside of a browser tab, your options are a native app or Chrome App.
If you want the input box to be displayed on the page you could use content script - then it would appear as you presented.