On my Vue.js application i have tried CKEditor, tiptap, Froala etc. and every one of them prints out all html tags and all inline css styles.
Some images for better understanding what is a problem:
image for better understanding
image with described problem
blog form
I have searched web and found verly little info about this so if anyone know why is this happening please help me out :)
Kind Regards,
Sinisa
you should use v-html and put your text variable inside the element like this:
<p v-html="yourTextVariable"></p>
by the way if you use v-html u probably need to make text appear on next line instead of overflowing (overflowing text is common issue that happen when u use v-html) :
p{
color: #eeeeee;
text-align: justify;
white-space: initial;
overflow-wrap: break-word;
}
Related
When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"
ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example)
I expect see topnav in a single line.
I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right !important;
width: 200px;
padding-top: 6px;
}
The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.
One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.
Thanks Paustian. It's working.
I have edited the file: Resources\ZikulaSearchModule\views\Block\search.html.twig in order to change the css class to "myInput-group". Then I have edited Resources/public/css/style.css and add your changes to the file.
Thanks for all guys.
The font style/family is not standard between components.
For example :
input vs textarea
datatable vs datatable page-size popper dropdown
the notification messages
How can I fix this in "element-ui" way ?
Thank you.
Element-UI Version : 2.4.6
I was facing a similar issue, if you are using webpack, one of the options is to add the following code when importing element UI:
import 'element-ui/lib/theme-chalk/reset.css'
You will find the original answer here:
https://forum.vuejs.org/t/elementui-styling-is-not-applied-to-new-webpack-element-ui-project/26194/9
In my scenario I wanted to make a global change to the font-family.
On top of importing the above mentioned reset.css, as you mentioned some components i.e. <input>s, <button>s were still not behaving and inheriting the declared font-family (applied to say the <body>) and were falling back to browser defaults.
Digging around the element-ui GitHub issues, I found the following snippet which forces these missing elements to inherit their font-family, so a single font-family definition on the body will propagate to all components. I insert this right after my body font-family definition.
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
Taken from : https://github.com/ElemeFE/element/issues/150#issuecomment-249750366
I have noticed that in case of <button> tags, font-family is not inherited automatically; either I must specify it explicitly like:
<button style="font-family: some_style;">Button</button>
or use inherit property like this:
<button style="font-family: inherit;">Button</button>
However, the font-family is automatically inherited in case of other tags, the <a> tag for example.
Why do we have this issue with the <button> tags?
Here's a DEMO.
Form elements don't inherit font settings, you have to set these properties manually.
If you use font declaration for eg. body,
body {font-family: arial, sans-serif}
use just
body, input, textarea, button {font-family: arial, sans-serif}
or
input, textarea, button {font-family: inherit}
If you inspect your demo in a browser using its Developer Tools, you can see that the font family of the button element comes from the browser style sheet. They show this in different ways, and they may use different fonts there, but the principle is the same: there is a declaration for the font-family property of the element in some style sheet, hence that property cannot be inherited (unless you explicitly set the value inherit on it, of course).
This is not defined in specifications, but neither are such browser style sheet settings prohibited by them, and they are common practice.
I know this is an old question, and I am answering late. Both #panther and #jukka-k-korpela answer the question correctly. However, they are missing one key information about the fix for the precise question and the demo provided by #nikunj-madhogaria. I attempt to complete the answer according to the question.
Since the question is about the button tag, it is probably wise to add button to the CSS fix provided by #panther. So, here is the correct fix for the button tag:
button { font-family: inherit }
Old reply but it might help some people. I added the following:
* {
font-family: arial, sans-serif
}
I'm new to bootstrap. The control-label class seems to be undocumented at the bootstrap 3 website and i have noticed it just accidentally in the examples.
Could anyone explain it's purpose or guide me where I can get more info on it?
control-label is useful when we create forms. At the time of creation, you may come across in such situation like your text field is just after the completion of label.
So you have to write CSS to make it more attractive.
In bootstrap, they have provided class called control-label whose work is to automatically set the label. So that label and text field looks better and we don't have to write CSS for that.
CSS of .control-label:
.control-label{margin-bottom:0;
vertical-align:middle;
margin-bottom:0;
text-align:right;
color:#a94442;
}
NOTE : Here I have not include padding because padding may vary according to screen size.
If you want to know more about it, just look at that Demo.You will at least get some idea about it.
See http://getbootstrap.com/css/#forms-horizontal
It's for labeling a .form-group. For .form-horizontal it does
.form-horizontal .control-label {
margin-bottom: 0;
padding-top: 7px;
text-align: right;
}
... mainly for right-aligned labels.
Im using yiibooster with yiibootsrap in the yii framework. I dont want the site to be responsive so i set responsive to false. The problem is the default container width is too small, 940px. I want to change this to 1045px.
You could change the width set in protected/extensions/bootstrap/assets/css/bootstrap.css here:
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
Alternatively, this is what I'm currently doing, you can override the CSS in your layout. In my protected/views/layouts/main.php I've added this style to the container div like this:
<div class="container" id="page" style="width:99%;">
Hope one of those options is useful to you...
The CSS is in \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.no-responsive.css
If you look at the css carefully, you will find several places where the 940px is hard coded in the css. This is how you get the 940px.
You can edit this, but I would highly discourage doing so for 2 reasons. First it is highly discourage to hack the standard code. It is better to override it with your theme css. Second, there are other css elements that are tied to the 940px. Changing the 940px in the container css may break other css. To overcome this problem, open up the responsive css, i.e. \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.css
Search for the word #media
Keep on searching until you find
#media (min-width: 1200px) {
what ever enclosed within the braces are the css elements that tied up to the container size. Copy them and place them at the end of your non-responsive file (or better in your theme css).
Thanks