質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

315閲覧

画面拡大率を100%にすると、submitボタンの高さが反映されない。

ringo_000

総合スコア7

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/11 06:03

前提・実現したいこと

submitボタンのデザインについて。
ボタンの高さや横幅をpaddingで出しています。
macの画面拡大率を100%にすると高さが死にます。
paddingをやめてheightで指定しても同じです。
ですが画面拡大率100%以外にするときちんと指定した通りに反映します。
なぜ画面拡大率100%だけダメなのか原因を特定できかねているので、どなたか助言頂けると助かります、、、

下記の画像のように90%とかにするときちんと反映します。
100%だとダメになります。


イメージ説明
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
イメージ説明
イメージ説明

該当のソースコード

cssは長すぎるので、hamlの.productsの部分から記載いたします。

haml

1.main 2 %span.main-child 3 施設情報を登録してください 4 .main-registration__date 5 .main-registration__date-child 6 登録日 7 = form_for @post, url: posts_path do |f| 8 =f.text_field :registration_date, placeholder: "登録日", type: "text", class:"registration__date-input-text" 9 10 .main-facility 11 .main-facility-child 12 施設名 13 =f.text_field :facility_name, placeholder: "施設名", type: "text", class:"facility-input-text" 14 15 .main-kana 16 .main-kana-child 17 施設名(カナ) 18 =f.text_field :kananame, placeholder: "カナ", type: "text", class:"kana-input-text" 19 20 .main-postal__code 21 .main-postal__code-child 22 郵便番号 23 =f.text_field :postal_code, placeholder: "郵便番号", type: "text", class:"postal__code-input-text" 24 25 .main-address 26 .main-address-child 27 住所 28 =f.text_field :address, placeholder: "住所", type: "text", class:"address-input-text" 29 30 .main-tell 31 .main-tell-child 32 電話番号 33 =f.text_field :tell, placeholder: "電話番号", type: "text", class:"tell-input-text" 34 35 .main-delivery_date 36 .main-delivery_date-child 37 納品日 38 =f.text_field :delivery_date, placeholder: "納品日", type: "text", class:"delivery_date-input-text" 39 40 .main-delivery_note 41 .main-delivery_note-child 42 納品書 43 = f.file_field :delivery_note, class: "delivery_note-image" 44 45 .main-estimate_sheet 46 .main-estimate_sheet-child 47 見積書 48 = f.file_field :estimate_sheet, class: "estimate_sheet-image" 49 50 .top 51 %span.top-name 52 ディーラーを登録してください 53 .top-dealer 54 .top-dealer-child 55 = f.fields_for :dealer do |k| 56 .top-dealer-child_box 57 .top-dealer-child_box-company_text 58 会社名 59 .top-dealer-child_box-company 60 = k.collection_select :company_id, Company.all, :id, :name 61 .top-dealer-child_box-name_text 62 名前 63 .top-dealer-child_box-name 64 = k.text_field :name, placeholder: "名前", type: "text", class:"dealer-input-text", id: "dealer_text" 65 .top-dealer-child_box-kana_text 66 名前(カナ) 67 .top-dealer-child_box-kana 68 = k.text_field :kananame, placeholder: "カナ", type: "text", class:"dealer_kana-input-text", id: "dealer_kana_text" 69 70 .best 71 %span.best-name 72 納品内容を登録してください 73 .best-software 74 .best-software-child 75 ソフトウェア 76 = f.fields_for :programs do |d| 77 #best-software-child_box 78 = d.text_field :software, placeholder: "name", type: "text", class:"program-input-text", id: "program_text" 79 80 .products 81 .products-text_box 82 = d.fields_for :products do |s| 83 .products-text_box-category_text 84 カテゴリー 85 .products-text_box-category 86 = s.collection_select :category_id, Category.all, :id, :name 87 .products-text_box-product_text 88 ハードウェア 89 .products-text_box-product 90 = s.text_field :thing, placeholder: "products", type: "text", class:"products-input-text", id: "product_text" 91 .products-text_box-product_text 92 型番 93 .products-text_box-model_number 94 = s.text_field :model_number, placeholder: "model_number", type: "text", class:"model_number-input-text", id: "model_number_text" 95 = icon('far', 'plus-square', id: 'pulas-product') 96 #add_product 97 98 .footer_product 99 = f.submit "送信", class:"product_button"

css

1.products { 2 padding-top: 80px; 3 4 .products-text_box { 5 display: flex; 6 flex-wrap:wrap; 7 width: 600px; 8 margin: 0 auto; 9 10 .products-text_box-category_text { 11 font-family: "Courier"; 12 margin-top: 50px; 13 14 .products-text_box-category { 15 16 select { 17 margin-left: 20px; 18 height: 50px; 19 width: 100px; 20 } 21 } 22 } 23 24 .products-text_box-product_text { 25 margin-left: 10px; 26 font-family: "Courier"; 27 28 .products-text_box-product { 29 .products-input-text { 30 height: 50px; 31 width: 500px; 32 font-size: large; 33 } 34 } 35 } 36 37 .products-text_box-product_text { 38 margin-left: 20px; 39 font-family: "Courier"; 40 41 .products-text_box-model_number { 42 .model_number-input-text { 43 height: 50px; 44 width: 500px; 45 font-size: large; 46 } 47 } 48 } 49 #pulas-product { 50 margin-left: 20px; 51 margin-top: 40px; 52 cursor: pointer; 53 } 54 #minus-product { 55 margin-left: 20px; 56 margin-top: 40px; 57 cursor: pointer; 58 } 59 } 60} 61 62.footer_product { 63 64 .product_button { 65 padding: 30px; 66 font-size: large; 67 margin-top: 100px; 68 } 69}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

css

1input[type='submit'] { 2 -webkit-appearance: none; 3 width: 100px; 4 height: 40px; 5 margin: 0; 6 padding: 0; 7 border: 1px solid #000; /* border仮入れ */ 8}

でsubmitにもcssのスタイルを当てることができると思います。

appearanceプロパティ

投稿2020/02/11 06:40

jackmiwamiwa

総合スコア395

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ringo_000

2020/02/11 11:11

jackmiwamiwaさん -webkit-appearance: none;をつけて拡大率100%でも反映させる事ができました。 助かりました、ありがとうございます! appearanceプロパティについて、理解が浅いのでこれを機会に少し調べてみることにします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問