Sections invisible until window resize - css

I cant get sections to work properly, they are invisible until a window resize.
foundation.css:2413 code at this line setting section-container to visibility:hidden
I copied the actual code but even examples doesnt work in that containing divs.
<div class="large-8 columns large-centered">
<form class="custom ajaxform" data-validate="parsley" method="post" action="formProcess">
<input type="hidden" name="formtype" value="test" >
<fieldset>
<legend>Test</legend>
<span class="icon24 icon-close"></span>
<h4><small>Test</small></h4>
<?= View::make('forms.header') ?>
<h4><small>Test</small></h4>
<div class="section-container tabs" data-section="tabs">
<section class="active">
<p class="title" data-section-title>Test</p>
<div class="content" data-section-content>
<div class="row">
<div class="large-4 columns">
<label>Test *</label>
<input type="text" name="test" data-required="true">
</div>
</div>
</div>
</section>
<section>
<p class="title" data-section-title>test Tab 2</p>
<div class="content" data-section-content>
<div class="row">
<div class="large-6 columns">
<label>Second *</label>
<input type="text" name="second" data-required="true">
</div>
</div>
</div>
</section>
</div>
<div class="row">
<div class="large-12 columns">
<button class="small radius button" style="float:right" type="submit">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>

Probably because you were adding the sections programmatically. In that case, you need to force a resize, so that foundation will be triggered to draw them correctly.
I had the same problem, and after quick googling, this would solve it:
$('[data-section]').trigger('resize');

If a
<div>
is not visible then it may means that it doesn't have a well defines height and width. Then rendering a content is not meaningful. To avoid that flaw we have to add a height and width.
<div class="section-container tabs" data-section="tabs" style="height: 400px; width : 400px;"></div>
Mention your respective height and width.

Related

Ordering does not work on Bootstrap 4

I want to different order on Desktop and on mobile,
Currently this is the order
On Med+ :
On small:
Desktop is good. This is the right position.
On mobile I want the picture to come below the button and the test.
I have tried order-sm-fist and order-sm-last and also order-1 until order-2 but nothing seems to change. Not sure what I am doing wrong:
<section class="feature section">
<div class="container">
<div class="row">
<div class="heading">
<h2>Try it now!</h2>
</div>
<div class="col-md-5 order-md-last">
<img src="The image url is here"
class="" id="generated-monKey" alt="">
</div>
<div class="col md-2 order-md-1">
<br>
</div>
<div class="col-md-5 order-md-first text-center">
<p>Enter a Banano wallet address and press the "Generate monKey" button.</p>
<br>
<p>If you do not have a Banano wallet you can create one in BananoVault or simply generate a random Banano
wallet address.</p>
<br>
<div class="container">
<input type="text" class="form-control form-rounded" placeholder="Banano Address" maxlength="64" size="65">
<br>
<div class="container">
<div class="row">
<form>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Accessories</label>
</div>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Background</label>
</div>
</form>
</div>
</div>
</div>
<br>
<button type="button" class="btn btn-lg btn-success form-rounded" border>Generate monKey</button>
<br>
<br> Monkeys are perfect for avatars. Click on the monKey image in order to download it.
</div>
</div>
</div>
</section>
In this example I changed the md to first and last which means even on Desktop I should see the image on the right and the text on the left and yet nothing changes.
Your HTML structure is so messy. Here are my 2 cents:
No nested container
cols should come right after row.
What's up with the missing - on col md-2? And why do you need a column wrapping a <br>?
Cleaned up HTML structure
<section class="feature section">
<div class="container">
<div class="heading"></div>
<div class="row">
<div class="col-md-6">
<form />
</div>
<div class="col-md-6 order-md-first">
<img />
</div>
</div>
</div>
</section>
fiddle: http://jsfiddle.net/aq9Laaew/144878/

How can I make the input/text takes the whole width of the div in Bootstrap 4?

