外部フォームのデザインが崩れてしまいます
お世話になっております。
外部フォームを作成して、コンテナにブロック配置いたしましたが、
の設定が悪いのか、テキストボックスやラベルなどの要素が
縦並びになりません。
原因が分かりかねております。
どうぞよろしくお願いいたします。
※表示されるフォームと、ビューに記載したコードを添付しております。
【情報】
# concrete5 Version
Core Version - 8.5.2
Version Installed - 8.5.2
Database Version - 20190925072210
# Database Information
Version: 5.1.73
SQL Mode:
# concrete5 Packages
Cycle2 Slide Show (1.0.2), Honest Websites Back To Top (1.1.0), Lazy Menu (1.1), Manual Nav (2.2.0), Random Image (2.0.0), Ronyd Expanded Search Bar (2.0)
# concrete5 Overrides
blocks/autonav/templates/mainnav/view.php, blocks/autonav/templates/mainnav/css/flexnav.css, blocks/autonav/templates/mainnav/css/font-awesome.css, blocks/autonav/templates/mainnav/css/page.css, blocks/autonav/templates/mainnav/css, blocks/autonav/templates/mainnav/font/fontawesome-webfont.eot, blocks/autonav/templates/mainnav/font/fontawesome-webfont.svg, blocks/autonav/templates/mainnav/font/fontawesome-webfont.ttf, blocks/autonav/templates/mainnav/font/fontawesome-webfont.woff, blocks/autonav/templates/mainnav/font/FontAwesome.otf, blocks/autonav/templates/mainnav/font, blocks/autonav/templates/mainnav, blocks/autonav/templates, blocks/autonav, blocks/external_form/form/controller/test_form.php, blocks/external_form/form/controller, blocks/external_form/form/test_form.php, blocks/external_form/form, blocks/external_form, js/app.js, js/jquery-form.js
# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).
# Server Software
Apache
# Server API
apache2handler
# PHP Version
7.1.33
# PHP Extensions
apache2handler, bcmath, bz2, calendar, Core, ctype, curl, date, dba, dom, enchant, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, intl, json, ldap, libxml, mbstring, mcrypt, mysqli, mysqlnd, odbc, openssl, pcre, PDO, pdo_mysql, PDO_ODBC, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, recode, Reflection, session, shmop, SimpleXML, snmp, soap, sockets, SPL, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib
# PHP Settings
max_execution_time - 3600
log_errors_max_len - 4096
max_file_uploads - 100
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 64M
post_max_size - 384M
sql.safe_mode - Off
upload_max_filesize - 256M
ldap.max_links - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - no value
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 4000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5
Re: 外部フォームのデザインが崩れてしまいます
ご教示ありがとうございます。
クラス名とCSS構成の不一致等も考えられますね。
CSSやクラス名、phpのコードをもう一度見直して
みます。ありがとうございます。
Re: 外部フォームのデザインが崩れてしまいます
bootstrapは1つの横枠を12に分けるようになっているので、
col-sm-4と書かれている部分を4と8にするか、
そのクラスをそもそも設定しないかで改善されると思います。
1つの横枠→ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
もし、タブレット以上でラベルと入力を横並びにしたければ、
ラベルのクラスcol-sm-4、入力のクラスcol-sm-8とすれば、足して12なので横1列に収まります。
※3と9などでもOKです。
単純にラベルと入力を上下に順々に配置していくならば、
col-sm〜のクラスは不要です。
下記を参考にしてみてください。
http://bootstrap3.cyberlab.info/css/forms-basic.html
http://bootstrap3.cyberlab.info/css/forms-horizontal.html
Re: 外部フォームのデザインが崩れてしまいます
ありがとうございました。
<div> コンテンツ配置時のクラス名を取り外しましたところ、縦並びで
表示することができました。
bootstrapの勉強不足を痛感いたしました。
本当にありがとうございました。これからも引き続き勉強を続けて
まいります。
aniya
Re: 外部フォームのデザインが崩れてしまいます
フォームが縦になるかならないかはCSS次第ですので、
クラス名やCSSの反映状態などを中心に見直してみることをお勧めします。