I'm currently developing an Angular 4 web application using Bootstrap 3 in which i have several text and select inputs. Select inputs are not a problem, they're working correctly, but in text input fields i have a problem with placeholders.
My input code is like this (just a standard input):
<input type="text" class="form-control" placeholder="Email">
I can see it as it's supposed to be in Chrome/Firefox in desktop and several Android devices with different versions, but in iOS 11+ devices (iPhone 6S,8,8 Plus,X) with different browsers it looks like the image:
If i remove the "form-control" class from the email field it looks like this image:
Does anybody knows a solution which doesn't involve removing "form-control" and changes styles in all text input fields in my app or change the webkit placeholder css position (as this solution could make the web style change in several browsers and not just in Safari)?
I can't see imgur pictures (corporate proxy), but if the vertical align of an input is your issue, the solution is using the line-height property. You can either fix the value, or get the height of the input and set the value dynamically.
Here is an example with a rather large input.
input.form-control {
margin: 24px;
width: 200px;
height: 100px;
line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<input type="text" class="form-control" placeholder="Email">
Related
I think I understand how placeholders work regarding select2 library.
There is a thing bugging me for a while already, how to have non-escaped placeholder on multiple selects.
The reason is I like to place an icon at the placeholder.
Single selects uses an additional option tag and the property escapeMarkup at the select2 options object.
$('mySelector').select2({
escapeMarkup: function(markup){
return markup;
}
});
Nothing of that is possible at multiple selects since the placeholder is placed at an input tag, so html markup is escaped and you get the <i> tag instead of the icon.
Is there a workarund for this?
#Marcos i have done some solution regarding placeholder regarding select2 library.
<select class="select2 selectPlaceholder" multiple="multiple"></select>
<script>
$(".selectPlaceholder").select2({
placeholder: "Select Product",
allowClear: true
});
</script>
Optional
allowClear: true
Please let me know if i am right because i got your question but still i have some doubt
understanding Que.
Taking your previous comment as a reference:
"the idea is to place a font awesome icon at the placeholder and
preventing select2 from escaping it, and i'm getting the i tag instead
of the icon"
...and if I understood correctly, you want to place a Font Awesome icon on the Placeholder of the Select2 element and keep it there, correct?
Check the following code where I'm inserting a DIV that contains a Font Awesome icon (the little airplane) and placing it on top of the Input used for searching. Even when you select different items from the Select (is a Multiple Select as you needed) the icon remains in the placeholder and also it has a text by default.
Remember to add the class="tab" in case you don't see the Icon.
$(document).ready(function(){
$("#sel1").select2({
placeholder: 'Search here...',
allowClear: true
});
$(".select2-search.select2-search--inline").prepend("<div class='fab'></div>");
});
select {
width:300px;
}
.multi {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: 600;
text-decoration: inherit;
}
.top {
position: absolute;
left: 0px; top:0px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- select2-bootstrap4-theme -->
<link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<div class="container-fluid" style="width: 100%;">
<select class="multi fab" multiple placeholder="" data-allow-clear="1" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<script>
</script>
</body>
</html>
grails 3 comes with bootstrap 3. I want to create my own main.gsp layout based on grails 4, i.e. replace the default main.gsp with something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
<title><g:layoutTitle default="DAM"/></title>
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
At the bottom of the default main.gsp is this:
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
<asset:javascript src="application.js"/>
The question is, should I include these? In all my years using grails, I have never seen a spinner appear in the UI, so am not sure if this actually works?
I am guessing I don't want application.js?
Also not sure what this is for, as it has no content:
<div class="footer" role="contentinfo"></div>
The question is, should I include these?
Only if you ever want to display the spinner. The default main.css defines a style for the spinner:
.spinner {
background: url(../images/spinner.gif) 50% 50% no-repeat transparent;
height: 16px;
width: 16px;
padding: 0.5em;
position: absolute;
right: 0;
top: 0;
text-indent: -9999px;
}
Adjust that however you find appropriate.
The default sitemesh layout contains a div with that style and has the display set to none so it won't be displayed.
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
A typical use of this is if you have some Javascript which does an action such that you want to display the spinner while that action is happening, that Javascript can set that display attribute and that will cause the spinner to be displayed until something sets that attribute back to none.
In all my years using grails, I have never seen a spinner appear in
the UI, so am not sure if this actually works?
It does unless you have made some changes that might interfere with that.
I am guessing I don't want application.js?
It is hard to say if you want that or not. It really depends on what your app is doing. The default application.js for a 3.3.9 app pulls in several other .js files...
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//
//= require jquery-3.3.1.min
//= require bootstrap
//= require popper.min
//= require_self
If you don't want those pulled in then you may not want application.js. Of course you can edit application.js to include whatever it is that you do want to pull in.
Also not sure what this is for, as it has no content:
<div class="footer" role="contentinfo"></div>
That element is there as a placeholder for you to render common footer elements.
I'm having a hard time getting my polymer custom element to render content within a container <div> without the <div> showing up in the light DOM.
<polymer-element name="impress-slide" constructor="ImpressSlide" attributes="exitAnimation entryAnimation">
<link rel="stylesheet" href="animate-custom.css">
<template>
<style type="text/css">
...
</style>
<div>
<content></content>
</div>
</template>
<script type="text/javascript">
...
</script>
</polymer-element>
renders as
<impress-slide>
<div> (Content) </div>
</impress-slide>
Can anyone give me some insight into how I can render the containing <div> in shadow DOM?
It depends on what browser & version you're using. Some of them have old versions of the Shadow DOM spec, and so Polymer has to polyfill it instead of using it natively to get the features it needs.
I'm using Chrome 33.0.1750.22 dev and Shadow DOM is still polyfilled for me unless I turn on the "Enable experimental Web Platform features" flag in about:flags.
Include
<script>
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
before polymer import to enable custom elements to render inside shadow dom aka #shadow-root
I'm working on a Pyramid (python) web application, and trying to create a responsive-ish design that will gracefully switch between a desktop-sized browser and a mobile browser. I'm wanting to use Twitter Bootstrap for the desktop UI and jquery mobile for the mobile UI.
My CSS is like this:
#charset "utf-8";
#import url("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css") (max-width: 480px);
#import url("css/bootstrap.min.css") (min-width: 481px);
This actually seems to be working well in switching styles on the fly as the window resizes. If it's a larger window, it shows my desktop UI styles, and once it hits the "mobile" threshold it shows the jquery mobile UI. Sweet.
My problem appears to be in my HTML/mako template, though. I've placed my .js includes at the bottom of the page. The important snippet is:
[...snip..]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>
I have radio buttons with labels on the desktop UI like so:
<label>
<input type="radio" name="answer" id="1" value="1"> 1</label>
<label><input type="radio" name="answer" id="2" value="2"> 2</label>
<label><input type="radio" name="answer" id="3" value="3"> 3</label>
<label>
<input type="radio" name="answer" id="foo" value="foo">foo
</label>
When all .js includes are active, the actual radio input control is not inline with the label text; instead it appears to be set as a block element and is appearing onscreen on its own line after the label. I've tried tweaking the CSS to override the radio input styles but the best I can get so far is setting the radio type to inline but it's still appearing after the label, instead of before.
Buuuut, if I comment out the jquery mobile .js include:
[...snip...]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>-->
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>
then the desktop UI looks correct. Of course at that point I've lost my jquery mobile UI.
So what seems to be happening is something in the jquery mobile javascript is overriding the style includes, but I don't know what or why. Is there a way I can force things to not run the jquery mobile stuff at larger resolutions? Any help or hints?
You may need to disable jquery mobile for these input fields:
from http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html :
if you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:
<label for="foo">
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
The databox plugin works well in a static jQuery Mobile html page. The scripts defined in header are:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
The line for the datebox input is:
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "flipbox","useFocus": true}'>
However, once I dynamically inject some other elements into the same page, like
$(document).bind("pagebeforechange", function route(e, data) {
...
$page.trigger('create');
...
As a result, I can see all elements are displayed well, including the datebox button. But clicks on the datebox button would not pop up anything.
I compare the two versions of html codes after enhancement. I found the dynamic one misses the following, which corresponds to the date dialog pop-up:
<div class="ui-datebox-container ui-overlay-shadow ui-corner-all ui-datebox-hidden pop ui-body-b"
...
Why did the dynamic way miss to generate the codes above? How can I correct?
I found a solution myself. It is to change
$page.trigger('create');
to
$page.page();
But I have no idea why and the fundamental difference of these two. Help please!