I need to position a textfield and a button side by side always.The logic is something like this-The button will always be in the right side of the screen.The textfield should occupy the rest of the width in the left side.I tried giving a specific % width for the textfield.But I have to support both android and iOS devices.So there is a problem of varying screen sizes among them and that solution did not work well with all the screen sizes.This is the code I have used
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div style="display:inline;">
<input type="text" placeholder="Enter your user name"></input>
Check
</div>
</div>
</div>
</body>
</html>
Demo here - http://jsfiddle.net/d7T4E/
I am not sure but you can try with this:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div style="display:inline;">
<input type="text" style="width:50% !important; float:left;" placeholder="Enter your user name"></input>Check
</div>
</div>
</div>
</body>
</html>
Related
This question already has answers here:
What's the thing with empty script tags in HTML? [duplicate]
(2 answers)
Closed 2 years ago.
Hello when I remove the text in head
<link rel="stylesheet" src="index.CSS">
<script SRC="index.is">
The form appear but when I enter the text the form dissapear
Even tho the CSS and js files are all empty I haven't writer anything
Code
:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Organic Pe sign up</title>
<link rel="stylesheet" src="index.css">
<script src="index.js">
</head>
<body>
<section>
<div class="bix">
<div class="form">
<h2>Sign Up</h2>
<form>
<div class="uc">
<input type="text" placeholder="Username"></input>
<img src="user.png"></img>
</div>
<div class="uc">
<input type="text" placeholder="Password"></input>
<img src="lock.png"></img>
</div>
<label class="remember"><input type="Checkbox">Remember Me</input></label>
</form>
</div>
</div>
</section>
</body>
</html>
You forgot to close the <script> tag. Replace the following:
<script src="index.js">
With this:
<script src="index.js"></script>
Upon clicking on the text box, which is supposed to be showing a date picker for me to choose the date, but it is not showing at all, I wanted it to be shown upon clicking on it.
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
It seems that you haven't used script links for JQuery and/or datetimepicker.
You can try this:
$(function() {
$('#datetimepicker4').datetimepicker();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<input type='text' class="form-control" id='datetimepicker4' />
</div>
</div>
</div>
As we discussed remove the script tag completely from HTML window, and remove tag except the actual JS from JS window.
Your Code pen's code should look like this:
It is written in document that "The grid is by default center aligned.".
However, the following code does not center the cell:
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-image: url('image.png');">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid is by default center aligned
Yes, it is. The grid itself is centered (the red border), check below example. I think it is what a grid suppose to be. It define tiles and let you put component on it, so it is called grid.
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid" style="width: 512px; border:2px solid red;">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-color: green">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you really want a cell center aligned inside a grid layout, let the cell span across all columns.
We are not sure what is going to be put on the grid, or how you want to organize the content, otherwise we may suggest other component that might fit your needs.
I'm trying to get the second textbox to be across from the first one. Right it is at the bottom righthand side.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<h2>Top</h2>
<div>
<h2>TextBox 1</h2>
<div>
<input type="text" />
</div>
</div>
<div style="float:right;">
<h2>textbox2</h2>
<div>
<input type="text" />
</div>
</div>
</div>
</body>
</html>
One way is adding float: left; to the first container div, as this shrinks its width to the width of its content, allowing both inputs to appear side by side.
http://jsfiddle.net/uwFyp/
Just float the first one left
<div style="float:left;">
fiddle
You basically just need to float both of the divs containing your h2 and input elements. You can either float both left or float the first one left and the second one right (as in this example from your code above):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<h2>Top</h2>
<div style="float:left;">
<h2>TextBox 1</h2>
<div>
<input type="text" />
</div>
</div>
<div style="float:right;">
<h2>textbox2</h2>
<div>
<input type="text" />
</div>
</div>
</div>
</body>
</html>
Floating both div's left would position the second div right after the first one.
You might also find you need to put a clearing div <div style="clear:both;"></div> immediately after your second floating div. This will prevent elements following these two from being positioned immediately after the last floated element.
floating divs for alignment of inputs gets tricky messy with lots of extra code try this cleaner approach that can be styled via CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.horz-inputs label, .horz-inputs input {display: inline-block;}
/*add any css you want to the inputs and labels from this point forward
</style>
<body>
<div class="horz-inputs">
<h2>Top</h2>
<label>TextBox 1</label>
<input type="text" />
<label>TextBox 2</label>
<input type="text" />
</div>
</body>
</html>
http://jsfiddle.net/kCMvt/
Hey everyone. I made this jQuery page for a mobile phone, but the transitions are just not working correctly and I thought I had done everything correctly. I pretty much looked at the code from another example and used the same one, but not sure why it doesn't transition. There's A LOT of CSS because I got this from the jQuery theme roller so that is why it is kinda excessive. I'm not too much of a jQuery expert enough (yet) to do my own stuff, but I cna't image it is actually that complicated come to think of it.
This HTML doesn't transition:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Theme Download</title>
<link rel="stylesheet" href="themes/test1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<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>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<div>
<h1 style="font-size:16px;text-align:center;">Random Question</h1>
</div>
</div>
<fieldset data-role="controlgroup">
<input type="radio" name="radiochoice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Yes</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">No</label>
</fieldset>
<div data-role="content" data-theme="a">
<p style="text-align:center;font-weight:bold;color:#003366;">blablablab bla</p>
</div><!-- end content -->
<div data-role="footer">
<h4>cool footer</h4>
</div><!-- end page -->
<!-- start of 2nd page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Thanks For Your Opinion!</h1>
</div><!-- end header -->
<div data-role="content">
<p>Page Content</p>
</div>
<div data-role="footer">
<h4>Copyright</h4>
</div><!-- end footer -->
</div><!-- end page -->
</body>
</html>
For starters, you are missing an end tag for the first footer (or page):
<div data-role="footer">
<h4>cool footer</h4>
</div>
</div><!-- end page -->
Then, you could wrap the entire input, not just the label, in a link:
<a href="#page2">
<input type="radio" name="radiochoice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Yes</label>
</a>
<a href="#page2">
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">No</label>
</a>
Here is a working jsFiddle
Also, you should consider posting more well formatted code. Proper indentation would have made the missing tag easier to spot, and you make it more difficult for those trying to read your code when it's formatted as you have it.