I am working on a static webpage (using the Twitter Bootstrap carousel example), and the webpage contains a form. I am trying to put the form over the carousel image, but when I do this, the user cannot type in text to the input textarea. I tested this on Chrome and Safari on both my laptop and mobile, and the textbox is always unresponsive to changes. Naturally curious, I looked at W3 School's carousel example, and even on that, no text goes in the textbox when the user types. Here is the link to W3Schools in case you want to try it and see:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h
Does anyone know what could be causing this behavior?
My code is listed below:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="images/placeholder.jpg">
<div class="container">
<div class="carousel-caption">
<center>
<h1>Behavioral therapy outside the clinician's office.</h1>
<p>
<div class="img-rounded" style="background-color: black; margin-left: 10px; margin-right: 10px;">
<br>
<form class="form-inline" role="form" background="black">
<div class="form-group">
<label for="email">Name:</label>
<input type="email" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<button type="submit" class="btn btn-primary">Sign up today</button>
</form>
</br>
</div>
</p>
</center>
</div>
</div>
</div>
</div>
</div>
So it turns out that the problem was the version of Bootstrap used! I was using the version 4 alpha version of Bootstrap, which apparently is still buggy. Switching to Bootstrap 3.3.5 fixes the problem.
(Thanks to brbcoding for pointing this out!)
Related
In Desktop view screen will be shown as left and right column in mobile view the same screen will be shown as top & bottom using bootstrap 5
For example in desktop view
A B
But in mobile View
B
A
Here is my code
<div class="row">
<div class="col-md-6">
<div class="img-al">
<img style="vertical-align: middle;" src="images/uiw_login.png">
<h2 class="img_text">
Client Login
</h2>
</div>
<input type="text" class="form-control" placeholder="Client Code"><br/>
<div style="display: inline-block;">
<input style="margin-left:45px;" type="checkbox"> I'm not a robot
<span><img src="images/Vector.png"></span>
</div>
<div>
<button class="lgn_btn">
Login
</button><br/><br/>
<p style="margin-left:40px;margin-top: 24px;">New here ? Non - Client SignUp</p>
</div>
</div>
<div class="col-md-6">
<img class="auth" src="images/Two_factor_authentication.png">
</div>
</div>
The image is showing correct in desktop
In Mobile mode
Actually the image should be in top and login form should be in down
I tried using Push and pull but that is not working
This is the bootstrap 5.0.2 version I am using
Try using order class.
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="img-al">
<img style="vertical-align: middle;" src="images/uiw_login.png">
<h2 class="img_text">
Client Login
</h2>
</div>
<input type="text" class="form-control" placeholder="Client Code"><br/>
<div style="display: inline-block;">
<input style="margin-left:45px;" type="checkbox"> I'm not a robot
<span><img src="images/Vector.png"></span>
</div>
<div>
<button class="lgn_btn">
Login
</button><br/><br/>
<p style="margin-left:40px;margin-top: 24px;">New here ? Non - Client SignUp</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img class="auth" src="images/Two_factor_authentication.png">
</div>
</div>
I have created a basic site with a grid layout and and a modal with a login form. However, I noticed after adding tags for the modal header and footer the layout completely screws up and leaves a large gap in the middle. The page currently looks like
The expected outcome for the page should be like here:
https://codepen.io/mor10/pen/QvmLpd
and if I do not include the modal footer and header tags it works as expected. The current code for and surrounding the modal is this:
Code for sake of being able to post with codepen link:
<main id="content" class="main-content">
<!-- Modal for logging in -->
<h2>Main content area</h2>
<p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, the two elements will swap spaces because CSS Grid honors text direction.</p>
<div id="loginModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login</h2>
</div>
<div class="modal-body">
<form action="" method="">
<label for="fname">Username:</label><br>
<input type="text" id="user"><br>
<label for="lname">Password:</label><br>
<input type="text" id="password"><br><br>
<input type="submit" value="Login">
</form>
<p>Don't have an account?</p><p>Create one</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</main>
It's very strange to me that the modal is affecting the layout, but only when the header and footer of the modal are used. On previous sites I have made, I have used multiple modals and not had this issue.
You have a closing </div> tag without an opening one:
<main id="content" class="main-content">
<!-- Modal for logging in -->
<h2>Main content area</h2>
<p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, the two elements will swap spaces because CSS Grid honors text direction.</p>
<div id="loginModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login</h2>
</div>
<div class="modal-body">
<form action="" method="">
<label for="fname">Username:</label><br>
<input type="text" id="user"><br>
<label for="lname">Password:</label><br>
<input type="text" id="password"><br><br>
<input type="submit" value="Login">
</form>
<p>Don't have an account?</p><p>Create one</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div> <!-- this should be removed -->
</main>
I need to make this header exactly like the image below. With the text in the center and the 2 images on each side. I've tried everything and the only way I had success was making the hole header into a whole image (not good). By the way, it needs to be responsive to mobile access, as the whole page is (I'm using bootstrap). Here is my whole code (I guess the only important part is the <header> though):
<body>
<header>
<div class="row">
<div class="col-sm-2 col-xs-1"></div>
<div class="col-sm-8 col-xs-10">
<img class="img-responsive logoheader" src="files/Screenshot_1.png" alt=""/>
</div>
<div class="col-sm-2 col-xs-1"></div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-1"></div>
<div class="col-sm-6 col-xs-10">
<center>
<h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4>
<h5>DECRETO 122/2017</h5>
</center>
<br>
<div id="dangerindex" class="alert alert-danger" style="display:none;"> </div>
<div id="warningindex" class="alert alert-warning" style="display:none;"> </div>
<form name="main-form" id="main-form" method="post" action="index2.php">
<label> NOME COMPLETO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" />
</div>
<label> DATA DE NASCIMENTO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker">
</div>
<button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
<button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
</form>
</body>
As you can see, the header is just a screenshot of what I want. How can I make it properly with CSS?
Here is the image (Screenshot_1.png):
And this is how my page looks like right now:
Edited based on comment.
Make your image logos the same dimension (I used 600 × 345px but tweak to your benefit).
Set your row container to flex to vertically center text to the logos.
Make img width:100% in your CSS to keep ratio on viewport resize.
Tweak .headerText font-size to your benefit.
Working Resizable Fiddle
With this setup you can maintain the row on mobile as well, considering it's 3 pictures, it may be too much to stack them vertically.
img {
width: 100%;
}
.headerText {
font-size: 9px;
line-height: 1.4;
display: flex;
flex:1;
align-items: center;
}
.flex {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
/* make text smaller on mobile */
#media (max-width: 767px) {
.headerText {
font-size: 9px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="row flex">
<div class="col-xs-4">
<img class="img-responsive logoheader" src="https://i.imgur.com/wuEStaT.jpg" alt="" />
</div>
<div class="col-xs-4 text-center text-uppercase headerText">
<span>
prefeitura municipal de guaiba<br>
estado do rio grande do sul<br>
gestao 2017/2020<br>
secretaria municipal de educacao
</span>
</div>
<div class="col-xs-4">
<img class="img-responsive logoheader" src="https://i.imgur.com/NInC1cx.jpg" alt="" />
</div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-1"></div>
<div class="col-sm-6 col-xs-10">
<center>
<h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4>
<h5>DECRETO 122/2017</h5>
</center>
<br>
<div id="dangerindex" class="alert alert-danger" style="display:none;"> </div>
<div id="warningindex" class="alert alert-warning" style="display:none;"> </div>
<form name="main-form" id="main-form" method="post" action="index2.php">
<label> NOME COMPLETO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" />
</div>
<label> DATA DE NASCIMENTO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker">
</div>
<button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
<button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
</form>
Step One: Divide your (Screenshot_1.png) image file
Firstly, you are going to need to divide your image (Screenshot_1.png) into 3 parts. In doing so, you will have 3 image files, as follows:
Image 1: Your left Emblem.
Image 2: Your central text.
Image 3: Your right logo.
In dividing your image into 3 parts, you will find that you will be able to ensure that they become responsive to the screen sizes they are displayed on. Both in terms of size and also in that they then 'stack' on top of each other on smaller devices, such as Mobile Phones.
Step Two: Bootstrap Installation:
Head over to Bootstrap and follow their guide on installing Bootstrap to your website. Once you have successfully installed Bootstrap, you will be able to access their CSS Classes, which will allow your website to become responsive.
Additional Resource: Bootstrap Grid Layout
Step Three: Modify your HTML Code:
If you have correctly installed the Bootstrap files, you can then replace your header code, with the below code. Don't forget to replace [Image 1], [Image 2] and [Image 3] with the correct Image SRC.
<header>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 1]</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 2]</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 3]</div>
</div>
</header>
As a side note, it is worth knowing that each Row is made up of 12 'Columns'. When assigning a Column Number ('col-xs-4' etc), ensure that each row's columns add up to 12. The above should work fine but you would likely need to tinker with the numbers, in order to achieve the right column widths for your website.
Question Background:
I am using Jasny Bootstrap to implement a responsive offcanvas 'reveal' style menu.
The Issue:
When the menu is opened on a mobile device the scrolling element of the menu is not enabling.
I have wrapped the entire app (where my AngularJS view is injected) with a div style overflow-y:hidden as shown:
<body ng-app="app">
<div style="overflow-x:hidden">
<div ui-view style="height:100%">
//View is injected here based on routing.
</div>
</div>
</body>
This overflow styling means i can now scroll the menu on a mobile device but i now have an issue where and When the menu is scrolled to the top there is a gap showing the menu underneath as shown here:
Once the page is scrolled down slightly the responsive navbar shows:
The Code:
The Following is as shown above, This is the main View div where the page is injected depending on its routing:
<body ng-app="app">
<div style="overflow-x:hidden">
<div ui-view style="height:100%">
//View is injected here based on routing.
</div>
</div>
</body>
This is the Results view of the app which contains the navbar elements:
<div ng-controller="ResultsController" ng-show="hideSearch" style="height:100%">
<div class="navmenu navmenu-default navmenu-fixed-left" id="updateMenu">
<div class="text-center headerPad"><h3>Compzee <img src="Images/CompzeeLogoSmall.png" class="logoSize" /></h3></div>
<div class="col-lg-12 pullInMenu">
<form ng-submit="search()" novalidate="novalidate">
<div class="form-group">
<label for="search">Search Term:</label>
<input type="text" class="form-control" ng-model="item" id="itemUpdate" required>
</div>
<div class="form-group">
<label for="search">Product Category:</label>
<select class="form-control" ng-model="catagory" required>
<option value="" disabled selected>Select A Product Category</option>
<option>All</option>
<option>Baby</option>
<option>Business, Office & Industrial</option>
<option>Cameras & Photography</option>
<option>Clothes & Accessories</option>
<option>Comics, Books & Magazines</option>
<option>Computers & Tablets</option>
<option>Consoles</option>
<option>DVD's, Films & TV</option>
<option>Garden & Patio</option>
<option>Health & Beauty</option>
<option>Holiday & Travel</option>
<option>Home</option>
<option>Kitchen</option>
<option>Jewellery</option>
<option>Mobile Phones & Accessories</option>
<option>Musical Instruments</option>
<option>Music</option>
<option>Pet Supplies</option>
<option>Shoes</option>
<option>Sporting Goods</option>
<option>Toys & Games</option>
<option>Vehicle Parts & Accessories</option>
<option>Video Games</option>
<option>Watches</option>
</select>
</div>
<div class="form-group">
<label for="search">Country:</label>
<select class="form-control" ng-model="selectedCountry" required>
<option value="" disabled selected>Select A Country</option>
<option>UK</option>
<option>US</option>
<option>FR</option>
<option>DE</option>
</select>
</div>
<div class="form-group">
<div class="text-center">
<img ng-src="{{countryImg}}" />
</div>
</div>
<div class="form-group">
<label for="search">Marketplace</label>
<select class="form-control" ng-model="selectedMarketPlace" required>
<option value="" disabled selected>Select A Marketplace</option>
<option>Ebay & Amazon</option>
<option>Ebay</option>
<option>Amazon</option>
</select>
</div>
<div class="form-group">
<div class="text-center">
<img class="marketPlaces" ng-src="{{image}}" />
<img class="marketPlaces" ng-show=" showImg" ng-src="{{imageSecond}}" />
</div>
</div>
<div class="form-group">
<div class="content">
<rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>
</div>
</div>
<div class="form-group">
<label for="search">Min Price</label>
<input type="text" class="form-control" ng-model="minTextVal" id="slider-margin-value-min" readonly>
</div>
<div class="form-group">
<label for="search">Max Price</label>
<input type="text" class="form-control" ng-model="maxTextVal" id="slider-margin-value-max" readonly>
</div>
<div class="form-group text-center">
<label for="search">Prices High To low</label>
<input id="highToLowBox" type="radio" ng-value="true" ng-model="priceOrder">
</div>
<div class="form-group text-center">
<label for="search">Prices Low To high</label>
<input id="lowToHighBox" type="radio" ng-value="false" ng-model="priceOrder">
</div>
<div class="form-group">
<button class="btn btn-success" ladda="searchingService.updating" type="submit" data-style="zoom-in" style="width:100%">
<span>Update</span>
</button>
</div>
</form>
</div>
</div>
<div class="canvas" id="resultsView">
<div class="navbar navbar-default navbar-fixed-top">
<button id="menuBtn" type="button" ng-click="ScrollUp()" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="containerId" class="container">
<div class="topOffSet ">
<div class="col-lg-12 text-center">
<div id="itemHolder">
<h4><b>{{searchingService.searchList.length}} Results found from your search criteria.</b></h4>
<div class="panel panel-default col-lg-12 text-center" ng-show="searchingService.noResults">
<div class="panel-body"><img src="Images/CompzeeLogoSmall.png" class="logoSize" /><p>We could not find any results to match your search criteria</p><p>Please review your search terms and try again.</p></div>
</div>
<div ng-repeat="item in searchingService.filteredItems" class="col-lg-4">
<div class="panel panel-default maxPanelHeight">
<div class="panel-heading textOverflow" id="panelHeading">
<h3 class="panel-title text-center"><b>{{item.Title}}</b></h3>
</div>
<div class="panel-body">
<img src={{item.Image}} class="picHeight img-rounded img-responsive center-block" />
<h4 class="text-center"><b>{{item.Price}}</b></h4>
<h4 class="text-center">See More</h4>
<div class="text-center"><img class="originPic" src={{item.marketPlaceImg}} /></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 text-center">
<uib-pagination total-items="items.length" ng-model="currentPage" max-size="maxSize" class="pagination-md" boundary-links="true" rotate="false">
</uib-pagination>
</div>
</div>
</div>
</div>
If you have z-index issue:
add z-index: 1000; to the .navmenu class.
if still doesn't show it at top, add z-index: 1; to the .canvas class.
if still doesn't work, it means you are using z-index inside other classes (sub or parent tags of .canvas or .navmenu class). for solving it you need to remove them. for searching it you just search z-index inside your entire project to find which one causing problem and then try number 1 and 2 again. Please be aware of inline styles. don't search just inside your css file. (I don't know what is your IDE but if you are using Eclipse just press CTRL+H and type z-index to search your entire project)
if you did 1,2 and 3 and still doesn't work, it means you cached and need to clear your cache.
If you have Height Issue:
Put Height:100%; where you wrote overflow-x:hidden. Height 100% means 100% of parent height. When you put height:100% inside a node which it's parent has 200px height. it means node height will be 200px and not more.
Use the z-index property to show an element above an other.
The bigger z-index will be up the others.
Exemple: z-index:2 will be shown up to z-index:1.
I have been working with the Twitter Bootstrap on a mini project. I am using 's with it and there is a bit of weird behaviour. I have jQuery which allows me to create new tabs when a button is clicked. The new tab is made active and contains a form. This form displaces the title of the below and I can't find out why. Can anyone help?
Code Snippets:
<section id="builder">
<div class="page-header">
<h1>App Builder. <small>Create your app.</small></h1>
</div>
<div class="span7">
<!-- ===== App Title ===== -->
<div class="control-group">
<label class="control-label" for="appTitle">App Title</label>
<div class="controls">
<input type="text" class="input-xlarge" id="appTitle">
<p class="help-block">Enter the title for your app. It will appear at the top of your app.</p>
</div>
</div>
<!-- ===== App Subtitle ===== -->
<div class="control-group">
<label class="control-label" for="appSubtitle">App Subtitle</label>
<div class="controls">
<input type="text" class="input-xlarge" id="appSubtitle">
<p class="help-block">Enter the subtitle for your app. It will appear below the title.</p>
</div>
</div>
<!-- ===== App Theme ===== -->
<div class="control-group">
<label class="control-label" for="appTheme">App Theme</label>
<div class="controls">
<select id="appTheme">
<option>Dark</option>
<option>Light</option>
</select>
<p class="help-block">Select the theme for your app. You can preview your theme on the right.</p>
</div>
</div>
<!-- ===== App Pages ===== -->
<p>App Pages</p>
<ul class="nav nav-tabs" id="tabHeaders">
<li><i class="icon-plus"></i>Add Page</li>
<!-- Tabs (Created by Javascript) -->
</ul>
<div class="tab-content" id="tabContent">
<!-- Tab Content (Created by Javascript) -->
</div>
</div>
<div class="span4">
<div class="iphonebackground">
<div class="screenbackground"></div>
</div>
</div>
</section>
<section id="preview">
<div class="page-header">
<h1>Preview your App. <small>See your app in it's full glory before you download it.</small></h1>
</div>
</section>
Before adding a new tab:
After adding a new tab:
It looks like the text is being floated around the new tab. Try using clear:left; in the CSS for that text to see if it correctly drops back below the tab.