I am trying to add css in thymeleaf but am getting internal server error.
<span th:style="'content:('\ +${{user.getUserIcon()}}+')'"></span>
How to add css class in thymeleaf?for example I have this class in css I have to display it using thymeleaf
.content .users{
content:"\42";
color:#fff;
}
Got Solution
<span th:class="${{user.getUserIcon()}}"></span>
Related
I'm trying to build an application with Quasar Framework.
I want to have 2 QRouteTabs in the QToolbar that is located inside QLayoutHeader. I have this code:
<template>
<q-layout view="lHh Lpr lFf">
<q-layout-header>
<q-toolbar color="primary" :inverted="$q.theme === 'ios'">
<q-tabs>
<div class="row">
<q-route-tab default="true" to="/" label="Найду еду"/>
<q-route-tab to="/contacts" label="Контакты"/>
</div>
</q-tabs>
</q-toolbar>
</q-layout-header>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
This is what I get:
As you see, there is an empty space above the QTabs. I want to get rid of it. How can I do this?
The proper way to do what you want is to remove the surrounding div and add slot="title" to the q-route-tab element.
This will stick the tab in the right place.
<q-tabs>
<q-route-tab slot="title" default="true" to="/" label="Найду еду"></q-route-tab>
<q-route-tab slot="title" to="/contacts" label="Контакты"></q-route-tab>
</q-tabs>
Codepen
I've looked at the page code in the browser and came up with the solution:
<style>
.q-tabs-head {
display: none;
}
</style>
I am using basic mat-select component in my project.
<mat-form-field>
<mat-select placeholder="Favorite food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
how can i remove the underline,I have tried this answer too still no result.
You can do this:
::ng-deep .mat-form-field-underline {
display: none;
}
StackBlitz
You can also use the appearance property on the <form-field> . Setting appearance="none" will remove the underline without any css hack. And you can also get rid of ::ng-deep which is not recommended.
So your code will be like this.
<mat-form-field appearance="none">
<mat-select placeholder="Favorite food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
For more information on appearance, you can check here. https://material.angular.io/components/form-field/overview#form-field-appearance-variants
::ng-deep is going to be depracated.
Use css hierarchy. If you have a global css or scss file... then in the component, wrap this in a div and give it a class.
For example,
<div class="content-wrapper">
...all your html code here
</div>
Then, in your global css/scss file, you can target the .mat-form-field-underline class like so:
.content-wrapper .mat-form-field-underline {
display: none;
}
Here, notice that we don't use comma after class names. This is using hierarchy. It saying that we only want to target the native .mat-form-field-underline class that is wrapped inside the .content-wrapper
Hope this helps. Glad my senior developer had shared me this as we used ViewEncapsualtion, which bled css all over the place. This is the right solution to our use case, hope it helps yours.
This also works for other native mat classes for customization of your code/html.
If you want to hide underline in particular input only then you can do something like below.
<div class="select-block">
<mat-form-field>
<mat-select placeholder="Select Option">
<mat-option>One</mat-option>
<mat-option>Two</mat-option>
<mat-option>Three</mat-option>
</mat-select>
</mat-form-field>
</div>
Add the below-mentioned line of code in the parent class of mat-form-field.
.select-block{
/deep/ mat-form-field {
&.mat-form-field-appearance-legacy {
.mat-form-field-underline {
display: none;
}
}
}
}
Try this way to hide the underline.
Thanks.
Two options to solve the problem:
You can directly setup appearance="none" in mat-form-field tag
ex. <mat-form-field appearance="none">.
You can hide using css
ex. ::ng-deep .mat-form-field-underline { display: none; }
I had appearance="fill" on the mat-form-field. These settings worked to remove the underline for me:
scss:
.mat-form-field-appearance-fill {
.mat-form-field-underline {
display: none;
}
}
Add set encapsulation to ViewEncapsulation.None in the component:
encapsulation: ViewEncapsulation.None
http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
I followed the above link from jquery mobile. It doesn't work as expected !
Can someone help
Try setting the height too:
<div data-role="controlgroup" data-type="horizontal">
<input type="text" id="search-control-group" data-wrapper-class="controlgroup-textinput ui-btn">
<button>Submit</button>
</div>
.controlgroup-textinput{
height: 20px;
padding-top:.22em;
padding-bottom:.22em;
}
DEMO
To anyone having the same issue after using the code from the jquerymobile demos!
If you copy html or css content from the demos page, make sure to remove all leading whitespaces (indentation) first and add your own!
The demos page uses some other invisible non breakable spaces that prevent proper css parsing in most browsers!
I had the same issue and when looking into the css parsed by chrome it was marking
" padding-top: .22em;"
as invalid css, because of those non breakable spaces.
Is it possible to use html in Foundation's tooltips?
Yes. It supports html in the title attribute.
from foundation.tooltip.js:
create : function ($target) {
var $tip = $(this.settings.tip_template(this.selector($target), $('<div></div>').html($target.attr('title')).html())),
...
Breaking that down it creates a new element wrapped in a div and the contents of the title attribute are inserted into the div using the html() method which will convert any markup in the string to html elements.
The following code:
<img src="example.png"
class="general-infotip has-tip tip-top"
data-tooltip
title="<b>This is bold</b> This is not" />
Will result in a tool tip that looks like
This is bold This is not
In Foundation v6.3+, you can append the attribute data-allow-html="true" to the element to allow html in the tooltip.
For example:
<span data-tooltip data-allow-html="true" aria-haspopup="true"
class="has-tip" data-disable-hover="false" tabindex="1"
title="Fancy word for a <strong>beetle</strong>. <br><br><img src=https://pbs.twimg.com/profile_images/730481747679432704/uc08_dqy.jpg />">
Scarabaeus
</span>
Here it is working in jsfiddle.
For more information, check out the pull request.
We add Struts errors and messages using ActionSupport.addActionError(...) and addActionMessage(...) and then output the results using <actionerror class="x"/> and <actionmessage class="x"/>.
When these tags output the messages they output in the form: <ul><li><span class="x">msg</span></li></ul>
As you can see you can specify the css class (in this example 'x') to apply formatting. Problem is that we want to apply the margin-top and margin-bottom css properties and you can't use these properties (I gather) with <span> elements - only with <div> elements.
So is there anyway you can get these Struts tags to output error/message using a <div> instead of a <span>?
Thanks.
Update:
As per the answer/workaround below, I just enclosed the struts tag within a div:
<div class="error-status">
<s:actionerror cssClass="error"/>
<s:actionmessage cssClass="status" />
</div>
The error-status CSS class set the properties on the LI:
.error-status LI { MARGIN-TOP: 5px; MARGIN-BOTTOM: 5px; display: block; }
.error { COLOR: red }
.status { color: #0066CC }
You can apply margin to spans if you also apply display:block.
But the optimal solution is to apply margin to the li elements.