I can’t style this form to be only 580 px width.
http://aproapetot.ro/add_page.php
Please someone give me a help with the CSS.
.center_content form {
width: 580px;
}
1 Like
I would advise against fixed widths like that; how do you expect it to be responsive?
1 Like
Why is it bad to use fixed width if you can redefine it using media query?
The width recommended by megazoid does not seem to be useful and should be deleted.
The content in these deeply nested tables is pushing the form wide.
<table id="content_page_toolbar1" class="mceToolbar mceToolbarRow1 Enabled" cellspacing="0" cellpadding="0" align="" tabindex="-1" role="presentation" aria-disabled="false" aria-pressed="false" style="display: none;">
<table id="content_page_toolbar2" class="mceToolbar mceToolbarRow2 Enabled" cellspacing="0" cellpadding="0" align="" tabindex="-1" role="presentation" aria-disabled="false" aria-pressed="false" style="display: none;">
<table id="content_page_toolbar3" class="mceToolbar mceToolbarRow3 Enabled" cellspacing="0" cellpadding="0" align="" tabindex="-1" role="presentation" aria-disabled="false" aria-pressed="false" style="display: none;">
You will need to decide how you wish to handle that content… scale it down to fit or whatever.
(PS: I set them to {display:none} to find while looking for the source of the width. That property is not part of the OPs code.)
If you’re going to redefine widths c onstantly in the media queries, there is no difference between that and removing the width altogether and letting it flow with the browser width.
Can be done by changing TinyMCE options, I guess
It allows to reorder buttons on toolbars to make them consume less space
With the basic TinyMCE width works fine. But with this TinyMCE advanced, that I have it on the page, with doesn’t wok at all.
This is TinyMCE:
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
width : 580,
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
Why does one choose what looks like a “plug-in” to do something that a sprite plus inline-block or floated boxes could do and would be perfectly fluid? I don’t get it. That’s a real question.
Ronpat I didn’t understand the question. My english is not advanced, the same with the php knowledge. If you ask me why I chose this version of tinyMCE, the advance one, is because this is the only one that give me option to add pics, code, etc into the page. I tried a few other but they were too basic.
@megazoid, Yes, that seems to be the way to do it.
@sorin21us, it looks like your page is not meant to be responsive (or fluid) so you will need to change the layout of your buttons tables using tinyMCE so they fit within the fixed width of your form. If they exceed the width of the form, they push it wider… apparently… via JS maybe?
<thinking>
Apparently, too, it is more difficult to find a sprite with the menu icons on it that I realize… although I believe you could make one with which you could code a fluid collection of menu icons. If I can figure out how to use that tiny editor, I may give it a try just for fun.
Apparently, also, it might be faster to let JS create the menu look than it would be to ask a browser to interpret the tags required to build it fluid. (I’m not a fan of using JS to create important content, though.)
</thinking>
@sorin21us, please ignore my question. I am showing my ignorance.
I think he wonders why TinyMCE is still using tables for its toolbars, when there is so many more flexible alternate ways available now.
To solve your problem you have to re-arrange toolbar buttons. Try to remove those of them you don’t really need.
Would you mind sharing some of those other choices? TinyMCE does seem to be a bit behind times.
I’d recommend CKEditor. It has all the features of TinyMCE (and even more, I think) implemented in a much more progressive way. And my personal favorite is Redactor. Both of these editors play nicely with responsive layouts.
1 Like
I put in the page the CKEditor and where is the form too but doesn’t show up in the page. I followed their example and put it where is the textarea. You can see in the view source that the script is next to tehxt area. The path in header is correct, but doesn’t show up on page.
Place this code:
<script type="text/javascript">
CKEDITOR.replace( 'content_page' );
</script>
after your textarea, not before it
Solved. Thank you for your help to you megazoid and to the others: ronpat, RyanrReese.
Now I will move the discussion on php section, because I don’t know how to do the second select, with php, from the form.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.