I create a nav-tabs and works well, however on the page load all div appear.
When I click in any tab it works as it should.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#dados">Dados Cliente</a></li>
<li><a data-toggle="tab" href="#endereco">Endereço Cliente</a></li>
<li><a data-toggle="tab" href="#login">Login Cliente</a></li>
</ul>
<div class="tab-content">
<div id="dados" class="tab-pane fade in active">
<div class="form-group">
<label>Nome</label>
<h:inputText value="#{usuarioMB.cliente.nome}" styleClass="form-control" />
</div>
</div>
<div id="endereco" class="tab-pane fade in active">
</div>
<div id="login" class="tab-pane fade in active">
<div class="form-group">
<label>Email</label>
<h:inputText value="#{usuarioMB.usuario.email}"
styleClass="form-control" />
</div>
<div class="form-group">
<label>Senha</label>
<h:inputSecret styleClass="form-control"
value="#{usuarioMB.usuario.senha}" />
</div>
</div>
</div>
I've already tried to call the page passing #dados as parameter
criarusuario.xhtml?#dados
but it doesn't work too
That's because all your tab divs have classes tab-pane fade in active.
You should have one div with active state (tab-pane fade in active classes) and other divs should have only tab-pane fade classes.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#dados">Dados Cliente</a></li>
<li><a data-toggle="tab" href="#endereco">Endereço Cliente</a></li>
<li><a data-toggle="tab" href="#login">Login Cliente</a></li>
</ul>
<div class="tab-content">
<div id="dados" class="tab-pane fade in active">
<div class="form-group">
<label>Nome</label>
<h:inputText value="#{usuarioMB.cliente.nome}" styleClass="form-control" />
</div>
</div>
<div id="endereco" class="tab-pane fade">
</div>
<div id="login" class="tab-pane fade">
<div class="form-group">
<label>Email</label>
<h:inputText value="#{usuarioMB.usuario.email}" styleClass="form-control" />
</div>
<div class="form-group">
<label>Senha</label>
<h:inputSecret styleClass="form-control" value="#{usuarioMB.usuario.senha}" />
</div>
</div>
</div>
Related
I am developing a registration page for an online shopping site.
in my form I have a select tag, it displays very well in the browser but it has a small width as you can see in this picture:
as you can see the width of my select is too small compared to the other inputs, so I want to increase it for which it is equal to those of the input.
I put is code css but it does not work the width of the select does not change :
style="width: 5000px;"
I want to specify that I use the template aroma I suspect that this template that gives restrictions that prevents me from applying my css but I'm not very sure
here is my code in more detail :
<div class="col-md-12 form-group" >
<select class="form-control" name="role" style="width: 5000px;">
<option value="Simple_utilisateur">Simple utilisateur</option>
</select>
</div>
and this is my all code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine - Login</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/linericon/style.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/nouislider/nouislider.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="Acceuil_marjane"><i class="fas fa-shopping-cart"></i>Bougrine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Liste des produits</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="Jus_marjane">Jus</a></li>
<li class="nav-item"><a class="nav-link" href="Biscuits_marjane">Biscuits</a></li>
<li class="nav-item"><a class="nav-link" href="Yaourt_marjane">Yaourts</a></li>
<li class="nav-item"><a class="nav-link" href="Pc_marjane">Pc portable</a></li>
<li class="nav-item"><a class="nav-link" href="Tel_marjane">Téléphones portables</a></li>
<li class="nav-item"><a class="nav-link" href="Legume_marjane">Légumes</a></li>
<li class="nav-item"><a class="nav-link" href="Fruit_marjane">Fruits</a></li>
<li class="nav-item"><a class="nav-link" href="Danape_marjane">Danapes</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="Contact">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Se connecter</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<!-- ================ start banner area ================= -->
<section class="blog-banner-area" id="category" >
<div class="container h-100">
<div class="blog-banner">
<div class="text-center">
<h1>Register</h1>
<nav aria-label="breadcrumb" class="banner-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Acceuil</li>
<li class="breadcrumb-item active" aria-current="page">Register</li>
</ol>
</nav>
</div>
</div>
</div>
</section>
<!-- ================ end banner area ================= -->
<!--================Login Box Area =================-->
<section class="login_box_area section-margin">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="login_box_img">
<div class="hover">
<h4>Already have an account?</h4>
<p>There are advances being made in science and technology everyday, and a good example of this is the</p>
<a class="button button-account" href="login.html">Login Now</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="login_form_inner register_form_inner">
<h3>Create an account</h3>
<form class="row login_form" action="#/" id="register_form" >
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Entre votre nom" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Username'">
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="email" name="prenom" placeholder="Entrez votre prénom" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address'">
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="password" name="adresse" placeholder="Entrez votre adresse" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'">
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="confirmPassword" name="date_naissance" placeholder="Entrez votre date de naissance" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Confirm Password'">
</div>
<div class="col-md-12 form-group">
<input type="email" class="form-control" id="confirmPassword" name="email" placeholder="Entrez votre email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Confirm Password'">
</div>
<div class="col-md-12 form-group">
<input type="password" class="form-control" id="confirmPassword" name="password" placeholder="Entrez votre mot de passe" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Confirm Password'">
</div>
<div class="col-md-12 form-group">
<input type="password" class="form-control" id="confirmPassword" name="confirmation_password" placeholder="Confirmer votre mot de passe" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Confirm Password'">
</div>
<div class="col-md-12 form-group" >
<select class="form-control" name="role" style="width: 5000px;">
<option value="Simple_utilisateur">Simple utilisateur</option>
</select>
</div>
<div class="col-md-12 form-group">
<div class="creat_account">
<input type="checkbox" id="f-option2" name="selector">
<label for="f-option2">Keep me logged in</label>
</div>
</div>
<div class="col-md-12 form-group">
<button type="submit" value="submit" class="button button-register w-100">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--================End Login Box Area =================-->
<!--================ Start footer Area =================-->
<footer>
<div class="footer-area footer-only">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets ">
<h4 class="footer_title large_title">Our Mission</h4>
<p>
So seed seed green that winged cattle in. Gathering thing made fly you're no
divided deep moved us lan Gathering thing us land years living.
</p>
<p>
So seed seed green that winged cattle in. Gathering thing made fly you're no divided deep moved
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Blog</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Head Office
</p>
<p>123, Main Street, Your City</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Phone Number
</p>
<p>
+123 456 7890 <br>
+123 456 7890
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Email
</p>
<p>
free#infoexample.com <br>
www.infoexample.com
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I see that you are using bootstrap. In bootstrap > 4 you can use the class "d-block" so the select box is displayed full width like so:
<select class="form-control d-block" name="role">
<option value="Simple_utilisateur">Simple utilisateur</option>
</select>
I would suggest not to use inline css. Why is your width 5000px anyway?
this is what i get when i add d-block :
I put d-block it works but now I have 2 select one with the right width and the other with a small but I do not understand normally I put a single select why there are two that appear in my Navigator ??
My html page contains one header, two divs (say div1 and div2) and one footer. I have given height to header, one div and footer. Now, I want the other div to take vertical height of any screen(phones, tablets, desktop. larger desktop etc.) minus the combined height of header, div1 and footer i.e, height of div2 = height of screen-(height of header+height of div1+height of footer) with scrollbar. Inside div 2 I am showing cards with some information just like chat application(whatsapp) which is appending dynamically using JavaScript. In third div, I am appending dynamically created chats to the Div with id "chat-body".
I am trying calc(100vh - (combined height of header+div1+footer)). It is coming fine for desktop but for smaller screens scroll bar for third div is going inside footer.
<header class="topBar">
<ul class="nav nav-tabs row" id="myTab" role="tablist">
<li class="nav-item col">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="chat()">Chat</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Incident</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Service Request</a>
</li>
</ul>
</header>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="container">
<div class="row h-100">
<div id="topButtons" class="card-body" style="padding-bottom: 0;"></div>
<div id="chatBody" class="card-body anyClass" onscroll="myFunction()">
<p class="WC_message_fl"><img class="con_im" src="images\chatrobo.png"></p>
<p class="WC_message_fl sahlaIntro"> Type your Questions & Start chatting with Sahla bot.</p>
</br>
</br>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
</br>
</br>
<p class="WC_message_fl" id='msg_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;">
<div class="row" id="table"></div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
</br>
</br>
<p class="WC_message_fl" id='msg_sr_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;">
<div class="row" id="sr_table"></div>
</div>
</div>
</div>
<footer class="footr" id="footerChtbt">
<div id="myBtn" onclick="topFunction()"><img title="Go to top" src="images/GOTOTOP.png" style="width:65px;height:65px;"></div>
<div class="input-group" style="width: 90% !important;">
<input id="query" type="text" class="dir-auto form-control" placeholder="Ask Sahla bot..." onkeyup="pressedkey(event)" style="outline:0;box-shadow:none;border-width:0px;font-size:14px;" required>
<div class="input-group-append" style="margin-left: 1%;">
<img src="images/send_icon.svg" name="submitbtn" id="submitbtn" onClick="sendbtn()" style="cursor: pointer;">
</div>
</div>
</footer>
Try once using 100% instead 100vh
eg: height: calc(100% - number)
I've tried turning overflow x off, changing the z-index, etc. but nothing seems to work for this antichrist code
nothing can go outside the box
The smaller boxes are generated by ngrepeat so I think something is not loading in order. Please help
Here's the jsfiddle for it but it's just the html code
https://jsfiddle.net/5dbtb4h5/
<div class="row containerrow">
<!-- left column for upcoming -->
<div class="col-sm-6 col-md-3 upcoming" style="background-color:yellow;">
<p id="upcomingtitle">Upcoming</p>
<div class="form-group updropdown">
<select class="form-control" id="xyz">
<option>All</option>
<option>Checked In</option>
<option>Not Checked In</option>
</select>
</div>
<div class="upcominglist">
<div class="upcomingtiles" ngdragclone="" ng-drag="true" ng-drag-success="$ctrl.testdrop()" ng-drag-data="appointment" ng-repeat="appointment in $ctrl.appointments" ng-if="appointment.StatusID == 0 || appointment.StatusID == 1">
{{$ctrl.formatPatientInfo(appointment.DOB, appointment.DateTime, appointment.Gender, appointment.AppointmentTypeID)}}
<div class="statusflag" ng-class="{'bluestatus' : appointment.StatusID > 0, 'emptystatus' : appointment.StatusID == 0}"></div>
<div class="uptext"> <span class="boldtitle">{{appointment.FirstName}} {{appointment.LastName}}, {{$ctrl.year - $ctrl.patientYear}}, {{$ctrl.gender}}</span><br/> {{$ctrl.signInTime}} {{$ctrl.patientAppointmentType}} <br/> {{appointment.Complaint}}
</div>
<div class="dropdown dropdown1">
<img class="dropdownarrow dropdown-toggle" id="menu1" data-toggle="dropdown" src="/images/transarrow.png">
<ul class="dropdown-menu dropdown-menu1 dropdown-menu-right">
<li role="presentation"><a ng-click="$ctrl.updateAppointmentStatus(appointment, 0)">Not Checked In</a></li>
<li class="divider"></li>
<li role="presentation"><a ng-click="$ctrl.updateAppointmentStatus(appointment, 1)">Checked In</a></li>
<li class="divider"></li>
<li role="presentation"><a ng-click="$ctrl.onClickStoreAppointment(appointment); $ctrl.on()">Move to Room</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- end right column -->
</div>
<!-- end container row -->
On initial load, the content from both tabs show on the webpage, once the tab is clicked for the first time they begin to work as expected.
Any ideas on why this is happening?
Here is my html
<div id="userFunctions" style="display: none;" >
<h2 id="welcome"></h2>
<button id="btnChangeUser" class="btn btn-primary" style="display: none;">Change User</button>
<br>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a id="showSubs" data-toggle="tab" href="#subscriptionManagement">Subscription Portal</a></li>
<li><a id="showLocation" data-toggle="tab" href="#locationManagement">Location Management</a></li>
</ul>
<div class = tab-content>
<div id="subscriptionManagement" class="tab-pane fade in active">
<hr>
<section id="sendSubRequest">
<h4>Request Subscription</h4>
<div class="input-group">
<input type="text" id="subUserName" class="form-control "></input>
<span class="input-group-btn">
<button id="btnSubUser" class="btn btn-primary">Subscribe</button>
</span>
</div>
</section>
<br>
<section id="ReviewSubRequests">
<h4>Incoming Request(s)</h4>
<ul id='subscriptionsList'>
</ul>
</section>
</div>
<div id="locationManagement" class="tab-pane fade in active">
<hr>
<section id="cityDetails">
<section id="map">
</section>
<br>
<section>
<button id="btncheckInLocation" class="btn btn-primary">Check-In User location</button>
</section>
</section>
<section id="friendsList">
<h4>Subscribed Friends</h4>
<ul id='subscribedUsers'>
</ul>
</section>
</div>
</div>
</div>
Both your tabs (#subscriptionManagement and #locationManagement) have the active class, meaning they are both active by default. This class should be getting added on navigation, indicating that the content should be shown. You simply need to remove this class from the tab which you don't want to show on initial load:
Change:
<div id="locationManagement" class="tab-pane fade in active">
To:
<div id="locationManagement" class="tab-pane fade in">
Hope this helps! :)
I'm trying to implement a html tabbed interface. For some reason clicking on a tab will kick me back to the homepage instead of showing a new list of data. Do I need to add a url route to the <a href> ?
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
If you mean you are just trying to show the contents of the tab then I would change your href="#something" to href="javascript: return false;" or put the code in your event handler.
Tested this over on Bootply
http://www.bootply.com/DqUJfu6r4z
You simply need to close the quotations on your IDs:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>