I have a JQuery mobile application that is running on a tablet. But my problem is that my button (SEARCH) losses position and I would have to drag the screen if I want to see it when the tablet orientation is in landscape. How do I make sure it is still visible on both potrait and on landscape?
<div id="divBody" data-role="page" data-theme="c">
<div data-role="header" class="hesto">
<h1>Weld Splice </h1>
</div>
<div data-role="content">
<div> <input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value=""/></div>
<div id="divButton"> Search</div>
</div>
<div id="divFooter" data-role="footer" >
</div>
</div>
Wrap each one - input and button - with div class ui-grid-solo
<div class="ui-grid-solo">
<input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value="" />
</div>
<div class="ui-grid-solo">
<div id="divButton">Search
</div>
</div>
Reference: Grids - JQM v1.3.0
If the button is getting pushed down why not placed it in the header bar??
If you are ok with the approach you may change something as below
<div id="divBody" data-role="page" data-theme="c">
<div data-role="header" class="hesto">
<h1>Weld Splice </h1>
Search
</div>
<div data-role="content">
<div>
<input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value="" />
</div>
<div id="divButton"></div>
</div>
<div id="divFooter" data-role="footer"></div>
</div>
Check out a live fiddle at http://jsfiddle.net/mayooresan/DuReF/
Related
I have just started learning Bootstrap and am trying to implement it in a web page. But I am having trouble in preventing the bootstrap class divs from overlapping each other. On full screen, the web page looks like:
On reducing the width of the window by some amount, it becomes:
And making window almost as small as mobile screen I get this:
My html code for this is:
<body>
<div id="point" class="row container-fluid">
<div id="point_display" class="col-md-10">
</div>
<div id="point_info" class="row col-md-2">
<div class="col-md-8">
<h5>Current point position:</h5>
<p></p>
</div>
<div class="col-md-8">
<input type="checkbox" id="coordinate_transform" onclick="transformCoordinate(this.checked)"><span>Transform co-ordinate system</span></input>
</div>
<div class="col-md-8">
<h5>Transformation matrix:</h5>
<div id="transformMatrix">
</div>
</div>
</div>
</div>
<div id="control" class="row container-fluid">
<div id="slider" class="col-md-2">
<input type="range" value="0" min="0" max="100" oninput="changePosition(this.value)" onchange="changePosition(this.value)" />
</div>
<!--div id="coordinate" -->
<div class="col-md-3"><span>X: </span><input id="newX" type="number" step="0.0001" value=1 00></div>
<div class="col-md-3"><span>Y: </span><input id="newY" type="number" step="0.0001" value=1 00></div>
<div class="col-md-3"><span>Z: </span><input id="newZ" type="number" step="0.0001" value=- 300></div>
<!--/div-->
<div class="col-md-3"><button id="change_destination" onclick="setNewDestination()">Set New Destination</button></div>
<div class="col-md-3"><button id="reset_camera" onclick="resetCamera()">Reset Camera</button></div>
</div>
<script src="js/main_script.js"></script>
</body>
The black part of the page with axes and stuff is dynamically added to the div with id= point_display inside div point and the matrix is also dynamically added in the div with id = `transformMatrix"
Please help me figure out how to prevent the overlapping of the elements so that on reducing width, they just stack one below other.
I'm trying to make a page via Foundation that lets users post articles, however, I'm having a problem. Here's what the page looks like: http://jsfiddle.net/60a2g5fn/ (be sure to expand the viewing window, or it will assume that you're on a mobile browser)
I'm required to post code after a JSFiddle link, so here's what the associated inputs/rows looks like.
<div class="row">
<div class="large-6 columns">
<label>Title
<input type="text" name="HK_NEWS_TITLE">
</label>
</div>
<div class="large-6 columns">
<label>Topstory Image</label>
<select name="HK_NEWS_IMAGE">
</select>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<label>Slug
<input type="text" name="HK_NEWS_SLUG">
</label>
</div>
<div class="large-6 columns">
<label>Topstory Image Preview</label>
<img src="http://www.pattiknows.com/wp-content/uploads/2014/08/love-man-woman-silhouette-sun-sunset-sea-lake-beach-300x187.jpg">
</div>
</div>
The dropdown is where they can choose the images that uses PHP and Javascript to choose and append the image from a directory. Once they pick the image, it is appended under Topstory Image Preview, but it breaks the row and makes the slug have empty space below it.
Here's an image of the before, so you can compare. I want the image to be under Topstory Image Preview, but I don't want it to create unnecessary space below the Slug input bar.
Is there any way that I can do this? I've tried multiple things (aligning the image right out of the row, doesn't work. using css to make it the background-image, doesn't work). Any help would be appreciated.
Here's a way using which you can achieve what you're trying to do. For the mobile layout, I believe it appears fine as it is but for the desktop layout, you can set the position of the image to absolute using #media-queries so that there's no empty white space to the left side of the image.
Here's a demo (view as full page):
#media (min-width: 1025px) {
img#ts-preview {
position: absolute;
}
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/normalize.min.css" rel="stylesheet" />
<form method="POST" action="news">
<div class="row">
<div class="large-6 columns">
<label>Title
<input type="text" name="HK_NEWS_TITLE">
</label>
</div>
<div class="large-6 columns">
<label>Topstory Image</label>
<select name="HK_NEWS_IMAGE"></select>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<label>Slug
<input type="text" name="HK_NEWS_SLUG">
</label>
</div>
<div class="large-6 columns">
<label>Topstory Image Preview</label>
<img id="ts-preview" style="padding-bottom:20px;" src="http://www.pattiknows.com/wp-content/uploads/2014/08/love-man-woman-silhouette-sun-sunset-sea-lake-beach-300x187.jpg">
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Short Story
<input type="text" name="HK_NEWS_SHORT">
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>News Content</label>
<textarea name="HK_NEWS_CONTENT"></textarea>
</div>
</div>
</form>
<div id="container" style="width:100%;">
<div id="text1" style="width:20%;float:left;">1<br>1</div>
<div id="text3" style="width:20%;float:right;">3<br>3</div>
<div style="width:60%;float:none;">
<textarea id="phrases" cols="50" rows="20"></textarea>
<div id="text2">2<br>2</div>
</div>
</div>
I wish to have 3 columns. In the middle column, I wish to have a textarea and then text directly under the textarea. However, the text 2<br>2 is appearing in the left column. What am I doing wrong?
http://jsfiddle.net/z7UXW/22/show/
see this, Demo
<div id="container" style="width:100%;">
<div id="text1" style="width:20%;float:left;">1<br>1</div>
<div style="width:60%;float:left;">
<textarea id="phrases" cols="50" rows="20"></textarea>
<div id="text2" >2<br>2</div>
</div>
<div id="text3" style="width:20%;float:right;">3<br>3</div>
</div>
I am trying to place an overlay from an iframe and am having no success.
My main html calls an iframe in the body with an html like so;
<iframesrc="links.html"></iframe>
this "links.html" file holds the links to overlays. Like so;
<a class="popup-link" href="#overlay-1" onclick="overlay.show('overlay-1', this);return false;">Click here to see overlay 1</a>
I have placed them in the main html and in the links.html files but they don't work :(
The overlays look kinda like this,
<!-- PANEL 1.1 -->
<div class="common-overlay" id="overlay-1">
<div class="head">
<p><a class="common-overlay-close" href="#close">Close [x]</a></p>
</div>
<div class="body">
<div class="main">
<div class="title subtitle">
<h2>Forgot password?</h2>
</div>
<div class="container alternate buttons-last">
<div class="container-body">
<p class="overlay-intro">Please enter your ID.</p>
<!-- ========================================== -->
<!-- EXAMPLE FORM - DO NOT ACTUALLY SUBMIT FORM -->
<!-- ========================================== -->
<form action="[REPLACE]" class="column-form" enctype="multipart/form-data" method="post">
<p><label for="Display_name">ID:<span class="required">*</span></label><span><input name="ID" size="25" value="" style="width: 200px;" class="required" type="text" /></span> </p>
<p>
<p>Don't know ID?</p>
<div class="overlay-rule"><hr />
</div>
<p class="first"><input class="btn-arrow-pri" name="submit" value="Proceed" type="submit" /></p>
</form>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
How can i accomplish this?
Thanks in advance
Most of the time when the need of overlaying occurs, css properties that generate an output towards what is desired is generally the best bet. I'd recommend looking into Twitter's Bootstrap, it's a great framework and be an immense help towards what I believe you're trying to accomplish: http://getbootstrap.com/2.3.2/ (I'd stick w/ 2.3.2 until the official 3 is released).
Also, try this adjustment:
<!-- PANEL 1.1 -->
<div class="common-overlay" id="overlay-1">
<div class="head">
<p><a class="common-overlay-close" href="#close">Close [x]</a></p>
</div>
<div class="body">
<div class="main">
<div class="title subtitle">
<h2>Forgot password?</h2>
</div>
<div class="container alternate buttons-last">
<div class="container-body">
<p class="overlay-intro">Please enter your ID.</p>
<!-- ========================================== -->
<!-- EXAMPLE FORM - DO NOT ACTUALLY SUBMIT FORM -->
<!-- ========================================== -->
<form action="[REPLACE]" class="column-form" enctype="multipart/form-data" method="post">
<p><label for="Display_name">ID:<span class="required">*</span></label><span><label>
<input name="ID" size="25" value="" style="width: 200px;" class="required" type="text"/>
</label></span></p>
<p>
<p>Don't know ID?</p>
<div class="overlay-rule"><hr />
</div>
<p class="first"><input class="btn-arrow-pri" name="submit" value="Proceed" type="submit" /></p>
</form>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
We need to achieve that the search form with search button fill the entire column area.
UPDATE:
I have a simplified version of code which can be viewed here: http://jsfiddle.net/persianturtle/Trgr6/10/
Another, previous jsFiddle version is here:
Here is the live example http://jsfiddle.net/Trgr6/3/
You will see black area as an example of the entire area to fill in the old version.
In the new version, I tried to set the width of the search form to the width of the:
.row-fluid .span9 { }
Class width, which is:
width: 74.46808510638297%;
And the code:
<div class="searchbar">
<div class="container">
<div class="row-fluid">
<div id ="test" class="span9">
<form class="form-search">
<div class="input-append span12">
<input type="text" class= "search-query" placeholder="Enter Search">
<button type="submit" class="btn">Search</button>
</div>
</form>
</div>
<div class="span3 info">
.span3 column
</div>
</div>
</div>
</div>
Im not sure if I updated your Fiddle or not, but yeh. This will work.
http://jsfiddle.net/xWTuF/2/
Override the input append from inline-block to block and give it a padding-right equal to that of the overall button width and the padding on the input.
Give the input a width of 100%;
.container .form-search .input-append {
display:block;
padding-right:99px
}
.input-append input.search-query {
width:100%
}
Oh I also removed the span12, you dont need it. Reorganised the html to:
<div class="searchbar">
<div class="container">
<div class="row-fluid">
<div class="span9">
<form class="form-search">
<div class="input-append">
<input type="text" class="search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
</div>
<div class="span3 info">
.span3 column
</div>
</div>
</div>
</div>