外部フォームのデザインが崩れてしまいます

2020年6月2日 at 17:08

お世話になっております。
外部フォームを作成して、コンテナにブロック配置いたしましたが、
の設定が悪いのか、テキストボックスやラベルなどの要素が
縦並びになりません。
原因が分かりかねております。
どうぞよろしくお願いいたします。

※表示されるフォームと、ビューに記載したコードを添付しております。

【情報】
# 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: 外部フォームのデザインが崩れてしまいます

2020年6月2日 at 19:22
bootstrapを使っていないので詳細なアドバイスは出来ませんが、
フォームが縦になるかならないかはCSS次第ですので、
クラス名やCSSの反映状態などを中心に見直してみることをお勧めします。
 

Re: 外部フォームのデザインが崩れてしまいます

2020年6月4日 at 9:00
aniya さま

ご教示ありがとうございます。
クラス名とCSS構成の不一致等も考えられますね。
CSSやクラス名、phpのコードをもう一度見直して
みます。ありがとうございます。
 

Re: 外部フォームのデザインが崩れてしまいます

2020年6月7日 at 1:59
ソースコードと画像を見る限り、bootstrapのクラス名の問題のようです。

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: 外部フォームのデザインが崩れてしまいます

2020年6月8日 at 11:00
DeaconBluesさま

ありがとうございました。
<div> コンテンツ配置時のクラス名を取り外しましたところ、縦並びで
表示することができました。

bootstrapの勉強不足を痛感いたしました。
本当にありがとうございました。これからも引き続き勉強を続けて
まいります。
 

Re: 外部フォームのデザインが崩れてしまいます

2020年6月8日 at 8:09
DeaconBluesさま

ご教示ありがとうございます。
先日よりいろいろ試しておりましたが、私の力が拙く、
解決に至っておりませんでした。
リンク先も参照させていただき、ご教示頂いたクラス等の
設定を見直してまいります。
ありがとうございます。