In my web application I'm using an angular material datepicker.
The issue is that it does not show all the elements in a row.
This is my view:
Datepicker
To avoid that my customized css has an impact on the view I removed every customized style.
This way, my html is very simple. I simply copied and pasted the angular material example from angular official portal (basic datepicker item):
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
But according to the angular material exaple on-line the image should be something like this:
Basi datepicker from angular material online help
In what am I wrong?
Try using matSuffix instead of matIconSuffix in your mat-datepicker-toggle.
Edit following #TotallyNewb's comment.
Angular version <= v14: matSuffix
Angular version >= v15: matIconSuffix
Related
I want to style my Image Field Button (Choose File) with CSS. Currently, its displaying in the default theme. I am using Bootstrap V5.0.1, Django V3.2.12, Python 3.7.6.
First, I tried to identify or add a class or id which I can add and style the button regularly but was unable to add as the button was added by Django Image Field. The Code in my forms.py is given below:
from django import forms
class ImageUploadForm(forms.Form):
image = forms.ImageField(label='')
Then I used the Hover functionality of the Chrome Developer Tools to identify any leads and found that the button and its area had 2 id's #file-upload-button and #id_image.
I tried to add CSS to the above-mentioned id's but did not get the result i desired. I want to style the Choose File Button Below also if possible can i add any bootstrap to the button, any help would be appreciated! Thanks.
HTML-Django Code
<div class="form-group text-center">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<br>
<button type="submit" id="btnUpload" class="btn btn-primary" style="margin-top:20px;">Upload</button>
</form>
</div>
i was having the same problem and came upon this article https://www.quirksmode.org/dom/inputfile.html
The ideia is to create a useless button and add style to it, then overlap both with the image field button on top, and then set the opacity of the image button to 0.
The image field button will still work, but you will only see the button with the style you add.
I'm following an online tutorial to add form validation to my Angular app below.
I've followed the steps exactly, and the validation works fine in the tutorial, but not in my code.
Below is the input that I am trying to add validation to:
<div class="form-group" [class.hasError]="fullNameControl.invalid">
<label for="fullName" class="control-label">Full Name</label>
<input
required
id="fullName"
name="fullName"
[(ngModel)]="fullName"
type="text"
class="form-control"
#fullNameControl="ngModel"
/>
<span class="help-block" *ngIf="fullNameControl.invalid">Full Name is required</span>
</div>
When the user leaves the field empty, the Label, perimeter of the input field & the span tag should be in red, but instead they are appearing like this:
Can someone please help as to why the bootstrap validation isn't working?
Also FYI, bootstrap is working fine in the other parts, so it has been imported correctly.
I'm trying to implement this "filtered dropdown" pattern for mobile users:
By default, of course, a <select> control is closed, until the user clicks it open.
Is there a simple way to keep it always open? I understand it wouldn't strictly be a "dropdown" then - more like a traditional Windows "list" control.
(Multiple select is not appropriate for this application).
I'm using VueJS if that's relevant.
My current code:
<p>Start typing your suburb name...</p>
<input type="text" length="50" v-model="suburbFilter">
<br>
<select id="suburb-select" v-model="suburb" >
<option v-for="suburb in filteredSuburbs">
{{ suburb }}
</option>
</select>
i use this component
https://paliari.github.io/v-autocomplete/, it's pretty customizable
If it's always open, then you could use <input type="radio">.
Create a filterable list a la: https://www.w3schools.com/howto/howto_js_filter_lists.asp
Then, instead of the <a> tags they're using, you can style a radio input in place of it.
I am developing a UI application using Angular and I can choose one or more of the following CSS frameworks:
Bootstrap 4
Foundation
Angular Material
ng-bootstrap or ngx-bootstrap.
A pre built template that I can purchase.
Many others or new ones...
Is there a best practice to design the Angular application, so that it will be easy to switch to a different CSS framework further down the line ?
One option, I think, is to define a new Feature module, which will import all the controls of a particular CSS Framework, and then, I write a wrapper on that and use it in my application.
For example, I can wrap a md-button with my custom-button in a component template of my module and use it in my application.
Will this approach work or is there a standard design practice that I should follow ?
You could do that, but in my opinion you're wasting your time. How many times in the past have you switched out the design framework? Probably never.
The view of a component is comprised much more than the low level components, like buttons and inputs. There's layout and responsiveness that all play into the composition of the view. For example, lets say you went with material design and wrapped the md-button in my-custom-button. As the application matures you undoubtedly will being adding padding or margin around containers the hold these controls that makes it look and feel more Material. The day comes to switch to the new design pattern on the block, and guess what? Even though you can quickly swap out those buttons for a new look, you're still going to be editing all your views to follow the new look. That said, views are much more than the low level components that make up them, and it's not worth the overhead of wrapping each component with your own.
What makes more sense is to create separate templates for each component.
Lets say you did you entire application in Material, and now you want to switch to New Hotness. You first would go through and rename all your templates:
login.component.html > login.component.material.html
And then create new templates specifically targeting the new framework:
login.component.newhotness.html
Next, create a build process that would swap the templateUrl at build time based on some configuration. Using this strategy, you will be able to easily integrate technologies like Ionic or NativeScript which do not use HTML for their views, but a completely different XML based syntax.
Key takeaways:
Don't wrap existing library components with your own variation
Create component templates in a separate file
When the day comes to switch to a new framework, create new templates for each component and define the older templates with a name that describes the framework that comprises it
Get paid! :)
The issue is not so much the CSS class names, but the HTML structure. I started wondering about it a while ago, and did an attempt to create an intermediate language that would produce either Bulma compliant HTML or Bootstrap compliant HTML, depending on the CSS framework I would pick. It relied on Pug mixins that had specific implementations per framework. As a consequence, I could write this for a form field:
form
+m-input#name(m-label="Name" type="text")
+m-input#password(m-label="Password" type="password" placeholder="Password")
And in the Bootstrap case, it would generate this:
<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" m-label="Name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" m-label="Password" type="password" placeholder="Password" class="form-control">
</div>
</form>
… but for the Bulma case, it would generate this:
<form>
<div class="field">
<label for="name" class="label">Name</label>
<div class="control">
<input id="name" m-label="Name" type="text" class="input">
</div>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="control">
<input id="password" m-label="Password" type="password" placeholder="Password" class="input">
</div>
</div>
</form>
This post covers a more in depth discussion and also has pointers to other examples.
I newbie in drupal 7. I am writing new theme and I don't know how to add my class to form in drupal 7. I install ubercart to setup e-commerce website. I added new attribute for product (Size). I want to redesign in product page. In this page, It has size field but I don't know how to add my CSS. E.g:
<form action="/drupal-7.34/node/6" method="post" id="uc-product-add-to-cart-form-6" accept-charset="UTF-8"><div><div id="uc_product_add_to_cart_form-6-attributes" class="attributes"><div class="attribute attribute-1 odd"><div class="form-item form-type-select form-item-attributes-1">
<label for="edit-attributes-1">Size <span class="form-required" title="This field is required.">*</span></label>
<select id="edit-attributes-1" name="attributes[1]" class="form-select required"><option value="" selected="selected">- Select -</option><option value="1">39</option><option value="2">40</option><option value="3">41</option></select>
</div>
</div></div><input type="hidden" name="qty" value="1">
<input type="hidden" name="form_build_id" value="form-w06CKx7aNBiYShqfg8LiP98CaFLpEb8mgWzFYQWqnQ4">
<input type="hidden" name="form_token" value="JtZIrcKeIfXiVpwX43K6KqHPlZazR1klS1ht3W7PI9I">
<input type="hidden" name="form_id" value="uc_product_add_to_cart_form_6">
<div class="form-actions form-wrapper" id="edit-actions"><input class="node-add-to-cart form-submit" type="submit" id="edit-submit-6" name="op" value="Add to cart"></div></div></form>
I want to add my class to the select element. How can I do that?
In your theme directory there is file named theme_name.info . Inside of it there should be (or you can create it) array that defines css file which will be included on page. Check out explanation here:
https://www.drupal.org/node/171205
https://www.drupal.org/node/171209
So, you basically have to add path of your css file to that list and it will be included on every site page. Your html.php template must print out stylesheets variable (which will contain paths to css files). If you are not sure how to do it check how it's done on some standard drupal theme that comes with drupal installation.
After adding your css to theme info file don't forget to clear the cache!
Other way would be to include it manually, from page.tpl.php file. Just add there common CSS include line, like you would that in plain HTML file.
You can add CSS even from code with drupal_add_css() function, but that's a bit more advanced.
And you can use form id attribute to "aim" it and all inner elements with css.