부트 스트랩 input-append + Google지도 양식

Question

입력란이 버튼 이외의 모든 공간을 차지하는 블록 수준의 입력 추가 기능을 사용하려고합니다.

<button> 또는 <span>으로 작업하고 있지만 태그를 으로 변경하면 다시 스타일링 문제가 발생합니다. 그러나 <input> 태그가 필요합니다.

나는 내가있어 Fiddle - HERE

Answer 1

이 작업을 수행하여 작업을 포함했다 : 당신이 그렇게 할 수 없기 때문에

.input-append { 
    display: table; 
    width: 100%; 
} 
.add-on { 
    display: table-cell; 
    height: auto !important; 
} 
.input-bar { 
    display: table-cell; 
    width: 100%; 
    border-right-style: None; 
} 
.well{ 
    padding-right: 58px; 
}​ 

1. 내가 중첩 된 선택기를 제거 일반 CSS한다. (Sass와 더불어 당신은 할 수있다).
2. ".add-on"선택기에 "height : auto! important"를 추가했습니다. 일반적으로 "! important"를 사용하는 것이 가장 좋은 방법은 아닙니다.
3. GO의 너비 인 58px의 우물에 패딩 오른쪽을 추가했습니다! 버튼, 39px, 우물 패딩 19px.

편집 : @nicefinly가 지적한대로 GO! 버튼이 아직 꺼져 있습니다. 크롬에서 나는 틀린 것을 보지 못했지만 파이어 폭스에서 나는 높이 문제를 확실히 볼 수 있었다.

그래서 his changes으로 웰과 애드온 클래스를 수정할 때 표준 부트 스트랩 클래스가 사용되는 모든 장소가 변경되어 원하는 결과를 얻지 못할 수도 있습니다.

대신 이러한 모든 맞춤 클래스에 대해 별도의 클래스를 만들어서이 특정 사례와 다른 곳에서 작동하도록합니다. 예를 들어, "추가 기능 버튼", "잘-버튼으로"등

Answer 2

@CoderDave 그의 제안에 올바른 방향으로 절 지적 - 그러나 JSFiddle of @CoderDave's answer

, 나는 그 높이 것으로 나타났습니다 다소 벗어났다. 대신, 수동 버튼의 높이를 설정 - THEN JSFiddle of my workaround

.input-append { 
    display: table; 
    width: 100%; 
} 
.add-on { 
    display: table-cell; 
    height: 30px !important; 
} 
.input-bar { 
    display: table-cell; 
    width: 100%; 
    border-right-style: None; 
} 
.well{ 
    padding-right: 58px; 
} 
​ 

하지만를 ...

은 크롬에서 테스트가 (바이올린에,하지만 내 로컬 환경에서 반드시) 나에게 이상한 결과를 주었다. 따라서, 대신 패딩, 나는 margin-left 및 margin-right을 사용하는 경우 input .add-on

및 그 후 그러나 .input-bar

...에

margin-right = -55px, 나는 것으로 나타났습니다 온

margin-left = 17px Z- 인덱스가 .input-bar에서 GO! 버튼에 초점이 맞았을 때 (즉, 클릭했을 때)

따라서, 나는이 꽤 해키 솔루션처럼 보인다 .add-on

FINAL JSFIDDLE HERE!

의 .input-bar z-index: 2의 well z-index: 1에 대한 z-index

z-index: -1을 설정합니다. 누구든지 더 나은 해결책을 가지고 있다면 공유하십시오.