Question

Bootstrap Datetimepicker版本 - 4.15.35

我有一个模态形式的bootstrap datetimepicker。如果它位于模态窗口的顶部或中间，它可以正常工作。如果我将它放在底部，日期时间选择器将在屏幕的最顶部打开，而不是在容器的下方或旁边。

我添加了widgetParent选项;它现在不显示日期时间控制窗口。我将添加的z-index更改为999999，但仍然没有显示它。

$('#StartDate').datetimepicker({
            useCurrent: false,
            format: 'MM/DD/YYYY hh:mm',
            widgetParent: '#StartDate',
            debug:true
        })

.bootstrap-datetimepicker-widget.dropdown-menu{
    z-index:99999999;
}

以下是为同一个容器生成的两个部分html代码，但位置已更改。

当控件放在模态页面的顶部或中间时：

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour 
bottom" style="display: block; top: 125px; bottom: auto; left: 165px; right: auto;">

当控件放在模态页面的底部时。它几乎就是模态的结束，但是有足够的空间来显示控件。

<div class="bootstrap-datetimepicker-widget dropdown-menu top" 
style="display: block; top: auto; bottom: 543px; left: 165px; 
right: auto;"><ul class="list-unstyled">

Answer 1

网上有几种解决方案，但它们并不适用于我。我将位置相对添加到控件的外部div中。另外，我将widgetParent设置为控件ID。每次尝试后我都和他们一起玩并删除了我的缓存。最后，我删除了widgetParent选项并添加了位置：相对于外部div，它可以工作。

<强> //输入

public class SingleItemView extends Activity {
    // Declare Variables
    TextView txtdefinition;
    TextView txtword;
    TextView txtexample;
    ImageView imgflag;
    String[] definition;
    String[] word;
    String[] example;
    int[] flag;
    int position;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.singleitemview);
        // Retrieve data from MainActivity on listview item click
        Intent i = getIntent();

        position = i.getExtras().getInt("position");

        definition = i.getStringArrayExtra("definition");

        word = i.getStringArrayExtra("word");

        example = i.getStringArrayExtra("example");
        // Get the list of flag
        flag = i.getIntArrayExtra("flag");


        txtdefinition = (TextView) findViewById(R.id.definition);
        txtword = (TextView) findViewById(R.id.word);
        txtexample = (TextView) findViewById(R.id.example);


        imgflag = (ImageView) findViewById(R.id.flag);


        txtdefinition.setText(definition[position]);
        txtword.setText(word[position]);
        txtexample.setText(example[position]);


        imgflag.setImageResource(flag[position]);

    }
}

Answer 2

在botstrap CSS输入组z-index自动中设置

弹出模式中的Bootstrap Datetimepicker显示问题

2 个答案: