I am using Laravel Forms package to generate the form elements. I am using Bootstrap Material design library to get the elements shiny.
Library: https://fezvrasta.github.io/bootstrap-material-design/#checkbox
For Checkboxes, I am not able to get the style as required. It displays a normal checkbox without any material design style.
Below is my code in Laravel view.
{!! Form::checkbox('remember', 1, null, ['id'=>'remember', 'class' => 'checkbox']) !!}
{!! Form::label('remember', 'Remember me') !!}
Instead of the above code, if I use the direct HTML code, it works. Below is the code that works as expected.
<div class="checkbox">
<label>
<input name="remember" type="checkbox"> Remember me
</label>
</div>
How can I generate the above code using Laravel Forms?
The styling of the checkbox is on input[type="checkbox"] and not in the checkbox class.
create a css as
.checkbox {}
to style the checkbox.
Related
In symfony 3 the forms were rendered with the classes "control-label" for the label element and "form-control" for the input element, and both wrapped in a div with the class "form-group" like this:
<div class="form-group">
<label class="control-label" for="hazardlogbundle_acrgroup_serial">Serial</label>
<input type="number" id="hazardlogbundle_acrgroup_serial" name="hazardlogbundle_acrgroup[serial]" class="form-control">
</div>
In symfony4 however, all three of these classes have been omitted, the same form now looks like this:
<div>
<label for="hazardlogbundle_acrgroup_name" class="required control-label">Grupp (ATS) namn</label>
<input type="text" id="hazardlogbundle_acrgroup_name" name="hazardlogbundle_acrgroup[name]" required="required" class="form-control">
</div>
I happened to use these three classes (or actually, bootstrap did) for my css styling 😇 Is there an easy way of getting these back?
To get the form-control on the actual input I can use:
$builder->add('name', TextType::class, array('label' => 'Grupp (ATS) namn', 'attr' => array('class' => 'form-control')));
But that doesn't solve the problem for the wrapping div or the label itself... I understand I can go and create custom twig templates for each and every form, but no thank you 😎
You can assign "themes" to the Symfony Forms. There are already themes from Symfony for Bootstrap 3,4 and 5. For that you need to specify the theme in the config file of twig. (config/packages/twig.yaml)
For bootstrap 3:
twig:
form_themes: ['bootstrap_3_layout.html.twig']
For bootstrap 4:
twig:
form_themes: ['bootstrap_4_layout.html.twig']
In Symfony 4 there seems to be no predefined theme for bootstrap 5 yet.
You can read more here: https://symfony.com/doc/4.3/form/form_themes.html
I have an input type file that I want to give a "display: none" to, but It doesn't work when I do it like this.
<label class="btn btn-success btn-file">
{!! Form::file('image', null, ['display'=>'none']) !!}
</label>
I could do this through HTML, but my form doesn't allow me to upload files if i don't create my input via Laravel.
The array you are passing is a list of html attributes, display is not an existing attribute. You have to set the style attribute.
{!! Form::file('image', null, ['style' => 'display:none']) !!}
If this doesn't work, make a css class and put the css to hide like:
.hidden { display: none; }
and the exact syntax is:
Form::file($name, $attributes = array()); // The second param is an array of attributes and you are passing it as null
So add that class like:
{!! Form::file('image', ['class' => 'hidden']) !!}
and try again.
The second parameter is array of attributes which will be applied on the HTML element so there is no display attribite, you should use style. Try this:
{!! Form::file('image', ['style'=>'display: none']) !!}
I have the following code:
<div class="container" style="width:100%;">
<div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>
<p-dataTable [value]="cars" [globalFilter]="gb">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
</div>
My component has:
cars = [{
'vin': 'von',
'year': '1990',
'brand': 'Audi',
'color': 'blue'
},{
'vin': 'another',
'year': '2050',
'brand': 'Honda',
'color': 'silver'
}
]
This should be fine, but the problem is I want to use primeng with materializecss. Is there a way I can make it so that for the input box, it does not use materializecss's styling and preserves what primeng already has? At this point, the search box looks messed up with the magnifying glass being above the input field and not inline.
Its supposed to look like this:
https://www.primefaces.org/primeng/#/datatable/filter
If materalizecss overrides same class that primeng uses, you could just load them in different order, first materalizecss then primeng css. This will ensure that primeng css will override same classes materalize defines.
Find out which class materalize overrides and try to work on that.
Edit
I think this plnkr provides an example of your problem
http://plnkr.co/edit/6ptJJw8z9fOgHAAfSv4u?p=preview
Here is how you can fix it
When I open developer tools and select the input box that I want to examine,
it shows me that materalize.css has a class as follows
As you can see here, this css class has highest priority and overrides primeng class. Also, it gives a hint that is :not(.browser-default) pseudoclass.
So if you give your input browser-default class, this rule won't apply.
Check this plnkr
http://plnkr.co/edit/hTa2yxNZJP2Z8p91tQ9t?p=preview
All I did is to add browser-default class to the input
<input #gb type="text" class="browser-default" pInputText size="50" placeholder="Global Filter">
I want to have a file-input attribute with the same style as the upload button as seen in the image below. The upload button is using bootstrap. When I apply bootstrap to button A with "TextBoxFor", I get this weird looking button. When I apply bootstrap to button B with "LabelFor", I get the desired style, only without the functionality of the file-input attribute.
My question is, how do I get a file-input field with a certain bootstrap style applied and maintain its functionality. With the same result(style) as if it was applied to a submit-type attribute. I prefer to use one of the html helpers, because I am trying to understand them.
A:
#Html.TextBoxFor(m => m.File, new { type = "file", #class = "btn btn-default btn-file" })
B:
#Html.LabelFor(m => m.File, new { type = "file", #class = "btn btn-default btn-file" })
Upload button:
<input type="submit" class="btn btn-default" value="Upload" />
This is the normal aspect of an html input type file (A), and the aspect change from browser to browser.
If you want to change as it appears, you have to work with some CSS hiding the real input with another fake over or something similar.
Here is a good example to do this with bootstrap 3.
This is a year old, but I just spent a while struggling with this and figured I'd share my solution. I'd be interested to hear how you resolved this!
I wrapped the razor stuff with a div that uses the form-control class, like so:
...
<div class="col-md-8">
<div class="form-control">
#Html.TextBoxFor(model => model.Filepath, new { type = "file", id = "filepath", accept = ".jpg, .jpeg, .gif, .png" })
#Html.ValidationMessageFor(model => model.Filepath, "", new { #class = "text-danger", style = "font-weight: bold;" })
<p class="help-block">
Images must be 300x300 pixels or smaller, and in a .PNG, .JPG, or .GIF format.
</p>
</div>
</div>
...
However, since Bootstrap's form-control class puts a border around things by default, I had to override those.
border: none;
box-shadow: unset;
The result was pretty clean.
I've been trying to get the default checkbox template written for my Boolean editors and I've run into an issue due to how MVC Razor renders multiple input elements for a single boolean model property.
I have this template defined:
#model Boolean?
<div class="check-box">
#Html.CheckBox("", Model.HasValue && Model.Value)
#Html.LabelForWithoutText(m => m, new object())
</div>
If I manually write out the HTML like:
<div class="check-box">
<input type="checkbox" title="Create?" value="true" name="check" id="chkCreate">
<label title="Create?" for="chkCreate"></label>
</div>
Everything works fine.
But when Razor renders my template on a Boolean property of a model the html is rather different. Due to how MVC renders other hidden inputs for posting booleans back to action methods.
The Razor version looks like this:
<div class="check-box">
<input type="checkbox" value="true" name="GloballyShare" id="GloballyShare" data-val-required="The GloballyShare field is required." data-val="true">
<input type="hidden" value="false" name="GloballyShare">
<label title="GloballyShare" for="GloballyShare"></label>
</div>
The problem is the extra hidden input. I don't want to change this behaviour as that will globally effect how MVC form work by default and I can't think of a way to deal with this in CSS.
So I'm wondering how this could be achieved. You can see a working example of the problem here:
Default CSS3 Checkbox Template in MVC
If you try it then remove the hidden input element and try it again the top most checkbox starts working the same as the bottom checkbox
I've just managed to fix the jsFiddle.
I changed the label selector from a + to a ~ and both checkboxes are now working:
.check-box input[type=checkbox]:checked + label {
Changed to:
.check-box input[type=checkbox]:checked ~ label {
Fixed jsFiddle