In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-27 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
This article mainly shows you "what are the difficulties encountered in the front end of layui", the content is simple and clear, and I hope it can help you solve your doubts. Let the editor lead you to study and learn this article "what are the difficulties encountered in the front end of layui?"
I. the situation of inserting a drop-down box into the table
Problem: the table encounters the drop-down box form, and the drop-down box cannot be displayed in the table
1. The drop-down box in the table is hidden-method 1
This method solves the hidden state of the drop-down box in the table, but the display is not very beautiful. After the drop-down box at the bottom of the table is expanded, the scroll bar of the table will be displayed.
The solution is simply to modify the css:
.layui-table-cell {overflow: visible;}
2. The drop-down box in the table is hidden-method 2
The second way is to add this attribute to the drop-down box: lay-ignore. Ignore the beautification effect is naturally an ordinary drop-down box, can be displayed normally, but the effect is not beautiful, you think it is not what you want, don't worry, I will give it beauty.
First of all, add the lay-ignore attribute to the select form, which becomes a normal form.
Beautify the css change effect again:
.table _ select {width: 100%; height: 38px; line-height: 1.3; line-height: 38px\ 9; border-width: 1px; border-style: solid; border-color: # ccc; background-color: # fff; border-radius: 2px; padding-left:10px } .table _ select option {padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} / * modify the default text color of the form * / input, textarea,select {color: # 999 / * cursor color * / text-shadow: 0px 0px 0px # 999; / * text color * /-webkit-text-fill-color: transparent;} input::-webkit-input-placeholder,select::-webkit-input-placeholder {color: rgb (60,0,248); / * change placeholder text color * / text-shadow: none;-webkit-text-fill-color: initial;}
You can see the effect, but the default effect is almost the same as the original, but the click effect is a little ugly and reluctantly accepted.
3. The drop-down box in the table is hidden-method 3
Reference: @ FIRSTK's bootstrap drop-down menu component https://fly.layui.com/jie/20494/, since this version was layui-v2.24 at that time, and now the plug-in has reached 2.4.5, it is a bit troublesome to synchronize, so you can also use the old version of bootstrap drop-down menu effect if necessary:
Manipulate
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.