I am using Bootstrap theme..
I want to make clear : both using row-fluid... in my case...html is ..
<div class="flexslider row-fluid" style="max-width:65%;">
<ul class="slides">
<!--<li>
<img src="images/slide-1.jpg">
</li>
<li>
<img src="images/slide-2.jpg">
</li>-->
<li>
<img src="images/slide-3.jpg">
</li>
<!--<li>
<img src="images/slide-4.jpg">
</li>
<li>
<img src="images/slide-5.jpg">
</li>-->
</ul>
</div>
<div class="register-box">
<div class="reg-title">Join and communicate for FREE!</div>
<div class="reg-form">
<input type="text" value="Username">
<input type="password" value="Password">
<input type="password" value="Confirm Password">
<input type="checkbox">I agree to the terms and conditions.
</div>
<div class="signup-button-area">
<button>Sign up for free</button></div>
</div>
I want to register-box (Register section) , register section will be fall down after jquery slider section..
Bootstrap 3.0.0 ? or Bootstrap 2.3.2 ?
row-fluid only works in Bootstrap 2.3.2, in Bootstrap 3.0.0 you should use row.
Read the changelog HERE if you are using Bootstrap 3.0.0.
If you are using Bootstrap 2.3.2, you can try to add a row-fluid class div to
<div class="register-box">
....
</div>
<div class="signup-button-area">
....
</div>
to become
<div class="row-fluid">
<div class="register-box">
....
</div>
<div class="signup-button-area">
....
</div>
</div>
Related
I am trying to create a contact form similar to the design bellow, but can't seem to get the correct result. I thought I could do this with flex-box, but I am having trouble getting the Text Area to Display correctly. If there is a better way to do this with keeping the HTML structure the same, I am open to suggestions.
CodePen
<form class="flex-container">
<ul>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="right">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li class="text-area">
<textarea placeholder="right"></textarea>
</li>
</ul>
</form>
Maybe there is a more quick solution but you can do that with bootstrap :
<form class="container">
<div class="col-5 row">
<div class="col-6">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
</div>
<div class="col-3 ml-3">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class = "row mt-3 heightCSS">
<textarea placeholder="right"></textarea>
</div>
</div>
</div>
CSS :
.heightCSS{
height: 8em;
width: 14em;
}
I'am having an strange issue with a switch whenever it is inside my webs navbar, I`ve made a fiddle to replicate the issue:
Issue replication
<header>
<div class="navbar-fixed">
<nav style="background: #F30617" role="navigation">
<div class="nav-wrapper">
<a id="logo-container" href="#Url.Action(" Main ", "Home ")" class="brand-logo">
<div class="flow-text title" style="white-space: nowrap;">Planning Cycle Dashboard</div>
</a>
<div class="switch" style="float: right">
<label>
<input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">
<span class="off center-align" style="color: white;">Today</span>
<span class="on center-align" style="color: white;">Weekend</span>
</span>
</label>
</div>
</div>
</nav>
</div>
</header>
<main>
<div class="switch">
<label>
<input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">
<span class="off">Today</span>
<span class="on">Weekend</span>
</span>
</label>
</div>
</main>
And as you can see, what I want to achieve is the switch that is below the navbar.
My question is...why if it is working on the switch below the navbar it does not on the one that is inside the navbar? It has the same structure...it should work!
Dont know why it pushes the text outside the switch!
Any ideas?
First of all, you have a typo in your html:
<span class="off center-align" style="color: white;">Today</span>
<span class="on center-align" style="color: white;"></span>
Weekend
</span>
See Weekend is out of the .on span? You would not miss it if you had made your code indented better.
Fix it first, then add:
.switch label .lever, .switch label .lever span {line-height:20px}
it will do the trick as without it they inherit line-height:56px from nav.
I am working on a project with Meteor JS (version 1.2) using the accounts-password package for user sign up / sign in.
I am using - or at least try to use - Zurb Foundation 5 (version 5.3) for my projekt. I tested the ewall:foundation package and the juliancwirko:zf5 package and both works well.
For accounts i added the useraccounts:foundation package.
Using the {{> atForm}} tamplate on a page works also well. The SignIn/SignUp Form displays correctly.
But using it in a fixed top NavBar does not work. It displays it not correctly. (See pictures and source below.)
I am getting NO errors in the console that something is not loading correctly.
I assume the useraccounts:foundation package to display a button/link in the navbar and then show a modal/popup with the login form.
My Question: Is any of the packages broken or am I using them wrong in any way?
Or is my assumption, that the useraccounts:foundation package should display the signin form in a nav bar with a modal, just wrong? If so, what do I need to do to get that desired behavior in my app?
The App displays the signin form in the page correctly, but in the navbar wrong.
In the mobile view ...
... it displays also not correctly.
I made a simple projekt without any router etc to test just the above packages, here is the source:
project/client/main.html
<head>
<title>ZF5 Demo</title>
</head>
<body>
{{> header}}
{{> content}}
</body>
project/client/header.html
<template name="header">
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1>ZF5 Demo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section style="left: 0%;" class="top-bar-section">
<ul class="right">
<li>Home</li>
<li>{{> atForm}}</li>
</ul>
</section>
</nav>
</template>
project/client/header.js
Template.header.rendered = function () {
$(document).foundation('reflow');
}
project/client/content.js
<template name="content">
<section class="row">
<div class="large-12 columns">
<div class="panel">
<h1>Content</h1>
{{> atForm}}
</div>
</div>
</section>
</template>
The rendered HTML looks like that (only the navbar part).
<body>
<nav data-topbar="" class="top-bar">
<ul class="title-area">
<li class="name">
<h1>ZF5 Demo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section" style="left: 0%;">
<ul class="right">
<li>Home</li>
<li>
<div class="at-form">
<div class="at-title">
<h3>Sign In</h3>
</div>
<div class="at-pwd-form">
<form method="POST" action="#" novalidate="" id="at-pwd-form" role="form">
<div class="at-input row">
<div class="large-12 columns">
<label for="at-field-email">
Email
</label>
<input aria-label="Email " placeholder="Email" name="at-field-email" id="at-field-email" type="email">
</div>
</div>
<div class="at-input row">
<div class="large-12 columns">
<label for="at-field-password">
Password
</label>
<input aria-label="Password " placeholder="Password" name="at-field-password" id="at-field-password" type="password">
</div>
</div>
<button id="at-btn" class="at-btn button" type="submit">
Sign In
</button>
</form>
</div>
<div class="at-signup-link">
<p>
Don't have an account?
<a class="at-link at-signup" id="at-signUp" href="#">Register</a>
</p>
</div>
</div>
</li>
</ul>
</section></nav>
[...content...]</body>
EDIT
I tried to wrap the {{> atForm}} template into a dropdown in project/client/header.html:
<template name="header">
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1>ZF5 Demo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section style="left: 0%;" class="top-bar-section">
<ul class="right">
<li>Home</li>
<li>
<a data-dropdown="signin-dropdown" aria-controls="signin-dropdown" aria-expanded="false">Sign In</a>
<div id="signin-dropdown" data-dropdown-content class="f-dropdown content" aria-hidden="true">
<div>
{{> atForm}}
</div>
</div>
</li>
</ul>
</section>
</nav>
</template>
The result looks like this:
Now the Menu Button looks better, ...
... but the LogIn Form is rendered incorrect.
I also tried out several other things and nothing worked out.
I think this is a problem only with the way I use foundation, because I am new to that framework and don't understand every detail.
So I will stick with the SignIn Modal Form like shown in that example.
to all moderates reading this message I had asked it in another thread but was told to post it as a stand alone question. Not my intention to cluter the forum
My twitter bootstrap container is shifted to the left for some reason. Is there any way to make it take up the whole screen despite resolution? When I use .container-fluid, it seems to shrink the overall container (even when I add .row-fluid to all my rows).
My alerts are not increasing in width. That is to say that I would like the alert (background color and all) to be the width of the container. In the link below I would like "If this is your ad login to edit" to span the whole container. However when I try .span12 it just shifts the alert. Also width:100%; does nothing to help. Also when I press login and an a login error occurs the error is shown at the far left instead of right on top of the login form.
** concerning items 2 and 3 refer to this link https://twitter.com/HassanNSaid/status/355797180063301632/photo/1 **
Requested code
<div class="container-fluid">
<div class="row well">
<?php
loginFunc();
miniLogo();
searchFunc();
otherOptions();
?>
</div>
<div class="row">
<center>
<?php
if(isset($_GET['error_with_new_title'])){
echo'<span class="alert-error">'.$_GET['error_with_new_title'].'</span>';
}elseif(isset($_GET['success_with_new_title'])){
echo'<span class="alert-success">'.$_GET['success_with_new_title'].'</span>';
}elseif(isset($_GET['error_with_new_vitals'])){
echo'<span class="alert-error">'.$_GET['error_with_new_vitals'].'</span>';
}elseif(isset($_GET['success_with_new_vitals'])){
echo'<span class="alert-success">'.$_GET['success_with_new_vitals'].'</span>';
}elseif(isset($_GET['error_with_new_description'])){
echo'<span class="alert-error">'.$_GET['error_with_new_description'].'</span>';
}elseif(isset($_GET['success_with_new_description'])){
echo'<span class="alert-success">'.$_GET['success_with_new_description'].'</span>';
}else{
echo'<span class="alert">If this is your ad please log in to edit it!</span>';
}
?>
</center>
</div>
<div class="row page-header text-center">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdTitle($i);
}else{
$i = 0;
printAdTitle($i);
}
?>
</div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<? printAdImages($_GET['id']); ?>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdVitals($i);
}else{
$i = 0;
printAdVitals($i);
}
?>
</div>
<div class="tab-pane" id="contactUserPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdContactForm($i);
}else{
$i = 0;
printAdContactForm($i);
}
?>
</div>
</div>
<div class="ratingForm">
<?php
$adId = $_GET['id'];
printRatingForm($adId);
?>
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdDescription($i);
}else{
$i = 0;
printAdDescription($i);
}
?>
</div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<? printSimilarItems(); ?>
</div>
<div class="tab-pane" id="otherUserItemsPane">
<? printOtherItems(); ?>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Scoopclassifieds.com - Test4 posted under Electronics/Laptop</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="js/bootstrap-popover.js"></script>
<script type="text/javascript" src="js/editFormValidation.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/customStyles.css" type="text/css" />
</head>
<body onLoad="addOption_list();">
<div class="container-fluid">
<div class="row well">
<form class="form-inline pull-right" action="controllers/login.php" method="POST">
<input type="text" name="email" id="email" placeholder="Email" class="span2" />
<input type="password" name="password" id="password" placeholder="●●●●●●●●" class="span2" />
<input type="submit" name="login" id="login" value="Login" class="btn" />
</form>
<img src="/scoopclassifieds/slir/w300-h200-q60/scoopclassifieds/images/scoop3.png" alt="miniLogo" />
<form action="search.php" method="get" name="search_form" id="search_form" class="form-search pagination-centered">
<input type="text" name="searchFor" id="searchFor" class="searchInput span10" />
<input type="text" name="min" id="min" placeholder="Min Price" class="span2 text-center" />
<input type="text" name="max" id="max" placeholder="Max Price" class="span2 text-center" />
<input type="text" name="location" id="location" class="span2 text-center" />
<button type="submit" class="btn">Search</button>
</form>
<ul class="nav nav-pills">
<li>Add</li>
<li>Browse</li>
</ul>
</div>
<div class="row">
<center>
<span class="alert">If this is your ad please log in to edit it!</span> </center>
</div>
<div class="row page-header text-center">
<div id="item_title"><br/><span style="font-size:35px; font-weight:bold;">Test4</span></div> </div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<div id="myCarousel" class="carousel well span8">
<div class="carousel-inner">
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/61Ec8SFYZoL._SS500_.jpg" id="0" alt="image0" class="item active" />
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/0176440763.jpg" id="1" alt="image1" class="item" />
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<span class="well span5" style="font-size:30px; color:white; text-align:center; background:#BC4F0F;">$124</span><br/>
<span style="font-size:16px; font-weight:bold;">Location:</span><span style="font-size:14px;">Ottawa</span><br/>
<span style="font-size:16px; font-weight:bold;">Category:</span><span style="font-size:14px;">Electronics</span><br/>
<span style="font-size:16px; font-weight:bold;">Sub-Category:</span><span style="font-size:14px;">Laptop</span>
</div>
<div class="tab-pane" id="contactUserPane">
<form action="" method="post">
<label>Email:</label> <input type="text" name="email" id="email" value="" class="viewInput" /><br/>
<label>Message:</label><br/>
<textarea rows="4" cols="50" name="message" id="message" class="input"></textarea><br/>
<input type="submit" name="contactUser" id="contactUser" value="Contact User" class="button" />
</form>
</div>
</div>
<div class="ratingForm">
<div class="modal hide fade" id="userFeedback" aria-hidden="true">
<div class="modal-header">
<h4>Give us some feedback about this user</h4>
</div>
<div class="modal-body">
<form>
<h5>The Good</h5>
<input type="radio" name="feedBack" value="Good1">Good1<br/>
<input type="radio" name="feedBack" value="Good2">Good2<br/>
<input type="radio" name="feedBack" value="Good3">Good3<br/><br/>
<input type="submit" name="giveFeedBack" id="giveFeedBack" class="btn btn-success" value="Give Feedback" />
</form>
</div>
<div class="modal-footer">
<input type="button" class="btn" data-dismiss="modal" value="Close" />
</div>
</div>
Give feedback
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<span class="page-header descriptionHeader">Description:</span><br/><div id="item_description">"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who lov</div> </div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<h4>Ads with similar category of: Electronics</h4><ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title="Price: $1234<br/>Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
<li class="span4"><a href="view.php?id=24&title=test21" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or..." data-original-title="Price: $1245<br/>Location: Ottawa<br/>Electronics/Laptop">
<center>Test21</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test21MainImage" />
</a></li>
</ul> </div>
<div class="tab-pane" id="otherUserItemsPane">
<ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title=" Price: $1234<br/> Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
</ul> </div>
</div>
</div>
</div>
</div>
<!--
</div>
<div class="footer">
Home | Contact Us<br/>
Scoop Classifieds ©
2013 </div>
</div> -->
</body>
<script>
$(document).ready(
function(){
$('#myCarousel').carousel();
$('[rel="popover"]').popover();
}
);
</script>
</html>
I'm using Twitter Bootstrap which has been mostly painless. However, I just ran into the following problem when using inline checkboxes in a modal popup:
The first row of the checkboxes are not aligned correctly.
Note that if I remove the inline property, this continues:
The offending code is as follows:
<div class="modal-body">
<form class="form-horizontal">
<div class="row-fluid">
<div class="span4">
<h4 style="display:inline !important;">Client: </h4>
</div>
<div class="span4">
<h4 style="display:inline !important;">Start Date: </h4>
</div>
<div class="span4">
<h4 style="display:inline !important;">End Date: </h4>
</div>
</div>
<br />
<div class="row-fluid">
<div class="span12">
<h4 style="display:inline !important;">Industry: </h4> TBA
</div>
</div>
<br />
<div class="row-fluid">
<h4>Role: </h4>
<label class="checkbox inline">
<input type="checkbox" value="2"> .NET Developer
</label>
<label class="checkbox inline">
<input type="checkbox" value="1"> Business Analyst
</label>
<label class="checkbox inline">
<input type="checkbox" value="14"> Change Manager
</label>
*SNIP*
</div>
<br />
<div class="row-fluid">
<div class="span12">
<h4>Scope of Work (max. 150 words): </h4>
<textarea class="bdBox" rows="3"></textarea>
</div>
</div>
<br />
<div class="row-fluid">
<div class="span12">
<h4>Deliverables (max. 150 words): </h4>
<textarea class="bdBox" rows="3"></textarea>
</div>
</div>
</form>
</div>
Shortened for brevity.
Does anyone have any ideas on this, or should I take it to the Bootstrap issue list?
Figured this out.
There are two lines in the bootstrap.css file:
.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle;}
.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;}
The bottom line only applies the margin-left to checkboxes other than the first, meaning the first was not pushed across messing up the line.
If I move margin-left:10px into the first checkbox selector everything lines up. Mac's CSS was perfect for lining my checkboxes up too:
Here is something that I have tried and I suppose that is what you wanted
http://jsfiddle.net/xgKP4/