Wijmo 폼 데코레이터 드롭 다운 및 버튼 스타일 지정 문제

Question

우리 애플리케이션 중 하나에서 Wijmo (jQuery UI & jQuery UI Theme Roller 기준)을 사용했지만 Wijmo Form Decorator 스타일의 드롭 다운 및 버튼에 문제가 있습니다.

나는 Wijmo Docs을 살펴 봤지만 도움이되지 않았습니다.

스크립트를 시작했지만 모든 양식에 스타일이 적용되지만 다른 요소와 올바르게 정렬되도록 드롭 다운 항목을 가져올 수 없습니다. - 우리는 3과 같은 문제가

<script id="scriptInit" type="text/javascript"> 
    $(document).ready(function() { 
     $(":input[type='text'],:input[type='password'],textarea").wijtextbox(); 
     $("select").wijdropdown(); 
     $(":input[type='radio']").wijradio(); 
     $(":input[type='radio']").wijcheckbox(); 
     $("button").button(); 
    }); 
</script> 

당신이 .button() 및 .wijdropdown() 기능 클래스 대 태그 또는 ID의 각 인스턴스에 적용하는 알 따라 다음과 같이

개시 스크립트입니다 메서드를 호출하고 전체 응용 프로그램을 통해 원하는대로이 방법을 사용합니다.

현재 문제의 스크린 샷을 볼 수 있습니다

:

나는 시도하고 문제가 내가 그것의 일부가 Wijmo는 select 요소를 변환하는 것입니다 의심 무엇을 해결하기 위해 방화범을 사용하고있다을 div에 넣고 JS를 적용하여 select 기능을 사용하도록 설정합니다.

나는 이것을 디버깅하기 위해 Firebug와 Chrome 개발자 도구를 모두 사용했지만 두 요소 중 하나 이상에 여백이 적용되지 않습니다.

Wijmo 또는 ThemeRoller가 아닌 다른 모든 스타일 시트를 제거했지만 변경되지 않았습니다. 우리는 Wijmo와 함께 제공되는 "로켓트"테마를 사용하고 있습니다.

어느 쪽이든 margin-top 속성을 시도하고 조작 할 때마다 바로 위에 input 검색 필드가있는 인라인 인 모든 요소를 ​​재정렬합니다.

형태의 HTML 코드는 다음과 같습니다 우리가 사전에 감사를 올바르게 정렬을 얻고 어떤 제안을 감사하는

이

<FORM id="serialSearch" name="serial_search" method="POST" action="index.php"> 
    <label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" /> 
    <br /> 
    <select name="searchType"> 
     <option value="standard">Standard</option> 
     <option value="fuzzy">Fuzzy</option> 
    </select> 
    <button>Search serial numbers</button> 
    <input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" /> 
</FORM> 

정말 중요합니다.

Answer 1

당신의 클래스 "입력"을 말하고 사업부 요소에이 스타일을 적용 할 수있는 DIV 안에있는 모든 양식 요소를 포장해야합니다

div.input { 
    display: inline-block; 
    vertical-align: top; 
} 

here you can see a jsfiddle는이처럼 보이는 방법을 보여줍니다.

제안 사항을 추가하면 다음에 jsfiddle을 스크린 샷 이상으로 만들면 사람과 코드를 더 쉽게 테스트 할 수 있습니다.