I installed mediawiki on my server as my personal knowledge base. Sometimes I copy some stuff from Web and paste to my wiki - such as tips & tricks from somebody's blog. How do I make the copied content appear in a box with border?
For example, the box at the end of this blog post looks pretty nice:
http://blog.dreamhost.com/2008/03/21/good-reminiscing-friday/
I could use the pre tag, but paragraphs in a pre tag won't wrap automatically.. Any ideas?
I made a template in my wiki called Template:quote, which contains the following content:
<div style="background-color: #ddf5eb; border-style: dotted;">
{{{1}}}
</div>
Then I can use the template in a page, e.g.,
{{quote|a little test}}
Works pretty well - Thanks!
<blockquote style="background-color: lightgrey; border: solid thin grey;">
Det er jeg som kjenner hemmeligheten din. Ikke et pip, gutten min.
</blockquote>
The blockquotes are better than divs because they "explain" that the text is actually a blockqoute, and not "just-some-text". Also a blockquote will most likely be properly indented, and actually look like a blockqoute.
To combine the two mostly valid answers, you should use a MediaWiki template that itself utilizes a blockquote.
The content of the template:
<blockquote style="color: lightgrey; border: solid thin gray;">
{{{1}}}
</blockquote>
Usage on your WIKI page (assuming you named the template "quote"):
{{ quote | The text you want to quote }}
Mediawiki supports the div tag. Combine the div tag with some styles:
<div style="background-color: cyan; border-style: dashed;">
A bunch of text that will wrap.
</div>
You can play around with whatever css attributes you want, but that should get you started.
I used the code from #steve k Changing light-grey to black and adding padding between the border and text. I found the light-grey nearly invisible and the text was directly adjacent to the border.
<blockquote style="
color: black;
border: solid thin gray;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
">
{{{1}}}
</blockquote>
You can use index.php?title=MediaWiki:Common.css page for this purpose and set a CSS style for the <blockquote/> element there:
blockquote {
background-color: #ddf5eb;
border-style: dotted;
}
In a similar fashion you can style <pre/> which is useful for code snippets etc. so that it wraps content:
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
For longer code snippets you may want to use <syntaxhighlight/> (or <source/>) element that comes with SyntaxHighlight extension. You can style it too.
Set a width in the pre tag, and it will wrap.
<pre width="80%">
Related
Tried to follow this manual, but it doesn't work: https://www.jetbrains.com/help/webstorm/markdown.html#css
Is it possible at all? Did somebody succeed in this task?
Yes, it's possible.
Download one of the markdown css files from https://github.com/sindresorhus/github-markdown-css/.
In the Markdown prefs, set the custom css to point to that file (URLs don't work).
Paste this into the "Add CSS rules:" field:
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
#media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
At the top of your markdown file, insert this (the blank line is important):
<div class="markdown-body">
At the bottom of your markdown file, insert this:
</div>
That's it!
I've tried reading the documents or search for other similar question to it in stackoverflow or online, but it's either I'm not googling correctly.I'm not sure how to remove the QRCode after it has been scanned.
Is displaying it in a < p > tag wrong?
The QR code is generated from a type string not taken from a database.
Am I required to have a database and a script running with intervals that checks whether the QR code has been read,
Am I assuming wrongly?
//in my file.ts
createCode() {
this.createdCode = this.qrData;
}
My code for displaying the scanned QR
//in my file.html
<ion-card *ngIf="createdCode">
<ngx-qrcode [qrc-value]="createdCode"></ngx-qrcode>
<ion-card-content>
<p>Value: {{ createdCode}}</p>
</ion-card-content>
</ion-card>
If there are any relating questions that you have across please do refer me to it, as I'm not able to pin point over the few hours of looking trough.
Thank you in advance!
Never mind, I just had to add span class which handles closing it.
<span class =
"closebtn" onclick="this.parentElement.style.display='none';">×
</span>
<ion-card *ngIf="createdCode">
<ngx-qrcode [qrc-value]="createdCode"></ngx-qrcode>
<ion-card-content>
<p>Value: {{ createdCode}}</p>
</ion-card-content>
</ion-card>
and in file.scss add the following to display the closing button.
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
color: black;
}
<input id="Proc#fr#2-1-111" type="text" data-ctrl="JSCtrl" name="fr" style="display: none; background-color: rgb(224, 224, 224); width: 80px;" disabled=""/>
<select id="Proc#fr#2-1-111" data-ctrl="JSCtrl" name="fr" optionsdict="3,25 cm,4,29.97 cm,5,30 cm" style="border: 1px solid rgb(127, 157, 185); width: 80px;">
<select id="Proc#fr#2-1-111" data-ctrl="JSCtrl" name="fr" optionsdict="3,25 cm,4,29.97 cm,5,30 cm,6,50 cm,7,59.94 cm,8,60 cm" style="border: 1px solid rgb(127, 157, 185); display: none; width: 80px;" disabled="">
In the above code, id is same for input, select. I need to choose a value in select. Is it possible via selenium webdriver using python?
First of all, this HTML is not well formed. Duplicate IDs should be avoided. If you don't have access to modify the source code, talk to your manager please. Selenium developers should be able to change source whenever needed.
For the question about "how to find element by means id combined with style tag", here is how you can achieve it.
Use CSS Selector
driver.find_element_by_css_selector("select[id='Proc#fr#2-1-111']:not([style*='display: none'])")
Use XPath
driver.find_element_by_xpath(".//select[#id='Proc#fr#2-1-111' and not(contains(#style, 'display: none'))]")
Sorry to bother with such a beginner's question but I simply can't get this 100% height thing to work. Here is the situation (sorry, developing locally so no link):
I have a wrapping container that contains two floating elements. I followed all steps that might resolve the 100% issue, such as:
html, body {
height: 100%;
background: url(../img/bg.png);
font-family: 'SansationRegular', Helvetica;
}
.wrap {
width: 100%;
height: 100%;
height: auto !important; (apparently this fixes the issue in Chrome)
margin:40px 0px 0px 0px;
padding:0;
}
Both floating div's (sidebar and content) have height: 100% and I also added a third div container to clear the floating elements.
Still, when I add content to the content div the sidebar does not "grow" automatically. I feel I tried everything but it won't work.
Any ideas/hints are highly appreciated at this point! :)
Many thanks in advance!
P.S. I use Twitter Bootstrap as well in case that helps to solve my problem
Here's a basic example which shows how to do what you're trying to do. You should be able to take this code and adapt it to your own code.
http://jsfiddle.net/QXZuy/1/
<div class="wrap">
<div class="sidebar"></div>
<div class="content"></div>
</div>
html, body {
height:100%;
}
.wrap {
height:100%;
width:100%;
display:table;
overflow:auto;
background:#ccc;
}
.sidebar {
display:table-cell;
width:25%;
background-color:blue;
}
.content {
display:table-cell;
width:75%;
background-color:red;
}
i am using django python, i apply placeholder for my forms fields in forms.py ,like
self.fields['email'].widget.attrs['class'] = 'form-text'
self.fields['country'].widget.attrs['class'] = 'form-dropdownfield'
self.fields['email'].widget.attrs['placeholder'] = 'Email*'
in .css file
.form-text
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
height: 30px;
width: 300px;
border-radius:8px;
border:none;
box-shadow:-1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
border:1px solid #D2D2D2;
padding-left:10px;
}
Question 1:
Place holder working properly in all browser but not in IE,what can i do for IE problem?
Question 2:
Country field is dropdown list,how can apply placeholder for this one?
Placeholders work for INPUT form elements, but not for SELECT (dropdown) elements. This question has a number of answers that offer strategies for default values of dropdown elements.
Though I'm not sure, it's possible that many versions of IE don't support the placeholder attribute (and this post suggests that they're unsupported).
If placeholder is unsupported in a version of IE that you want to support, you could try a polyfill such as https://github.com/ginader/HTML5-placeholder-polyfill
No need to take any javscript or any method you can just do it with your html css
HTML
<select id="myAwesomeSelect">
<option selected="selected" class="s">Country Name</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
Css
.s
{
color:white;
font-size:0px;
display:none;
}