How to avoid CSS conflict and show the buttons?

This topic has 3 replies, 2 voices, and was last updated 3 years, 4 months ago by Ivan Lyubovnikov.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
2021-07-05 at 10:36 pm #42550

derekwang0605
Customer

I am using layui but I can not show the buttons.
<link rel=”stylesheet” href=”layui/css/layui.css” media=”all”>
<link rel=”stylesheet” type=”text/css” href=”myproject.css”>

<button class=”layui-btn layui-btn-primary layui-border”>Button</button>
<button class=”layui-btn layui-btn-primary layui-border-green”>Button1</button>
<button class=”layui-btn layui-btn-primary layui-border-blue”>Button2</button>

<script src=”layui/layui.js” charset=”utf-8″></script>

2021-07-06 at 8:35 am #42566
Ivan Lyubovnikov
Staff
Hi! That’s probably because the standard element #v3d-container (which contains the 3d scene) is rendered above the buttons. That happens because it has the following CSS rules applied:
```
position: absolute;
z-index: 0;
```
To fix that you can just put the buttons right inside #v3d-container. Or, alternatively, leave them as is but add CSS rules like “position: relative; z-index: 1;” so they will be rendered above #v3d-container.

Co-founder and lead developer at Soft8Soft.
2021-07-08 at 2:30 am #42628

derekwang0605
Customer

To fix that you can just put the buttons right inside #v3d-container. Does that mean I change to below:
<button id=’v3d-container’ class=”layui-btn layui-btn-primary layui-border”>Button</button>

2021-07-08 at 8:36 am #42630
Ivan Lyubovnikov
Staff
derekwang0605 wrote:

Does that mean I change to below:
<button id=’v3d-container’ class=”layui-btn layui-btn-primary layui-border”>Button</button>

No, not exactly what I meant. I was referring to moving the buttons inside the “v3d-container” element:
```
<body>
  <div id="v3d-container">
    <div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
    <button class="layui-btn layui-btn-primary layui-border">Button</button>
  </div>
</body>
```
Co-founder and lead developer at Soft8Soft.
Author

Posts