I am trying to use bootstrap 4, I have a simple div contains a text box. I want the text box to take the div width. I thought in Bootstrap the input, by default, take the full width?
What is really bugging me is that the code ran correctly here in the snippet??
Here is the sample code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
The above code is exactly what I have. I am not sure this is the right way to do this?
I don't know if this can help, I am using this code inside a view (MVC project).
So the this is how it looks inside visual studio:
Layout:
<div class="container">
<div class="row">
<div class="col-md">
#RenderBody()
</div>
<div class="col-md d-none d-md-block">
<!------>
</div>
</div>
<footer>
<p>© #DateTime.Now.Year - My Project</p>
</footer>
</div>
And this is the view:
<input type="text" class="form-control" placeholder="Email address">
This is how it looks when I render the view (there are other CSS related to background color, etc.. that I didn't add here)
Columns have padding of 15px on both sides. To remove the padding you can...
Use p-0 for padding:0 on the column with input:
<div class="container">
<div class="row">
<div class="col-md p-0" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Or, you can use no-gutters to remove padding from all cols in the row. This will also remove the negative margins from the row which will effect alignment with the sides of the viewport on smaller screens...
<div class="container">
<div class="row no-gutters">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Demo: https://www.codeply.com/go/d4AOm39YD3

Three column small layout bootstrap

<form class="container">
<div class="row">
<div class="col-md-1">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-3">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-1">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
I have been trying to arrange these three items in a row like this in image, but i am not sure what class to apply and also in smaller devices i need to disable the column completely.
<!-- HTML --->
<div class="module-wrap">
<form class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-3">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-6">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-3">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
</div>
/** CSS **/
.module-wrap {
width: 200px;
margin: 0 auto;
}
I added the class "hidden-xs" to the row, this will hide the div and everything in it on small devices. Also the columns must add up to a total of twelve.
You will need to wrap everything in a div to limit the total width.
I hope this solves your problem.

How to make a column stretch to fill container div (while being responsive)

I'm using Twitter Bootstrap (latest version - 2.3.2) for a site I'm building, and want to achieve the following while keeping the site responsive, and also applying best practices for it.
Here's a very rough sketch of what I want to have:
The site has a basic header with fixed navbar, a content-fluid div which has three inner divs: a span5, span6, and span1 (for a total of 12 columns). After the content div, a sticky footer with company/copyright info and such.
The problem I'm having is with the span1 column. It is basically decorative (it has 4 vertical color bars, sized at 25% width each), but I'd like to have:
Social link icons vertically-centered in the column (Twitter, Facebook, LinkedIn, etc), as shown by the black boxes.
Text rotated 90 degrees counter-clockwise inside each colored bar. It's only one word each, and is not a priority.
Each bar stretching to fill the full height of the parent container (in this case, the content div), since the height of the page is currently set by the highest div, whether it's span5 or span6.
I know there are probably lots of ways to achieve this (pure CSS, javascript, background-image tiling), but I'm looking for the best practices: avoiding extra markup, using right techniques, in order to learn as much as possible. I've tried setting the parent container (and inner bars) to height: 100%; and playing with min-height as well, but min-height doesn't (seem to) work with percentages.
Any help and/or constructive criticism is very welcome.
Edit: JSFiddle and full code added: JSFiddle
Also, link to the original site (in case JSFiddle screws something up): Original page
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#">Geología y Telecomunicaciones, C.A.</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Inicio
</li>
<li>Acerca de
</li>
<li class="active">Contacto
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row-fluid content clearfix" style="margin-top: 60px;">
<div class="span5">
<div class="row-fluid">
<div class="span5">
<div class="span12 logo"></div>
<div class="sidebar-intro">Construcción, Adaptación,
<br/>Adecuación y Remodelación
<br/>de <span class="emphasis-red">
locales<br>comerciales<br>empresariales
</span>
</div>
</div>
<div class="span7">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&ll=8.561755,-71.204721&spn=0.004716,0.006571&t=m&z=18&output=embed"></iframe>
<br /><small>Ver mapa más grande</small>
</div>
</div>
</div>
<div class="row-fluid">
<div class="contact-wrapper well">
<form>
<div class="control-group">
<label class="control-label" for="inputName"><i class="icon-user"></i> Nombre</label>
<div class="controls controls-row">
<input type="text" class="span12 input-xlarge " id="inputName" placeholder="Su nombre completo">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-envelope"></i> Correo electrónico</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputEmail" placeholder="nombre#sudominio.com">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-question-sign"></i> Asunto</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputSubject" placeholder="Asunto de su mensaje">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-pencil"></i> Mensaje</label>
<div class="controls">
<textarea rows="6" class="span12 input-xlarge" placeholder="Haganos llegar sus comentarios, sugerencias, consultas, etc."></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-success">Enviar Mensaje</button>
</div>
<br class="clear">
</div>
</form>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid span12">
<img class="span9 offset2" src="http://geotelca.com/sitio/assets/img/examples/flyer_back.png">
</div>
<div class="row-fluid">
<div class="row-fluid span12 address"> <address>
Zona Industrial Los Curos, Calle 1, Edif. Geotelca No. A-8, Mérida, Edo. Mérida
</address>
</div>
<div class="row-fluid e-mail">
<div class="span4 offset6"> direccion#geotelca.com
</div>
</div>
</div>
</div>
<div class="span1 social-links">
<div class="row-fluid vertical-bars">
<div class="span3 bar bar-lightblue"></div>
<div class="span3 bar bar-purple"></div>
<div class="span3 bar bar-orange"></div>
<div class="span3 bar bar-lightorange"></div>
</div>
</div>
</div>
</div>
<!--/.container-fluid-->
<div id="push"></div>
</div>
<!--/#wrap-->
<div id="footer">
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
<div class="container">
<p class="muted credit">Diseñado, codificado y mantenido por #kenshin23
</p>
</div>
</div>
I would say your best bet here would be one of the jQuery plug-in out there to accomplish this ... eqHeight.coffee seems to be pretty well documented:
https://github.com/jsliang/eqHeight.coffee/
As for centering those social links in that vertical space, you'd likely have to use more Javascript to do that. Although, honestly I'd probably put them in a div container with position: fixed; and let them slide up and down that column as the user scrolls.
EDIT:
Just noticed you added your HTML file ... in the case of the first plug-in I linked to, you would need to add a class (perhaps 'eq-height') to each of the columns whose heights you wanted to match (that first outer span5 and span6 and then all the bar column divs individually). Then on jQuery document ready, use:
$(document).ready(function() {
$(".content").eqHeight(".eq-height");
});

Bootstrap span inside a span

I have some difficulties to understand how put span inside span with bootstrap.
I want to have one block centered, with inside :
-One row with inside :
-One block at left (span6)
-One block at right (span6)
-One row with inside :
-One button centered (span 6 offset3)
You could see the problem here :
http://jsfiddle.net/UBTv4/18/
<div class='row'>
<div class='span6 offset3'>
<div class='well'>
<h2>Title</h2>
<div class='row'>
<div class='span6'>
<p class="lead">Bloc left : </p>
</div>
<div class='span6'>
<p class="lead">Bloc right : </p>
</div>
</div>
<div class='row'>
<div class='span6 offset3'>
<input id="play" type="submit" value="play" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
What is the problem ?
I want something like that :
Here is your solution.
<div class='row'>
<div class='span6 offset3 well' > <!-- .well class here instead of inner div -->
<h2>Title</h2>
<div class='row'>
<div class='span3'> <!-- instead of span6 -->
<p class="lead">Bloc left : </p>
</div>
<div class='span3'> <!-- instead of span6 -->
<p class="lead">Bloc right : </p>
</div>
</div>
<div class='row'>
<div class='span3 offset3'> <!-- instead of span6 -->
<input id="play" type="submit" value="play" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
http://jsfiddle.net/UBTv4/23/
As explanation I'll suggest you to carefully read Nesting column section from this link:
http://getbootstrap.com/2.3.2/scaffolding.html
In short description, if you nest row in a span6, the sum of inner row spans should be 6 also (3+3).
Also .well class has some paddings/marings, so you can't you it "between" parent and nested rows/spans.
I think you want to use .row-fluid instead. This will get your 2 .span6 is one row.
Here is the updated fiddle: http://jsfiddle.net/skelly/UBTv4/22/
You could also use pull-right and pull-left to make the respective blocks move left and right.
</div>
<div class='span6'>
<p class="lead pull-right">Bloc right : </p>
</div>
</div>
<div class='row'>
<div class='span6 offset3'>
<input id="play" type="submit" value="play" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
You can see the code here:http://jsfiddle.net/UBTv4/18/

Resources