i'm making a workbook creator in C#.net ( using visual studio )
the book is build from the text part and the question part.
all the answers for the question are in side the text and the user need to click on the right answer.
if he's right then the word become green and if he's wrong it become red.
i'm using linkbutton for this and i need it to be without and "link" style.
i use this code for the question part:
public class question
{
public void createQusetion(Panel leftside, string text, string question,string answer)
{
string[] Qbuttonstext = text.Split(' ');
for (int i = 0; i < Qbuttonstext.Length; i++)
{
LinkButton answerButton = new LinkButton();
if (Qbuttonstext[i] == answer)
{
answerButton.ID = "answer";
}
else
{
answerButton.ID = "word" + i.ToString();
}
answerButton.Text = Qbuttonstext[i].ToString()+" ";
answerButton.CssClass = "textbuttonB4";
answerButton.Click += new EventHandler(checkAnswer);
leftside.Controls.Add(answerButton);
}
}
}
i used css stylesheet and used this code:
.textbuttonB4 a:link
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
.textbuttonB4 a:hover
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
.textbuttonB4 a:visited
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
when the code running the text is still appears as a link.
after looking the web for solution, dont konw why its not working.
sorry for the previous version of this question.
asaf
Check the output source. Does the button have the appropriate class? Did you remember to include the stylesheet?
Also, what does style:none; do? It's not valid CSS.
Related
Point 1. The image shows the simulator with the title in black letters. In the next section of the image it shows what is configured in the CSS and finally its application in the inspector. I tried assigning other UIIDs in the inspector and it changes everything except the color of the letters.
My CSS mapping code.
public class Tarifa extends Form {
Idioma idioma;
public Tarifa() {
this.setLayout(new BorderLayout());
this.setScrollable(true);
Usuario iU = Usuario.getInstancia();
idioma = new Idioma(iU.getIdioma());
this.setTitle(idioma.getMensaje2());
this.getToolbar().setUIID("Titulo");
}
}
In point 2 I need to place the icons as close to the right of the form and therefore the search fields grow but I can't make it happen.
My code in that case is:
Style s = UIManager.getInstance().getComponentStyle("ButtonUtil");
// Contenedor de Lugar de Inicio
Button btInicio = new Button(idioma.getMensaje5(), FontImage.createMaterial(FontImage.MATERIAL_FLAG, s, 4), "ButtonBusqueda");
Button btLocalizar = new Button(FontImage.createMaterial(FontImage.MATERIAL_LOCATION_PIN, s, 4));
Container cnInicio1 = new Container(new BorderLayout());
cnInicio1.addComponent(BorderLayout.CENTER, btInicio);
cnInicio1.addComponent(BorderLayout.EAST, btLocalizar);
Container cnInicio = new Container(new BoxLayout(BoxLayout.Y_AXIS));
cnInicio.addComponent(new Label(idioma.getMensaje5()));
cnInicio.addComponent(cnInicio1);
My CSS is:
ButtonBusqueda {
font-family: "native:MainRegular";
font-size: 2.5mm;
color: blue;
text-align: left;
border: 1pt solid gray;
padding: 1mm;
margin-left: 1mm;
margin-top: 1mm;
}
ButtonUtil {
font-family: "native:MainRegular";
font-size: 3mm;
color: blue;
text-align: left;
margin: 0mm;
paddin: 0mm;
}
You are customizing the container surrounding the title (the title area). Unlike normal CSS properties aren't inherited directly in our CSS. We have explicit hierarchies and the title (which you can see is below the renamed UIID) inherits its styles from Label.
Using this style should let you customize the title font:
Title {
...
}
I'm using code mirror from ngx-codemirror. I want to split the line when it fits to the width of the parent. I have found some solutions to split the like using,
lineWrapping: true
and in styles
.CodeMirror-wrap pre {
word-break: break-word;
}
Using this I was able to split the line but I need to show the line number too.
The line number is not shown for the line that was just split.
This is the stackblitz link to my issue : code-mirror-line-break-issue
Screenshot :
Please help me with this.
This is not feasible using Code Mirror options, as this is something that is a bit counter intuitive that is rarely (ever?) wanted.
Like I said in my comment, say 2 persons discussing on a phone/web chat about a piece of code/json. They will not see the same thing when one mentions a line number to the other if they have different windows/screen sizes
Solution
As a hack, you can create your own elements representing line numbers and place them over the default line numbers.
Here is the stackblitz demo
Note: This a a very basic example. If you change code mirror settings (font size, gutters,...), you might need to tweak the css or do more calculation based on these settings.
component.html
<div class='codeMirrorContainer'>
<ngx-codemirror
#codeMirror
[options]="codeMirrorOptions"
[(ngModel)]="codeObj"
></ngx-codemirror>
<ul class='lineContainer' [style.top.px]="-topPosition">
<li [style.width.px]='lineWidth' *ngFor="let line of lines">{{line}}</li>
</ul>
</div>
component.css
li
{
height: 19px;
list-style: none;
}
.codeMirrorContainer
{
position:relative;
overflow: hidden;
}
.lineContainer
{
position:absolute;
top:0;
left:0;
margin: 0;
padding: 5px 0 0 0;
text-align: center;
}
::ng-deep .CodeMirror-linenumber
{
visibility: hidden; /* Hides default line numbers */
}
component.ts
export class AppComponent
{
#ViewChild('codeMirror') codeMirrorCmpt: CodemirrorComponent;
private lineHeight: number;
public lineWidth;
public topPosition: number;
public lines = [];
codeMirrorOptions: any = ....;
codeObj :any = ...;
constructor(private cdr: ChangeDetectorRef)
{
}
ngAfterViewInit()
{
this.codeMirrorCmpt.codeMirror.on('refresh', () => this.refreshLines());
this.codeMirrorCmpt.codeMirror.on('scroll', () => this.refreshLines());
setTimeout(() => this.refreshLines(), 500)
}
refreshLines()
{
let editor = this.codeMirrorCmpt.codeMirror;
let height = editor.doc.height;
this.lineHeight = editor.display.cachedTextHeight ? editor.display.cachedTextHeight : this.lineHeight;
if (!this.lineHeight)
{
return;
}
let nbLines = Math.round(height / this.lineHeight);
this.lines = Array(nbLines).fill(0).map((v, idx) => idx + 1);
this.lineWidth = editor.display.lineNumWidth;
this.topPosition = document.querySelector('.CodeMirror-scroll').scrollTop;
this.cdr.detectChanges();
}
}
I am new to css and i would like to know if css can be applied to the properties of tag?
For example in the below code i would like to see entry.count and "files" in blue color.
code
render() {
return(
<div className="AppL" id="AppList">
{this.createApplicationList()}
</div>);
}
createApplicationList() {
var guiResult = [];
for (var key in this.state.AppName) {
var entry = this.state.AppName[key];
guiResult.push(
<Collapsible trigger={entry.AppName + "\t" + "\t" + entry.Count + " files"} className="AppList" transitionTime ="10">
</Collapsible>);
};
return guiResult;
}
my scss for this component
.AppList{
color: black;
border-bottom: 1px solid #00a886;
padding-top:10px;
padding-bottom:10px;
}
.Collapsible .Collapsible__trigger {
color: blue;
}
.Collapsible selects all elements with the Collapsible class. Collapsible_trigger does the same for the Collapsible__trigger class. Together, the rule selects all .Collapsible__trigger elements within .Collapsible elements, and styles them with blue text.
This is based purely on your provided HTML code. The JavaScript appears to be irrelevant.
.Collapsible .Collapsible__trigger.is-closed also works and is more specific. Depends on your use-case.
I am using "#Html.ActionLink()" and used "text-decoration:none" in it. But still the link is showing underline for it.
Can anybody suggest solution for it to remove the underline.
Thanks,
Yuoraj
You can do it inline like this:
#Html.ActionLink(<your params>, new { style="text-decoration:none"})
but really you should be using a css file and a class:
#Html.ActionLink(<your params>, new { #class="myclass"})
where myclass looks like
a.myclass {
text-decoration: none;
}
UPDATE:
a.hprLnkmastercls {
text-decoration: none;
}
And if you don't want it underlined on hover
a.hprLnkmastercls:hover {
text-decoration: none;
}
In your .cshtml
#Html.ActionLink("Process", "Home" "WebsiteHome", new {}, new { #class = "hprLnkmastercls" })
will render as:
<a class="hprLnkmastercls" href="/WebsiteHome/Home">Process</a>
I want to Capitalize first letter only and other should be small using CSS
String is:
SOMETHING BETTER
sOMETHING bETTER
Something better
but the result should be
Something Better
Is this possible using CSS? To Capitalize first letter I am using
text-transform: capitalize;
But not able to capitalize in each case.
"I want to use CSS because in my application it has written every where hard coded but a class has been called everywhere."
you should be able to use the :first-letter pseudo element:
.fl {
display: inline-block;
}
.fl:first-letter {
text-transform:uppercase;
}
<p>
<span class="fl">something</span> <span class="fl">better</span>
</p>
yields:
Something Better
It is not possible with CSS alone but you can do it with Javascript or PHP for example.
In PHP
ucwords()
And in Javascript
function toTitleCase(str){
return str.replace(/\w\S*/g, function(txt){
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
Extracted from
Convert string to title case with JavaScript
You can try a combination of this answer and some javascript (using jQuery)
HTML:
<div class='capitalize'>
SOMETHING BETTER
SOMETHING BETTER
SOMETHING BETTER
</div>
JAVASCRIPT:
$('.capitalize').each(function(){
var text = this.innerText;
var words = text.split(" ");
var spans = [];
var _this = $(this);
this.innerHTML = "";
words.forEach(function(word, index){
_this.append($('<span>', {text: word}));
});
});
CSS:
.capitalize {
text-transform: lowercase;
}
.capitalize span {
display: inline-block;
padding-right: 1em
}
.capitalize span:first-letter {
text-transform: uppercase !important;
}
Demo: http://jsfiddle.net/maniator/ZHhqj/
Why dont you just use the :first-letter pseudo element in css?
h2:first-letter{
text-transform: uppercase;
}
h2{
*your general code for h2 goes here;*
}
Yes, CSS is no help here. Welcome to the world of JavaScript, where anything is possible.
window.onload = function(){
var elements = document.getElementsByClassName("each-word")
for (var i=0; i<elements.length; i++){
elements[i].innerHTML = elements[i].innerHTML.replace(/\\b([a-z])([a-z]+)?\\b/gim, "<span class='first-letter'>$1</span>$2")
}
}
.first-letter {
color: red;
}
<p class="each-word">First letter of every word is now red!</p>