I have the following html:
<span wicket:id="votevaluenotifier">
<label name="currentVoteValue" id="currentVoteValue" wicket:id="currentVoteValue" />%
</span>
I'm trying to style the result in CSS using:
.currentVoteValue
{color:#CC3300;
}
but no joy. I know I'm missing something obvious but what? I tried using votevaluenotifier instead of currentVoteValue but no dice.
Apologies - I'm a bit of CSS newbie.
I don't know wicket, but if you have
<label id="currentVoteValue">
you should style it using
#currentVoteValue {
color:#CC3300;
}
because # begins an ID selector and . a class selector
Related
Hello I try to understand when it's necessary to use inline style instead className in this case. I take a long time to solve my problem of translation. At the beginning I want to translate component by using classNameand that's don't work. it's very weird because in my point of view there is no reason that's happen. So I figure there is something wrong in my code, but what... I have not yet found. So I finish trying to translate by using a inline style. Miracle, that's work fine.
My question is why ?
Work well
export function Content() {
return (
<div style={{transform: 'translateY(100px)'}}>
<Test/>
<Footer />
</div>)
}
don't work
export function Content() {
return (
<div className={container_content}>
<Test/>
<Footer />
</div>
)
}
css
.container_content {
transform: translateY(100px);
}
Nota bene :
The problem is not from the method. To use className in my jsx
must be like that:
import { container_content } from "./test.module.css";
and next
<div className={container_content}><div>
So this part of code is good, the issue seems to come from elsewhere...
What's happening is that when you use the inline style you are passing an object that includes the styling for that component. When you use the className you need to pass in a string for the class you want to use. Right now you are passing a variable name. Either of these works:
<div className={"container_content"}>
OR
<div className="container_content">
If you think about it in regular html you would do
<div class="container_content">
EDIT: Given your updated question, you should just import the css file with:
import "./test.module.css"
and then use the solution I mentioned.
inside the js file, you need to import the CSS file like this
import " css-file-dir";
and then you can Reference to the CSS classes inside your component as a string
example :
className="container_content"
I am trying to bind CSS styling to vuejs tags. I dont seem to be able to get it working.
Below is the code which i am trying. Can anyone help me out with this? I am not able to get the Styling to work. I am trying this as well as binding based on conditional. Both doesnt seem to work. Can anyone help me with this? I have tried all the ways i could find on stackoverflow, none of them seem to work for me. Can any one help me if i am doing something wrong?
<b-table
class="PatientTable"
borderless
hover
v-on:row-clicked="redirectToPatientView"
:items="users"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
id="tableData"
>
<template v-for="key1 in fields" v-slot:[`cell(${key1})`]="{ value }" id="tableData" >
<b class="patientData" id="tableData" v-bind:key="key1" v-bind:style="'{font-size:200px;}'">{{ value }}</b>
</template>
When you bind a style, pass in an object instead of a string of an object.
<!-- Instead of: -->
<b :style="'{font-size:200px;}'">{{ value }}</b>
<!-- Do: -->
<b :style="{ 'font-size' : '200px' }">{{ value }}</b>
Notice that, in the second line, the object is placed directly into the double-quotes, without its own set of single-quotes. The contents of those double-quotes are straight up JavaScript, so you don't have to escape the object in them. What you're essentially trying to do is along these lines:
<b :style="styleBinding">{{ value }}</b>
<script>
export default {
data: function() {
return {
styleBinding: {
'font-size': '200px',
'margin-top': '5em',
'other-css-property': 'value'
}
}
}
}
</script>
It's just that, since you're only using a single property, it's a little cleaner to do in-line in the template.
use :class binding instead?
<component :class="{'your-classname' : condition}">
Since inline styling is not really advisable. https://v2.vuejs.org/v2/guide/class-and-style.html
I am trying to find an element using CSS Selector, using Selenium (Java).
This is my HTML.
<div class="PayMeth" widgetid="PayMeth_0" id="PayMeth_0">
<div class="Icon GIFT" data-dojo-attach-point="pmN"></div>
<div class="paytMethLab" data-dojo-attach-point="pmN">Program Card<br>
0000 000 0000 ****</div>
<div class="payMethAmtP" data-dojo-attach-point="pmAmtN">-$0.1</div>
</div>
I have used the following path but it is failing.
By.cssSelector("div[class=paytMethLab.contains(Program Card)]")
I want to get the text "Program Card".
Can someone please help. Thanks.
Here is the simple css that you can use.
div.paytMethLab
Here is the code
WebElement PayMeth = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.paytMethLab")));
String programcard= PayMeth .getText();
if(programcard.contains("Program Card"))
{
//your logic goes here.
}
This is what I used and it worked :)
WebElement PayMeth = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.paytMethLab")));
String programcard = PayMeth.getText();
if(programcard.contains("Program Card"))
{
// Do something
}
I am trying to implement typeahead functionality in Angular. I am using ngbTypeahead from ng-bootstrap for this as shown below.
<input id="typeahead-template" type="text" class="form-control form-rounded" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" />
<ng-template #rt let-r="result" let-t="term">
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/'+r['flag']" class="mr-1" style="width: 16px">
<ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
</ng-template>
This is displaying result like
result1
result2
result3
but I want a header to be added and the result should be in the format
The results are
result1
result2
result3
Can someone please help with this?
This isn't supported by ng-bootstrap's Typeahead component, however you can use CSS to insert text before the results. The only problem with this solution is that you need to use ::ng-deep which is deprecated and likely to be dropped by Angular soon.
Add this to your component's CSS:
::ng-deep ngb-typeahead-window:before {
content: "The results are:";
}
and you should see the following when results are displayed:
This will prepend the typeahead results with the text specified as the value of the content property.
Please see this StackBlitz for a demo
There is a hack I have been using:
Use the first row as a dummy row with a specific attribute
Track the existence of that attribute to render the header at the template
Use CSS to make the first row unselectable.
.popup-custom-class .dropdown-item:first-of-type {
pointer-events: none;
}
Strange one,
im trying to apply a style to a textbox that is already using jquery autocomplete, the style im trying to apply doe not work, any ideas?
CSS
#LongTextbox {
width: 250px;
}
HTML
<input name="ItemEntry_item_${id}" type="text" value="${item}" id="ItemEntry_item_${id}" class="LongTextBox"/>
Debug shows
<input name="ItemEntry_item_1" type="text" value="" id="ItemEntry_item_1" class="LongTextBox ui-autocomplete-input" autocomplete="off">
CSS debug shows no sign of LongTextBox being consumed
Your HTML has a class of LongTextBox (capital B) whereas your CSS is targeting an id of LongTextbox (lowercase b).
change CSS to .LongTextBox instead of #LongTextbox
fiddle: http://jsfiddle.net/6Wgxc/
Change your CSS as below. In CSS class is denoted with . and id is denoted by #, further in your CSS code the class name LongTextBox is mentioned as LongTextbox
CSS
.LongTextBox {
width: 250px;
}