I am having an issue with my Play Form.
After submitting my form and reopening the same page, I am getting the previous submitted values.
What can I do to get a clean form?,
The submit process is working fine, besides this little issue.
div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">New Product Form</h1>
<div class="row placeholders div-table">
<div class="col-xs-12 col-sm-12 div-table-row">
#helper.form(routes.Products.createProduct){
<div class="form-group">
#helper.inputText(form("name"), '_label->"Product Name", 'id->"productName", 'name->"productName", 'class ->"form-control", 'placeholder ->"Enter Product Name") <!-- End Product Name Form-->
</div><!--End First Form Group-->
<div class="form-group">
#helper.select(form("type"),options(models.Type.values().toList.map(_.toString)), '_label->"Type", 'id->"type", 'name->"type", 'class->"btn btn-default dropdown-toggle")
</div><!--End Second Form Group-->
<button class="btn btn-default">Submit</button>
}
</div> <!--End Middle Content DIV -->
</div> <!-- End Middle content with SideBar-->
</div> <!--End Container -->
I could fix the issue. The problem was that I was initializing the form as static in my controller. Thanks to all for your help.
Related
I have a form, I inserted a piece from the form where I use bootstrap.min.css col-lg-6
And now when the screen width is large, the first column with text will be on the left, and the button on the right
And when the width is small, let's say for mobile, then the column with the text will be on top, and the button will be on the bottom
I want to make things stay the same for large widths, text on the left, button on the right. And for mobile, I want it to be the other way around, the button is on top, and the text is on the bottom
So far, my only idea is to make 2 buttons, and hide the extra one depending on the screen size
But is there another way to do this?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="row">
<div class="col-md-6">
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
asd
</div>
</div>
<div class="col-lg-6">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
is the Boostrap version 3.2 mandatory in your project? Because in more recent versions of Bootstrap you could use the Order Classes for your task.
I used your code snippet once, using Bootstrap's Oder Classes:
<div class="row">
<div class="col-md-6">
<form>
<div class="row">
<div class="col-lg-6 order-2 order-md-1">
<div class="form-group">
asd
</div>
</div>
<div class="col-lg-6 order-1 order-md-2">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
(see here online)
I'm working in an offline view for PWA, I need to design this view (or very similar)
I have tried with this
#extends('layouts.app_site')
#push('styles')
#endpush
#section('content')
<div class="row">
<div class="col-lg-12">
<div class="ibox product-detail">
<div class="ibox-content">
<div class="alert alert-dark" role="alert">
You are currently offline
</div>
<div class="form-group row">
<div class="col-lg-12 text-center">
<img src="{{asset('img/gp_no_image.png')}}">
<h1>
You are currently offline
</h1>
We couldn't load the next page on this connection. Please try again.
</div>
</div>
<div class="form-footer text-center">
<a href=""
class="btn btn-primary btn-sm">Retry Connection</a>
</div>
</div>
</div>
</div>
</div>
#endsection
#push('scripts')
#endpush
And this is my result (ignore the background image)
How can I change the upper alert style like the example image? (use all ibox-content and black color)
and how can I make the retry button bigger?
for alerts, I'm using bootstrap
for buttons, I'm using inspinia
styles
thanks
I have a website that displays many real-time graphs and gauges, all hidden within drawers initially. The graphs are made with the plotly.js library. The gauges are done with JustGage. The code for the containers is as such:
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-5 statistics">
<div class="centered-text">
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-heading">Statistics Panel</h3>
</div>
<ul class="list-group">
<!-- Base Station Panel -->
<li class="list-group-item">
<div class="row toggle" id="dropdown-detail-1" data-toggle="detail-1">
<div class="col-lg-10 text-left">
Base Station
</div>
<div class="col-lg-2"><i class="fa fa-chevron-down pull-right"></i></div>
</div>
<div id="detail-1">
<hr></hr>
<div class="container-fluid">
<div class="fluid-row">
<div class="col-lg-6">
<div id="happygraph1"></div>
<input id="happybutton1" type="button" value="View History"
onclick="happygraph1.changeMode();"/>
</div>
<div class="col-lg-6">
<div id="happygraph2"></div>
<input id="happybutton2" type="button" value="View History"
onclick="happygraph2.changeMode();"/>
</div>
</div>
<div class="fluid-row">
<div class="col-lg-6">
<div id="happygraph3"></div>
<input id="happybutton3" type="button"
value="View History" onclick="happygraph3.changeMode();"/>
</div>
</div>
<div class="container-fluid">
<div class="fluid-row">
<div class="col-sm-6">
<div id="happygauge1 style="height: 250px; width: 300px;"></div>
</div>
</div>
<div class="col-sm-6">
<div id="happygauge2" style="height: 250px; width: 300px;"></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The issue is that when the page loads, if the data begins appearing on the graphs before the hidden element is expanded, the graphs' containers extend out of the newly expanded element. However, if the element is expanded first, and then the data comes in, it acts exactly how it should. There is no issue with the gauges.
Here is a screenshot of when it's working:
graph containers stay within element
Here is a screenshot of when the element is expanded after the data has started being drawn: graph containers expand out of element
The drawers (and the layout in general) is done up by bootstrap. What is causing the containers to break? I have tried playing with the fluid row and container properties, however to no avail. Thanks in advance.
It seems the issue was not with Bootstrap at all but with some of the layout options set in Plotly. Plotly was sizing the graphs to be much larger than the container only when loaded hidden.
I'm having trouble with the bootstrap grid system. The div below <div class="col-xs-12 col-md-4"> should be on the right side while the other divs are on the left. Currently the first two column divs are correct and rendering at the top, but then the third column div doesn't render until the bottom of the image rather than alongside it. I need them to display correctly, what can I do?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-7">
<div class="loginText">
Get information about your Connect plan
<br><br>
If you have any problems logging in, please contact your account manager for help.
<br><br>
</div>
</div> <!-- cols -->
</div> <!-- row -->
</div> <!-- container -->
It looks like this
The third div needs to be moved up under the first div, but it's currently below the height of the second div.
Bootstrap's framework is build on a 12 column layout.
So
col-md-7 + col-md-4 + col-md-7 = 18 columns exceeding the 12 column limit, hence pushing the third div to the next line.
You can fix it by changing the col-md's to col-md-5 + col-md-2 + col-md-5 like this:
<div class="row">
<div class="col-xs-12 col-md-5">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-2">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-5">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div> <!-- cols -->
</div>
Your question isn't very clear but from what I understand, col-md-7 plus col-md-4 plus col-md-7 equal 18, 6 more than the allotted 12. So it will go onto the next line.
The bootstrap grid system always adds to 12 in a row. you have md-7 and md-4 that's only 11.
you need to change
<div class="col-xs-12 col-md-4">
to
<div class="col-xs-12 col-md-5">
now you have 7+5 =12.
So, according to your updated question, you want the text on the left and the image on the right. You can do that as follows:
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row">
<div class="col-xs-12">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<!-- div below is hidden in xs -->
<div class="col-md-12 hidden-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<!-- div below is shown only in xs -->
<div class="col-md-12 visible-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
I have an directive (my-header) to make the header area fix while page scrolling up. I want to remove the directive on a button click.
<div class="partialInner" id="fixedHeader" my-header>
<div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
<ng-include src="'topNavi.html'"> </ng-include>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
<ng-include src="'middle.html'"> </ng-include>
</div>
</div>
Remove
when click on the myBtn I want to take the "my-header" attribute out of my code
Appreciate any anwser
Execute this code when your button is pressed
$document.getElementById("fixedHeader").removeAttribute("my-header");
You can use ng-show or ng-if.
<div class="partialInner" id="fixedHeader" my-header ng-if="isHeader" ng-init="isHeader = true">
<div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
<ng-include src="'topNavi.html'"> </ng-include>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
<ng-include src="'middle.html'"> </ng-include>
</div>
</div>
And in your button click, you can make isHeader to false.
<button ng-click="isHeader = false"> Hide header </button>