I have a master detail type view setup where you can enter data on the right side (detail) and it will show in a summary on the left side (detail). I accomplished this view using CSS and jQuery. All of the data is coming from a mysql database.
The problem is caused by the html tags that tinymce inserts into the textarea. When I try to display it using the text-overflow:ellipsis; CSS it doesn't put in the ellipsis.
CSS:
.OverflowData {
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}
Here is a stripped down jsFiddle with the resulting data with the tinymce html tags added and what happens on the left side.
Now Here is a version where I stripped out the <p> tags and the ellipsis shows properly.
So my question is: is it possible to have the summary and ellipsis show properly in the first case or must I strip out all of the html from the tinymce textarea beforehand?
I am open to other suggestions.
The settings have to be on the immediate parent so this works when added to your sample (note the 'p' in the selector):
.OverflowData p {
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}
Related
I'm using the TinyMCE HTML Editor with the insert image function. The application I'm working on isn't allowed to use images from external URLs. So they should only be able to use the Upload option. Is there a way to disable the Source textbox shown below? Is there an initialisation property that can be used?
Here is an example of the TinyMCE editor in question. https://www.tiny.cloud/docs/demo/local-upload/
I couldn't find an official way to do this so I just targeted all the associated HTML elements and hid them using CSS.
.tox-dialog .tox-dialog__content-js .tox-dialog__body .tox-form__controls-h-stack input[type=url].tox-textfield {
display: none;
}
.tox-dialog .tox-dialog__content-js .tox-dialog__body div.tox-form__group:first-child label {
display: none;
}
.tox-dialog .tox-dialog__content-js .tox-dialog__body .tox-form__controls-h-stack div.tox-form__group:first-child label {
display: block;
}
enter link description here
this is the site in question, I want to center the contact form and the submit button on the side bar, this site is using WordPress. Thanks
Your fields are inside of <p> tags and are inline so you can align them like text.
Either add the following at the end of your style sheet, or add the attributes to the existing selectors in your style sheet.
.wpcf7-form-control-wrap, .widget-area .widget p {
text-align: center;
}
.wpcf7-form {
margin-right: 10px;
}
I tried many things, but until now, nothing happend. My footer won't fill the page (horizontal), but get stuck somewhere in the middle of the page. (Only on an Ipad and Iphone.)
a meta tag don't work and instead of min-width:100%, min-width:1024px; neither works for me.
A fixed positioned footer is no option... (the footer has to flow with the content when more text is edit.)
This is my CSS code of the footer:
#footer_content{
min-height:200px;
min-width:1024px;
float:left;
background-color:#29809E;
bottom:0;
}
Set same backGround color for table view and the main view
try setting the viewport to 1.0
further a clear:both might help
Also here are some good explanations on how to use viewport ...
iPad specifics: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
generic" https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Make This:
#footer_content{
min-height:200px;
min-width:1024px;
float:left;
background-color:#29809E;
bottom:0;
}
This:
#footer_content{
min-height:200px;
width:100%;
min-width:1024px;
float:left;
background-color:#29809E;
bottom:0;
display: block;
}
And then add a clear: both right after you close the footer div.
How can I insert a new div (not in .js) into fancybox (when fancybox - image is open)? Like this:
I'm also try to make a div css to fit that description :)) still with no avail. I suck at css styling, will get back on this one when i figured it out. my theory is that it should be a div within a div within the div if you get what i mean :))
!!!!!!!!
UPDATE I tried messing around the css and this is what i got (I'm using 1.3.4v for simplicity's sake in my part) and for reference, these images and codes I used are found in the 1.3.4 demo packege from fancybox.net
If I didn't explain my code well, it just means I'm still working on it so I just hope you get why it is vague, but the point is it's doable and you only need to work out the css file. I hope someone has a nicer looking code
Output:
1.I all of these from jquery.fancybox-1.3.4.css
just change these 1 2 3 and mess around with example7 there in the demo
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
padding-right:50%; /*this part extends the right side of the photo so it would look like thet're on the same page*/
}
2.This re-positions the original title to the upper right part of the image
.fancybox-title-inside {
padding-bottom: 10px;
text-align: left;
color: #333;
position: absolute;
top:0;
left:65%;
border:1px solid black;/*for you to see how large the div is*/
height:100%;
}
3.My new RED div where I will be
div.fancycontent{ /*saviour do word wrap here*/
border:1px solid black;
padding:2px;
color: #333;
background: #FF0000;
width:50%;
height: 100px;
}
I tried using fancybox in one of my projects but had to revert back to implementing my own popup's using the DIV elements. Its pretty easy to create your own popups instead of using fancybox or facebox if you know a bit of JQuery try to have a look at these links. You can customize your div tags to contain what ever you need.
output
source
In your fancybox JS, set the type to iframe:
$(document).ready(function() {
$('.callout').fancybox({
type: 'iframe',
width: '640px',
height: '480px',
});
});
Then you can open up anything you want in the fancybox by simply applying the class to your link:
<a class="callout" href="{path}">{link}</a>
If you have issues with the iframe display, you might try adding a secondary class to tell fancybox what type of content you are linking to (this is a new convention introduced in the latest version, so I don't know if I'd recommend using it by default):
<a class="callout callout.iframe" href="{path}">{link}</a>
Hope that helps!
ty
It just happened that I created this fancybox "a la" facebook demo that looks pretty much like what you want:
http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html
I managed to get TinyMCE to keep my <script> tag in the source, so it is no longer stripped as an invalid tag. However, in edit mode, it doesn't render anything. The script tag is there in the html view, but it's just a blank line in edit mode.
Instead, I want tinyMCE to render anything instead of nothing. Even if it is just simple text like [here lies a script]. Is this possible? How? I can't get it working for the life of me. Thanks!
You can use stylesheets to style script elements, I would advise trying that in TinyMCE, here's a fiddle so you can see what I mean:
https://jsfiddle.net/plenuM/m9zr1dqw/
script {
display:block;
height:20px;
width:100%;
background:red;
text-align:center;
color:#fff;
overflow:hidden;
}
script:before {
content:"(SCRIPT)";
}
You will want to only import the CSS when TinyMCE is active though, the TinyMCE documentation can assist you with that.
The script tag should act as if on a regular html page.