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.
Related
I am stuck in rendering div via ng-repeat. I want to render the coming divs in ng-repeat one by one covering half the page.
Here is my code:
<div class="col-md-12">
<div class="form-group col-md-6" ng-repeat="field in selectedfields" ng-if="!selectedfields[$index].allowedValues || selectedfields[$index].allowedValues.length === 0 ">
<label class="control-label" for="domain">{{field.name}} </label>
<input placeholder="{{field.name}}" class="form-control" type="text" id="domain">
</div>
<div class="form-group col-md-6" ng-repeat="field in selectedfields" ng-if="selectedfields[$index].allowedValues.length >= 1">
<label class="control-label" for="{{field.name}}">{{field.name}} </label>
<select class="form-control">
<option value="{{allowedValue.name}}" ng-repeat="allowedValue in field.allowedValues" ng-model="field.allowedValues">{{allowedValue.name}}</option>
</select>
</div>
</div>
The divs(textboxes/dropdown) under the parent div should appear one by one covering half the page, but they are coming on full page. Each div is rendering on next line. Can someone please suggest what am I doing wrong in giving the css class?
Your final layout should be
<div class="col-md-12">
<div class="row">
<!-- ng-repeat stuff goes here !-->
</div>
</div>
I am using a Bootstrap template to build a website. I have 2 questions I am struggling to solve:
1) When I put my HTML code into a < section >, automatically some sort of top margin/padding is applied to the section. There is no css code affecting the section.
I can't seem to be able to control how much padding/margin is applied at the top/bottom.
Would anyone know if this is normal and how can I control amount of spacing?
2) If I don't use the section but just the div to separate each portion of my code the text goes right at the top of my page with no spacing at all. I tried using some css but failed at any attempt. This my most recent and basic attempt (also failing)
.q2 {
position: relative;
margin-top: 20px;
}
Thanks for any help - I have tried adding and removing section, using the bootstrap grid, a table but it all still gets either squashed together (if I don't use sections) or way too far apart (if I use sections).
HTML code:
<section>
<div class="container">
<form action="sqlQuery.php" method="post" name="foundationsurvey">
<div class="row">
<div class="col-12 text-center pb-3">
<label for="Q1">Q1</label>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-left ml-4">
<input type="radio" id="dry" required> <label for="dry"> Dry </label>
</div>
</div>
<div class="row">
<div class="col-12 text-left ml-4">
<input type="radio" id="normal" required> <label for="normal"> Normal</label>
</div>
</div>
</div>
<!--Q2-->
<div class="container">
<div class="row">
<div class="col-12">
<label for="Q2">Q2</label>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" name="product1" placeholder="Brand, Product Name" required>
</div>
<div class="col">
<input type="text" name="product2" placeholder="Brand, Product Name" required>
</div>
</div>
</div>
</section>
</header>
Where is the q2 class applied?
try the following:
... <div class="container q2"> ...
all styles work:
section {
margin-top: 150px;
}
.q2 {
/* position: relative; */
margin-top: 20px;
}
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>
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/
I'm using Bootstrap v2.1.1. I'm finding problem with the width of inputs.
This is my simple form:
<form>
<div class="controls-row">
<div class="span3">
<label class="control-label">A:</label>
<div class="controls">
<input type="text" class="span3"/>
</div>
</div>
<div class="span4">
<label class="control-label">B:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
<div class="controls-row">
<div class="span3">
<label class="control-label">C:</label>
<div class="controls">
<select class="span3">
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</div>
</div>
<div class="span4">
<label class="control-label">D:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
</form>
Using this code the select has a different width, it is NOT the same as <input> with span3 class.
It is very very strange because, if i put span3 in and (using the code above) the width is equal.
COuld someone explain me how can I set equal widths using bootstrap span*
According to the Bootstrap doumentation using the span* classes on your inputs etc should work.
http://twitter.github.com/bootstrap/base-css.html#forms
I'm wondering if it may not be working because you have your form layed out as if it's meant to be a form with the class of "form-horizontal" on it but you don't actually have that class in place.
I'm not sure if a horixontal form can use the span* classes to size it's input elements.
You could try using the "input-block-level" class on your elements instead and see if that does the job for you.
Try adding "inline-block-level"
http://twitter.github.com/bootstrap/base-css.html#forms