कैसे आयनिक

में लटकती या चयन बॉक्स बनाने के लिए आप कृपया मुझे बताओ कैसे छवि में शो के रूप में ड्रॉप डाउन here से मैं आयनिक ढांचे उपयोग कर रहा हूँ बनाने के लिए मैं लटकतीकैसे आयनिक

यहाँ

उपयोग कर रहा हूँ सकता है मेरी code

है

मैं इस शो को देखते हुए छवि http://ionicframework.com/docs/components/#select

के रूप में मैं केवल बनाने के लिए (बाएं में डिफ़ॉल्ट पाठ) ड्रॉप डाउन के रूप में छवि में दिखाया गया .मैं (दस्तावेज़ में लटकती की चौड़ाई को कम करना चाहते हैं के रूप में यह पूरे ले जा रहा है चाहता हूँ कि ऐसा बनाना चाहते चौड़ाई)। सचमुच मैं डॉ से किसी भी पाठ को प्रदर्शित नहीं करना चाहता हूं सेशन नीचे

यहाँ मेरी कोड

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
</head> 

<body ng-app="app"> 
    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
      <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
     <ion-content class="padding"> 
     <div> View</div> 
      <div class="list"> 

       <label class="item item-input item-select"> 
        <div class="input-label"> 
         Lightsaber 
        </div> 
        <select> 
         <option selected>Default</option> 
         <option >Green</option> 
         <option>Red</option> 
        </select> 
       </label> 

      </div> 
     </ion-content> 
    </ion-pane> 
</body> 

</html>

स्रोत

2015-07-12 user944513

आप लेबल रिक्त बनाने और सीएसएस के साथ select शैलियों अधिभावी कर ऐसा कर सकता है।

this जैसी कुछ कोशिश करें।

HTML:

<label class="item item-input item-select"> 
    <div class="input-label"> 
     &nbsp; 
    </div> 
    <select> 
     <option selected>Default</option> 
     <option >Green</option> 
     <option>Red</option> 
    </select> 
</label>

सीएसएस:

.item-select { 
    width: 75%; /* Or whatever you'd like the width to be */ 
} 

.item-select select { 
    left: 0; 
}

स्रोत

2015-07-12 16:31:24 user1234

एक "की-बोर्ड के ऊपर" वर्ग कि यूआई जब क्लिक करते ही विचलित, वहाँ क्या आप जानते हैं कि यह कैसे को दबाने के लिए करते हैं? – Martian2049

यह वास्तव में अच्छी तरह से काम करता है, यदि आप चाहें तो "फॉर्मिन-बाएं: ऑटो" और "मार्जिन-दाएं: ऑटो" का उपयोग करके, यदि आप चाहें तो ड्रॉपआउट को अपने केंद्र में रखना आसान है: आइटम-चयन { चौड़ाई: 75% ;/* या जो भी आप चौड़ाई चाहते हैं */ // ड्रॉपडाउन केंद्र: मार्जिन-बाएं: ऑटो; मार्जिन-दाएं: ऑटो; } – leo

क्या देशी ड्रॉप-डाउन के रूप में आयनिक ड्रॉप डाउन दिखाने का कोई तरीका है? जैसा कि पहली छवि में दिखाया गया है: http://baymard.com/blog/mobile-dropdown-navigation – TechTurtle

<div class="list"> 

    <label class="item item-input item-select"> 
    <div class="input-label"> 
     Lightsaber 
    </div> 
    <select> 
     <option>Blue</option> 
     <option selected>Green</option> 
     <option>Red</option> 
    </select> 
    </label> 

</div>

स्रोत

2015-08-12 13:16:28

यह सबसे अच्छा जवाब है क्योंकि यह डिफ़ॉल्ट रूप से आयनिक क्लिक्स का उपयोग करता है, बस कॉपी और पेस्ट करें –

यह मेरे लिए काम किया:

टेम्पलेट:

<ion-item class="item-input item-select"> 
    <div class="input-label"> 
     Select Label 
    </div> 
    <select> 
     <option selected>Option 1</option> 
     <option>Option 2</option> 
    </select> 
    </ion-item>

सीएसएस:

.item-select select, .item-select select option{ 
    left: 75%; 
}

स्रोत

2015-12-01 08:06:25

.item-select { 
    height: 40px; 
} 

.item-select select { 
    max-width: 100%; 
    width: 100%; 
} 

<div class="list"> 
    <label class="item item-input item-select"> 
     <select> 
      <option selected>Default</option> 
      <option>Green</option> 
      <option>Red</option> 
     </select> 
    </label> 
</div>

स्रोत

2016-06-07 11:20:46 Aley

कैसे आयनिक

उत्तर

संबंधित मुद्दे