I'm trying to style input type file using Laravel -> Form::file:
<div class="col-md-3">
{{ Form::file('images[]', ["class"=>"required","multiple"=>true]) }}
</div>
It should look like that:
I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.
What should be the right way to do that?
you can solve this through "label" tag.
<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />
Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.
I hope this help.
EDIT:
Here is example.
With "Form::file" you can just add label and add ID parametr to your function.
Here's you can attach your file in laravel
<div class="row p-t-20">
<input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" />
{!! $errors->first('banner_url', '
<p class="text-warning errorBag">:message</p>') !!}
<label for="file-upload" id="file-drag">
<div id="file-cont">
Select a file to upload
<br />OR
<br />Drag a file into this box
</div>
<br />
<br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
</label>
<progress id="file-progress" value="0">
<span>0</span>%
</progress>
<output for="file-upload" id="messages"></output>
this is the easy and the stylish way to input your file in laravel
please share anyone who needs this thanks
Related
How do I set clr-error when the input is invalid. I've set the input field to be required.
But on page load the clr-control-error message always shows and the exclamation-circle never shows even when i click into input and click away
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-4">
<div class="clr-input-wrapper">
<clr-icon shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required/>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<clr-control-error>Search Input is required</clr-control-error>
</div>
</div>
</div>
</form>
what you've got is the HTML/CSS version of form controls, which don't have built in validation. We've not yet created an input-group functionality that also works with Angular, so you'll have to manually toggle the display of the error message. You can see a few demos of this here: https://github.com/vmware/clarity/blob/master/src/dev/src/app/forms/input-group/input-group.html
Here is a demo based on your example of something that works with our markup, but currently requires some manual effort on your end. Eventually this will be supported in an Angular component, but not at the moment.
https://stackblitz.com/edit/clarity-light-theme-v1-0-xfaw9m?file=src/app/app.component.html
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-6" [class.clr-error]="search.invalid && search.touched">
<div class="clr-input-wrapper">
<div class="clr-input-group">
<clr-icon class="" shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required #search="ngModel" />
</div>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<div class="clr-subtext" *ngIf="search.invalid && search.touched">Search Input is required</div>
</div>
</div>
</div>
</form>
Is there a way to style the "popup" when a field is invalid in AngularJS?
I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.
That's the browser validation kicking in. Disable it as follows:
<form novalidate></form>
Edit: Example of a form using novalidate with AngularJS's validation:
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
I believe it is no longer possible to style these popups:
Link
I'm having some problems with the bootstrap forms. For some reason they all get messed up.
This is what it should look like:
http://i.imgur.com/vjCZvwc.png
This is how it shows up on my page:
http://i.imgur.com/48qtLc7.png
As you can see, it makes the input box smaller and it places 'br' code behind every line. It also puts a random 'p' in it without any closing tag. (nowhere to be found on the page)
My input code:
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
The output code in the browser:
<form>
<fieldset>
<legend>Legend</legend>
<p>
<label>Label name</label><br />
<input type="text" placeholder="Type something…"><br />
<span class="help-block">Example block-level help text here.</span><br />
<label class="checkbox"><br />
<input type="checkbox"> Check me out<br />
</label><br />
<button type="submit" class="btn">Submit</button><br />
</fieldset>
</form>
So my question is; What could possibly be causing this and how do I fix it?
I'm using Bootstrap v2.3.2 as a theme on wordpress and followed this tutorial, so most of my code looks like it.
blog.teamtreehouse (dot) com/responsive-wordpress-bootstrap-theme-tutorial
Thank you for taking the time to read this. :)
This is not a problem with Bootstrap, but with your WordPress editor (or how you're using it).
You'll need to use a plain text editor or reconfigure what your editor does to HTML on save.
I'm writing a program in Java that submits a form using WebDriver. There is a method findElement that allows you to select elements using class name, css selector, id, link text, name, partial link text, tag name, or xpath.
Here's the button that I want to select:
<div class="editable" style = "width:82px;float:right;margin-right:10px;">
<a href="#" onclick="$('order_form').submit(); return false;" class="btn">
<img class="btn" src="/myhuds/images/rd_images/btn_place_order.gif" alt="Place Order" width="82" height="17" border="0">
</a>
</div>
I can't use class name because there are multiple buttons on the page. Any ideas on how I might go about using the findElement method to select this button?
Thanks!
Try using this. You can add some browser plugin to get XPath.
driver.findElement(By.xpath("Your XPath"));
You can add an id to the button (may be to all buttons in your page) and find as -
driver.findElement(By.id("Your ID"));
Use CSS selectors. You can find a short explanation here W3, and couple examples here :Examples.
Therefore, try to use driver.findElement(By.cssSelector(...));
For your specific case you can search based on img #alt attribute using XPath
driver.findElement(By.xpath("//img[#alt='Place Order']")).click();
Step 1:
With the available DOM Structure Generate CSS Selector for the "Place Order"
Image
css=a[onclick*='order_form'] > img[src*='btn_place_order.gif']
Then Perform Click on "Place Order" Image.
driver.findElement(By.cssSelector("a[onclick*='order_form'] > img[src*='btn_place_order.gif']")).click();
Following example should help:
Html File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1 class="page-header">Login</h1>
<ul class="errors"></ul>
<div>
<form class="login-form" action="checkLogin.html" method="post">
<label for="username-field">Username1</label>
<input type="text" name="username" class="username-field" />
<br />
<label for="password-field">Password1</label>
<input type="password" name="password" class="password-field" />
<br />
<input type="submit" value="Submit" />
</form>
</div>
<div>
<form class="login-form" action="checkLogin.html" method="post">
<label for="username-field">Username2</label>
<input type="text" name="username" class="username-field" />
<br />
<label for="password-field">Password2</label>
<input type="password" name="password" class="password-field" />
<br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
To locate the input field for Password1 :
WebElement passwordField1: driver.findElement(By.cssSelector("div:nth-child(3) .password-field"));
To locate the input field for Password2 :
WebElement passwordField2: driver.findElement(By.cssSelector("div:nth-child(4) .password-field"));
Learn more about nth-child() selectors here.
I am trying to implement a toggle switch-toggle between textarea and ckeditor in my web form.
As of now I am able to toggle between the 2 editors.But I am not able to have the same contents in both the editors. Its treating it like 2 separate textarea, I want them to have the same contents when I toggle from textarea to ckeditor.Can anybody help me and lemme know what I am missing?
Thanks in advance
Code:
Updated code
<textarea id="editor1" name="editor1" class="ckeditor" rows="20" cols="75"></textarea>
<input type="button" value="CKEditor" onclick="CKEDITOR.replace('editor1');" />
<input type="button" value="Text editor" onclick="CKEDITOR.instances.editor1.destroy('editor1');" />
<input type="submit" value="Submit" />
</form>
Use CKEDITOR.instances.editor1.destroy() to restore it to a textarea and call CKEDITOR.replace('editor1') again when you want a CKEditor.
Remove the whole <div id="textarea"> because otherwise you will get unexpected results, you're using two textareas with the same id and name.