This is the code I am using in chrome device mode select option list overflow the device width I don't no its coming in real devices and also I enclose my screenshot here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form role="form">
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
</div>
</form>
</div>
</body>
</html>
No, this will shown in your device. Option list item overflow this is because of OS (window). If you test this in other browser. It will perform diffident with default property (means if you don't customize with css or js).
And if you see this on android it will be okay and on iPhone then it will show with iphone default option box.
You didn't actually ask a question of any kind, just stating a fact of what Chrome does... I'm not sure how that fits in with this site, but anyway:
There's nothing wrong with your code, this is how the design mode behaves, in order to show the full length of options inside your dropdown.
On a real device, this will display either natively in iOS, or to the viewport width.
Related
hello i have a web app that works fine on chrome but on firefox it does not display my checkbox, inputs, text area etc...
Even if I have a page that only have this:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="MSTHEMECOMPATIBLE" content="no">
<title>Checkbox Test</title> </head> <body>
<input type="checkbox">
<input type="radio">
<input type="text">
<input type="submit">
<input type="button">
<input type="file"> </body> </html>
does not show! BUT with the same browser i went to a website hosted elsewhere and this very same code works, when i run it locally it works... please help me!
Again with the same code, When using chrome it works.
im hosted on Azure .... does it makes a difference?
why would my hosted page don't work!!!
Checkboxes and radio buttons are not displayed on Firefox when
<meta http-equiv="MSTHEMECOMPATIBLE" content="no"> is specified.
I have requirement that I have to show each option title on mouse over.
Bootstrap popover is working for the other text fields in the same form but is not working for the dropdown.
I tried title attibute on each option, it is working in chrome but in IE hover text not showing long enough time, So I decided to use Bootstrap.
code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<select id="testList">
<option value="1" title="Header1" data-toggle="popover" data-trigger="hover" style="color:red;">Item 1</option>
<option value="2" title="Header2" data-toggle="popover" data-trigger="hover"style="color:green;">Item 2</option>
<option value="3" title="Header3" data-toggle="popover" data-trigger="hover"style="">Item 3</option>
<option value="4" title="Header4" data-toggle="popover" data-trigger="hover" style="color:orange;">Item 4</option>
</select>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Here I can't use size attribute on select tag
Could anyone figure out the reason for not working
or
Could some one give me the code example to show each option value on mouse hover.it can be either tooltip or popover.
We have to tweak a little bit to make it work. We can't directly add a pop over to select option. Instead we can apply chosen plugin on select box, it converts the select options to unordered list. on top of that we can add pop over on each li element.
$("#testList").chosen({
disable_search: true
});
$("testList_chosen.li.active-result").each(function(){
$(this).attr('data-toggle','popover');
});
$('[data-toggle="popover"]').popover({container: 'body'});
Read more about chosen plug in here. http://julesjanssen.github.io/chosen/
I have a largely responsive site, built on Bootstrap 2.3. But one page I need to be zoomed out to fit items that don't work responsively. If I double tap, it zooms out perfectly. But I want to default this way.
html:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container-fluid" style="min-width:1024px">
<div class="row-fluid">
<div class="span12">
<!-- arbitrary content. point is: zoom out by default, don't crop img -->
<img src="1024x768.png">
</div>
</div>
<div class="row-fluid">
<div class="span12">
<!--
if min-width is observed, these should be side by side
instead of wrapped like responsive normally does
-->
<img src="300x768.png"><img src="300x768.png"><img src="300x768.png">
</div>
</div>
</div>
</body>
Note: I'm not trying to disable zoom. I just want to default zoomed out.
I've tried the following without success:
1. <meta name="viewport" content="width=1024">
2. <meta name="viewport" content="user-scalable=yes">
3. body { float:left; min-width:1024px; }
4. min-width on all wrapped objects
UPDATE
Ugh. I was using Google Chrome mobile emulation to debug. Actual mobile device worked fine with html,body {min-width:1024px;}. I threw in as well to de-responsify some of the content.
Pro-tip: Don't rely on Google Chrome mobile emulation.
Use the meta tag to do so
<meta name="viewport" content="width=device-width, initial-scale=1">
initial-scale --- The initial zoom when visiting the page. 1.0 does not zoom.
minimum-scale --- The minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scale --- The maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalable ---- Allows the device to zoom in and out. Values are yes or no.
Source
having some more issues with Foundation 5.
the dropdown menus: http://foundation.zurb.com/docs/components/dropdown.html
even when using there download and copy pasting the code from their site, the drop down bar when refreshing the page or first load, shows the content already dropped down, and only disappears when you spam click it a few times and move the mouse away. is something broken with it, i assumed it was supposed to have the drop down content hidden on initial load.
code is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="large-12 columns">
Link Dropdown ยป
<ul id="drop" class="[tiny small medium large content]f-dropdown" data-dropdown-content>
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
I have tried using the scripts at the top and bottom of the page, same thing.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
also is it possible instead of clicking to have it just display on mouse hover?
Thanks.
I know this is a super-old question, but I got here via Google and wanted to answer it in case anyone else does.
At least one of your problems is this line
class="[tiny small medium large content]f-dropdown"
You're not supposed to literally put [tiny small medium large content]. You're supposed to choose one of those options (if desired). Like this:
class="tiny f-dropdown"
I am looking to create a customizable product that you can change and see the visual changes on the site. I'm finding this hard to explain, so I apologize if you immediately know of a tutorial for this. I'm just at a loss of how to really explain this idea.
http: //bit. ly/L8DfF2
On the page it shows the product they sell, a custom xbox 360 controller, can someone point me in the right direct of how to create a custom product page with this idea.
Just glancing at the source it looks like obviously drop down lists with each option connected to a picture that changes a certain component of the product. But is there anything else more to it? I'm use to connecting listed or bulletined options to links, do I just simply connect it to the picture? Just not sure how to set up a product to display the updated options you can select is my biggest question.
Well it's the base image, and then on top of it is a stack of empty images. As you change the settings, each has some onChange listener, that changes the src or one of those empty images...thereby changing the overall stacked image.
Here is some sample code on the concept...in your implementation each select would adjust a different image (that represents just the relevant piece of the product):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#shell {width:100px;height:100px;display:block; background-color:#f00;}
#button {width:50px;height:50px;display:block; background-color:#00f;}
</style>
</head>
<body>
<div id="shell"><div id="button"></div></div>
Shell:
<select onChange="col('shell',this.value)">
<!-- in your version the values below would be file names of images -->
<option value="#f00">Red</option>
<option value="#0f0">Green</option>
<option value="#00f">Blue</option>
</select><br/>
Button:
<select onChange="col('button', this.value)">
<!-- in your version the values below would be file names of images -->
<option value="#00f">Blue</option>
<option value="#f00">Red</option>
<option value="#0f0">Green</option>
</select>
<script>
function col(part,x){
document.getElementById(part).style.backgroundColor=x;
//in yours, it would be document.getElementById(part).src=x;
}
</script>
</body>
</html>