Doing a sample webforms project w/ Bootstrap - I have a small form that asks for a user to select two items and an asp:Button for the user to submit their info:
<div class="col-md-5 col-sm-6 col-xs-12 form-horizontal">
<fieldset>
<legend>Enter Your Details</legend>
<div class="input-group" >
<label for="lstItem1">Item 1 : </label>
<asp:DropDownList ID="lstItem1" runat="server" CssClass="form-control "></asp:DropDownList>
</div>
<div class="input-group" >
<label for="lstItem2">Item 2 : </label>
<asp:DropDownList ID="lstItem2" runat="server" CssClass="form-control"></asp:DropDownList>
</div>
<asp:Button ID="btnSubmit" runat="server" Text="Let's Go!" CssClass="btn btn-success shadow-text" OnClick="btnSubmit_Click" />
</fieldset>
</div>
That piece of code is contained in a bootstrap container class.
Everything works fine, except when I test it on a mobile device (Samsung Galaxy Note II Android 4.4 & Chrome 44, and an LG G3 w/ Chrome 44 as well), the button is completely unresponsive. It's not that my event is not firing, the button has no response to it whatsoever! It's baffling.
Here is all the extra CSS I've added that pertains to this block of code:
.shadow-text{ text-shadow: 1px 1px 2px black;}
.btn-success{display: block; z-index:999;}
.input-group { margin-bottom: 15px;}
legend
{
position: relative;
font-size: 1.5em;
font-weight: bold;
padding: 6px 20px 6px 70px;
top: -30px;
margin: 0px 10px 10px -30px;
color: #EEE;
background-color: #d09d90;
text-shadow: 0px 1px 2px #bbb;
-webkit-box-shadow: 0px 2px 4px #888;
-moz-box-shadow: 0px 2px 4px #888;
box-shadow: 0px 2px 4px #888;
}
legend:after
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
.form-horizontal{
margin-top: 20px;
border: 2px solid gray;
padding: 10px;
}
.jumbotron, .form-horizontal{ background-color: #feeeea; margin-bottom:20px; }
So far I've tried:
Moving the button outside of the block of code shown above, and moved it outside of the fieldset.
Setting the z-index on the .btn class to 999.
Took out any "special effects" css, including shadow-text and legend (which is a ribbon effect for the legend).
Removed bootstrap-related input-group and form-control classes
^^ I've tried so much more but I'm fried from troubleshooting this for 6 hours, I can't even remember all that I've tried.
The one thing that did work, which is not an option, is (accidentally) I closed the surrounding container and added the button after the closing tag. This is not an option, as it screws up the flow with the rest of the columns.
Has anyone had any experience with this, and does anyone know if it's at all related to Bootstrap itself?
Final note - the btnSubmit_Click function contains one line of code, and it's a Response.Redirect that passes the selected values.
Related
on Android devices' Chrome browser and also when I view my website in Chrome Developer Tools to simulate different devices, there is a thin border below my css border-bottom (the very thin red line below the big white bottom-border-line in the middle red box):
a red thin line below the big white bottom-border-line in the middle red box
Where did it come from? How can I remove it? In Firefox or on Desktop normal view in Chrome this thin line is not visibile. Here is my HTML:
<header>
<nav>
<a href='#'>test</a>
<a href='#' class='selected'>test</a>
<a href='#'>test</a>
</nav>
</header>
And my CSS:
header {
width:100%;
position: absolute;
top: 0px;
left: 0px;
}
header nav {
display: flex;
}
header nav a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
text-decoration: none;
border-bottom: 5px solid blue;
border-bottom: none;
background: blue;
color: white;
}
header nav a.selected {
background-color: red;
border-bottom: 5px solid white;
}
Many thanks!
Try header nav a { background-clip: padding-box; } to remove it.
I'm having a project which need a box, having a gap between content and shadow. Here is my Sass code.
.avatar
{
display: inline-block;
border: 5px solid #FFF;
overflow: hidden;
max-width: rem-calc(160);
border-radius: 50%;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
img
{
//
}
}
and the HTML code is simple:
<div class="avatar">
<img href='' alt=''>
</div>
Please see the attached image below, I can display it correctly on modern browsers except android 4.2.2 browser. It seems that border and border radius have conflict.
I have the following HTML markup:
<div class="news_detail">
<span class="newspaper_icon"></span>
<span class="small_story_newspaper">Sky News</span>
</div>
and the following CSS applied:
.news_detail {
width: 33%;
float: right;
margin: 5px 0px;
text-align: center;
}
.newspaper_icon {
width: 17px;
height: 17px;
float: right;
margin: 0px 5px;
background: url("images/Mobile/hdpi.png") no-repeat scroll 0px -342px / 215px auto transparent;
display: inline-block;
}
.small_story_newspaper {
float: right;
font-size: 12px;
color: rgb(41, 169, 224);
}
It works perfect on all but android devices with Kitkat.
Any ideas?
I know that on Kitkat the WebView is using chromium now. Does chromium has issues with <span> that I need to know?
My guess would be that inline-block is not supported on mentioned device. Try display block with float. Also kitkat is only running on 1% of android devices, so I wouldnt bother
I'm working on a mobile application and I have a fixed footer menu.
<div id='footer'>
<ul class='menu'>
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
#footer { height:99px; background:url(../images/black2.png)repeat-x; border-top: 1px solid black; position:fixed;bottom:0;width:100%;}
.menu { max-width:640px; margin:auto; }
I tested it on an Android device. The problem is that when I change the device orientation the menu ul's margin:auto doesn't work until I click on another menu item.
Thank you!
I resolved this by changing CSS.
#footer { height:99px; background:url(../images/black2.png)repeat-x; border-top: 1px solid black; position:fixed;bottom:0;width:100%; text-align:center;}
.menu {width:100%; max-width:640px; display:inline-block; }
I would do something like this:
HTML
<div class="footer">
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
CSS
.footer { background: black; position: fixed; bottom: 0; width: 100%; text-align: center; }
.footer ul { color: white; width: 90%; margin: 0 auto; display: block; list-style: none; }
.footer ul li { padding: .25em; display: block; }
On top of that I'd tell you to checkout the "fixed-fixed" plugin from the Filament Group (that aids in mobile fixed positioning since all phones/ tablets don't support it):
https://github.com/filamentgroup/fixed-fixed
On top of top of that, I'd recommend their entire workflow for building for mobile:
https://github.com/filamentgroup/Southstreet/
I'm having a problem with a web page I'm developing, a Price Per Unit Calculator (in HTML, CSS, and JavaScript/jQuery): When viewed in the Android 2.3.3 default web browser, the menus near the top of the page, Unit type and Display unit, aren't popping up (to let the user select an item from the menu). This problem occurs in both the Android emulator and an Android phone running 2.3.3. The menus work fine with later versions of the Android web browser I've tested (4.0.3 and 4.2 in the emulator), as well as in iOS 6 and on a computer (Firefox and Chrome browsers tested).
In the Android 2.3.3 web browser, when a menu is tapped, a colored rectangle should highlight the menu on the web page, then the menu options pop up in a list on the screen. On my web page, for those menus near the top of the page, the rectangle appears (wider than the menu that was tapped), but seems to stop when it hits the bottom of the div (row) the menu is in, and no menu options pop up; see the orange rectangle in this screenshot. The menus lower in the web page work fine.
Here's the simplified HTML:
<div class="header">
<div class="global">
<div id="unitTypeDiv" class="options col1 unit"><!-- left column-->
<label for="unitType" class="label">Unit type</label><br>
<select name="unitType" id="unitType" class="unitType_input" title="Unit type">
<option value="weight">weight</option>
<option value="volume">volume</option>
<option value="length">length</option>
<option value="area">area</option>
</select>
</div>
<div id="displayUnitDiv" class="options col2 unit"><!-- center column-->
<span id="displayUnitLabel"><label for="displayUnit" class="label">Display unit</label><br></span>
<select name="displayUnit" id="displayUnit" class="displayUnit_input unit_input" title="Display unit">
<option value="oz">oz</option>
<option value="lb">lb</option>
</select>
</div>
</div> <!-- .global -->
</div> <!-- .header -->
<div id="products">
<form method="post" name="priceper" id="priceper">
<div class="product" id="product_0">
<div class="name">
<label for="name_0" class="label"><span>Product 1:</span> Name<br></label>
<input name="name_0" type="text" id="name_0" title="Product 1">
</div>
<div class="unit row">
<label for="unit_0" class="label">Unit</label><br>
<select name="unit_0" id="unit_0" class="unit_input product_unit_input" title="Please choose a unit"> <!--replace with select (pop-up menu)-->
<option value="oz">oz</option>
<option value="lb">lb</option>
</select>
</div>
</div> <!--product_0-->
</form>
</div> <!-- products -->
Edit: Here's the CSS:
body {
background-color: #ddd;
color: #222;
font-family: Helvetica;
margin: 0;
padding: 0;
}
/* HEADER STYLES */
.header {
position:fixed; /* Keep header (title) at top of page always */
top: 0;
width: 100%;
z-index:99998; /* Bring to front */
/*border: 1px dashed red;*/
}
.header h1 {
padding: 0;
text-align: center;
text-shadow: 0px 1px 0px #fff;
/*background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(red));*/ /* iPhone linear shading; not working*/
/*border: 1px dashed red;*/
margin-top: -3px;
margin-bottom: -3px;
background-color: #ccc;
padding-top: 5px;
padding-bottom:3px;
text-align: center;
border-bottom: 1px solid #666;
}
.header h1 a {
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.global {
/*border: 1px dashed red;*/
background-color: #eee; /* Background color */
height: 43px;
padding-top: 0px;
z-index: 9999;
/*border-bottom: 1px solid #666;*/
}
.col1 { /* Unit type menu */
float: left;
margin-left: 5px;
/*border: 1px dashed red;*/
}
.col2 { /* Display unit menu */
float: none;
overflow: hidden;
text-align:center;
/*display: table-cell;*/
/*border: 1px dashed green;*/
position: absolute;
/* center on browser window: put left at 50%, then offset left (margin-left) by half the width (half of 30% = 15%) */
width: 50%;
position: absolute;
left: 50%;
margin-left: -25%;
}
/* PRODUCT STYLES */
.product {
padding-top: 2px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
background-color: #DCDCDC;
border-bottom: 1px solid #999999;
color: #222222;
}
#product_0 {
margin-top: 100px;
}
Apparently the Android 2.3.3 web browser didn't like the last CSS property, margin-top, on a div, #product_0, below the one the problematic menus were in. Simply changing the property to padding-top worked:
#product_0 {
padding-top: 100px;
}
Here's the resulting web page (full version rather than simplified code).