I want a label and a control to behave as follows:
if the the width of the screen in less than X the label and the control should be in different rows and the control should expand to take the full width.
if the width is higher (or equal) than X, the label and the control should be in the same row and the control should be aligned right. Also, the text and the control should be vertically aligned center:
I have this code (test the jsFiddle):
HTML:
<div class="container">
<div class="dispInlineLabel" >
<label for="rb_geschlecht-2a">Geschlecht</label>
</div>
<div class="dispInline">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="rb_geschlecht" id="rb_geschlecht-2a" value="0">
<label for="rb_geschlecht-2a">weiblich</label>
<input type="radio" name="rb_geschlecht" id="rb_geschlecht-2b" value="1">
<label for="rb_geschlecht-2b">männlich</label>
</fieldset>
</div>
<div class="clearFloats"></div>
<div class="dispInlineLabel" >
<label for="ti_gebdat">Geburtsdatum</label>
</div>
<div class="dispInline">
<input name="ti_gebdat" id="ti_gebdat" style="text-align: right" type="date" data-theme="d">
</div>
<div class="clearFloats"></div>
</div>
CSS:
.dispInline, .dispInlineLabel{
display: inline-block;
border-bottom-width:0;
}
.dispInlineLabel{
min-width: 120px;
}
.dispInline{
float:right;
}
.clearFloats{
clear:both;
}
Here, the control and label are in different or same row as expected.
My problems are:
When the control is in a different row, it doesn't expand to full width.
Control and label are not "vertically aligned center" when on the same row
Could anyone help?
use media query like this:
#media all and (max-width: 500px){
.dispInline{
width:100%;
}
}
jsFiddle
more info
update:
for vertically align you need to set all rows in a same height then set line height to your labels as the height:
CSS
.dispInlineLabel{
min-width: 120px;
height:55px;
}
.dispInlineLabel label{
line-height:55px;
}
.dispInline{
float:right;
height:55px;
}
jsFiddle
Related
Some text (not all) in the div suddenly go to new line while the text is not reach the max width of the div. For example:
With this long text, in the view it show correctly: "UMI TERIYAKI & SUSHI", this text is placed on the same line in my div.
My HTML:
<listitem><div style="width: 100%;background-color: white; margin-bottom: 1px;">
<div class="row">
<div class="col">
<div class="row font-weight-bold ng-binding">UMI TERIYAKI & SUSHI</div>
<div class="row ng-binding">MONTREAL ROAD</div>
</div>
</div>
</div>
</listitem>
Result in browser:
UMI TERIYAKI & SUSHI
MONTREAL ROAD
But with this shorter text: "MACS SUSHI", "MACS" and "SUSHI" are placed on two seperated lines in my div => I expect these text are placed on the same line too because the text length is not reach the max width of div no need to go to the new line.
My HTML:
<listitem><div style="width: 100%;background-color: white; margin-bottom: 1px;">
<div class="row">
<div class="col">
<div class="row font-weight-bold ng-binding">MACS SUSHI</div>
<div class="row ng-binding">BAYSHORE DRIVE</div>
</div>
</div>
</div>
</listitem>
Result in browser:
MACS
SUSHI
BAYSHORE DRIVE
Can you paste the code?
Edit
There's no problem with the code in the div. The <listitem> and <div>'s are fine themselves.
It's more likely the width of the div on the page is the problem. But I don't know for sure without seeing more of the code.
You could try giving the <div> in question a background color to clearly see it's actual size.
I am trying to create a mobile-only site using ASP.NET MVC and Bootstrap. I've created a form, part of which appears below.
<form action="/Client/InitializeProgram" class="form-horizontal" method="post" role="form">
<div class="wizard-step">
<h4>General Information</h4>
<div class="form-group">
<label class="col-md-2 control-label" for="DateOfBirth">Date of Birth</label>
<div class="col-md-10">
<input Placeholder="MM/DD/YYYY" class="form-control" data-val="true" data-val-date="The field Date of Birth must be a date." data-val-required="Date of birth is required" id="DateOfBirth" name="DateOfBirth" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DateOfBirth" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Gender">Gender</label>
<div class="col-md-10">
<div class="radio">
<input checked="" id="Gender_0" name="Gender" type="radio" value="0"></input>
<label for="Gender_0">Male</label>
</div>
<div class="radio">
<input id="Gender_1" name="Gender" type="radio" value="1"></input>
<label for="Gender_1">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Height</label>
<div class="col-md-10">
<input Placeholder="Feet" class="form-control" data-val="true" data-val-number="The field HeightFeet must be a number." data-val-required="The height feet is required" id="HeightFeet" name="HeightFeet" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="HeightFeet" data-valmsg-replace="true"></span>
<input Placeholder="Inches" class="form-control" data-val="true" data-val-number="The field HeightInches must be a number." data-val-required="The height inches is required" id="HeightInches" name="HeightInches" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="HeightInches" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</form>
I'm using my Android phone for testing and have noticed something strange. When the page with my form is fist loaded, everything fits within my phone's display, exactly as expected.
But when I click in one of the text boxes, it appears to zoom in slightly, making my page content a little wider than my phone. So a small portion of the page is not visible unless I scroll horizontally.
If I rotate my phone into landscape orientation, the display is wider. However, it appears that phone zooms again so that the page is again a little too wide for the display (by about the same percent).
I can't tell what's going on and am having trouble finding anything on this. Has anyone here seen this? Can anyone explain what's happening? My preference is to format my page so that it fits within my device's display.
EDIT
If it makes any difference, I have the following in <head> section of my page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Also, I have the following CSS on this page. It was provided by someone else who was helping me to get my tables to fit within the phone screen.
body {
padding-top: 50px;
padding-bottom: 20px;
}
/*
Re-enable word wrapping in table cells.
Can we simplify with .table-responsive > .table th, .table-responsive > .table td ?
*/
#media screen and (max-width: 767px) {
.table-responsive>.table>thead>tr>th,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tfoot>tr>td {
white-space: normal;
}
}
It happens on Iphones too, not sure if it is the same cause on Android but setting the font-size to 16px on every control seems to stop the auto zooming effect on Iphone.
Here is the css to set font-size on every control:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
font-size: 16px !important;
}
I am developing the android apps in phonegap but in that my html not showing properly on android phone. problem is that i have four div's first div showing the canvas which is width and heigh is 100% , second div showing the header and third div showing the text data which is coming from server and last is div is for contact form but what happen if content of the third div is increases then it showing content from the middle but i want to show the page from top. please see the below image. following is the my html and css which is working properly on browser but not working properly on real device and i am also uploading screen shot. Please help me find out this bug.
html
<div id="page">
<div id="wrapper" style="display: none">
<div id="header">
<div class="designtech-left back"><a href="javascript:void(0);" id="backToFirstPage" class="back_button" >Back</a>
</div>
<div class="designtech-left"><h3 style=" font-size:14px; font-weight:bold;">Coures Detail</h3></div>
</div>
<div class="designtech-clear"></div>
<div class="course_info_div" id="courseInfo">
//dynamic content name , branch, duration and desc
<p class="pclass">Course name : <span> Catia & 3D Max</span> </p>
<p class="pclass">Branch name :<span> Pune</span> </p>
<p class="pclass">course duration :<span> 6 Months</span> </p>
<p class="pclass">Description : <span> Details</span> </p>
</div>
<div class="designtech-clear"></div>
<div class="contact">
<form id="contact-form" method="post">
<h3>Enquiry form</h3>
<div>
<label>
<span>Name: (required)</span>
<input placeholder="Please enter your name" type="text" id="name" >
</label>
</div>
<div>
<label>
<span>Email: (required)</span>
<input placeholder="Please enter your email address" type="email" id="email-id" >
</label>
</div>
<div>
<label>
<span>Telephone: (required)</span>
<input placeholder="Please enter your number" type="tel" id="contact" >
</label>
</div>
<div>
<label>
<span>Message: (required)</span>
<textarea placeholder="Include all the details you can" id="enquiry" ></textarea>
</label>
</div>
<div class="center">
<button name="enquiry-form" type="button" id="enquiry-form">Submit</button>
<img src="res/drawable-mdpi/gif-load-medium.gif" id="email-progress" style="display: none;"/>
</div>
</form>
</div>
</div>
</div>
css
#page{
width:100%!important;
height:100%;
background-color:#ffffff;
text-align: left;
margin: 0pt auto;
padding: 0 0px;
position: relative;
}
#wrapper{ width:100%;}
#header {
position: fixed;
z-index: 3;
top: 0px;
left: 0px;
width: 100%;
min-height:45px;
color: #eee;
font-weight: bold;
border-bottom: 1px solid #FFFFFF;
background: rgb(255,5,5); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,5,5,1) 0%, rgba(143,2,34,1) 69%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,5,5,1)), color-stop(69%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0505', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.course_info_div
{
position:relative;
top:45px;
background:#BCB9B9;
padding: 12px 10px 20px 10px;
font-weight:bold;
font:16px;
text-align: justify;
}
.course_info_div p.pclass{
font-weight:bold;
padding: 5px 0;
}
.contact{
width:100%;
margin:0 auto;
}
#contact-form {
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:#F9F9F9;
padding: 10px 30px 0px 10px;
position: relative;
}
below image showing the two views. left side view which is I want and right side view is on real device and emulator.
Pardon if this is way off but have you tried calling an location.href to an anchor point on the page after the server data has been received? I'm curious if that would work. So something like:
HTML:
<div id="courseInfo">
<a name="courseInfo"></a>
<p class="pclass">Course name : <span>
<!-- ...etc -->
</div>
Javascript:
function refreshUIAfterServerData(){
document.location.href = 'index.html#courseInfoAnchor';
}
Clearly this doesn't get to why the issue is occurring - but honestly after dealing w/Android PhoneGap stuff myself for a while now - I've given up asking why on many things and just do what I have to to get in and out fast as I can!
i would like to know about these features to implement it in an html file in eclipse for Phonegap android.
MATCH PARENT / WRAP CONTENT
I did not know how to give MATCH PARENT / WRAP CONTENT, so i gave as the following 2 ways
<div id="container" style="width:315px height:150px">
OR WHEN I GIVE
<div id="container" >
the problem i am facing is when i don't give any width..this element is an image,it goes till the measurement ends / the maximum limit.
SPACE BETWEEN THE DIV ELEMENTS AND SPACE VISIBLE IN THE LEFT AND THE TOP OF EACH ELEMENT
WHEN I GIVE THE FOLLOWING,THERE IS A GAP TO THE LEFT AND TOP OF THE VIEW
<div id="wrapper" style="width: 100%; float: left; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
HORIZONTAL SCROLL VIEW
FOR horizontal scroll view i gave
div#main
{ //background-image:url('img/image1.png');
position:absolute;
top:40%;
margin-top:-50px;
}
when we scroll the image,the backgrounds too scrolls...But, whereas i want the image alone to scroll bot the background...
WHAT SHOULD I DO?
so,please help me for setting MATCH PARENT,WRAP CONTENT,AND HORIZONTAL SCROLL VIEW IN HTML()PREFERABLY??
edit:code after suggesrtions
<div id="wrapper" style="width: 100%; float: left;padding:0px; margin:0px;">
<div id="container" style="padding:0px; margin:0px;">
<div id="head" style="background-image:url(mdpi/purple_navigation.png);"></div>
<h1 style=" margin-left:0px; margin-top:0px; padding:0px; margin:0px;"> ABC</h1></div>
<div id="wrapper" style="padding:0px; margin:0px;">
<div id="images" style="padding:0px; margin:0px;">
<marquee direction="left" behavior="alternate" scrolldelay="3" width="100% padding:0px; margin:0px;"><img src="mdpi/banner1.png"/><img src="mdpi/banner2.png"/><img src="mdpi/banner3.png"/><img src="mdpi/banner4.png"/><img src="mdpi/banner5.png"/></marquee>
</div>
<div id="title" style="padding:0px; margin:0px;"><h1>title</h1></div>
<div id="desc" style="padding:0px; margin:0px;"><p>description </p></div>
</div>
</div>
</body>
before changes
after changes
HOW SHOULD I BRING THAT TEXT AT HEADER(ABC/TITLE) TO THE CENTER?
To center the text for the header, all you have to do is to add text-align:center; to that div.
Also, I have changed a couple of things in this fiddle.
Is this the result you want, just without the background colors?
The changes I made was that I moved the #description div and added styles to some of the other divs.
Let me know if you have any other issues or if this isn't working for
you.
Hope this is satisfactory :)
So, i'm scratching my head here in frustration at the android browser! Android version 2.3.6.
What is wrong with this thing? The next and before(perhaps previous) buttons
do not work! ...on some basic jquery form fields.
Having:
<div data-role="page">
<div data-role="header">
<img src="img/logo.png" style="margin-top:15px;">
</div>
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
</form>
</div>
</div>
But... if I remove data-role="header" the damn thing start working??!!
No problem of course on the Safari browser! Which is superb as usual.
Please can somebody help me?
My understanding is that if you want to add a back button you need to add a data-add-back-btn="true" to your page div. I don't see that in your example. OTOH, the hardware back button should work as well.
What is it that doesn't work?
So, after many hours... i noticed stuff in my css was breaking this functionality...
/*article, aside, details, figcaption, figure, footer, header, hgroup, nav,
section { display: block; } audio, canvas, video { display: inline-block;
*display: inline; *zoom: 1; } audio:not([controls]) { display: none; }
[hidden] { display: none; } html { font-size: 100%; overflow-y: scroll;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }*/
Removed above and it worked.
Not sure, might be the boilerplate used.