|
Title: There is some problem when using other css on the input button Post by: Jan on December 16, 2014, 11:24:14 PM I tried to use the purecss/uikit framework with jeasyui in my project.
However,when I wrote input field with class "easyui-textbox" or "easyui-numberbox",the display will look strange. But when using "easyui-validatebox",it's OK. Is there any confict in the CSS? I hope that I can use the standard form field but still can validate these input field by using jeasyui. Thanks,hope it can be fixed soon. Jan Title: Re: There is some problem when using other css on the input button Post by: jarry on December 17, 2014, 01:42:00 AM Please show an example or a link page to demonstrate your issue.
Title: Re: There is some problem when using other css on the input button Post by: Jan on January 05, 2015, 06:42:02 PM For example,import easyui,
then import purecss,<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"> The following is sample code: <form class="pure-form"> <fieldset> <legend>A compact inline form</legend> <input type="email" class="easyui-textbox" placeholder="Email"> <input type="password" class="easyui-textbox" placeholder="Password"> <label for="remember"> <input id="remember" type="checkbox"> Remember me </label> <button type="submit" class="pure-button pure-button-primary">Sign in</button> </fieldset> </form> Please take a look,the display looks very strange. In total,most time,the input item will only behave as easyui's style,and ignore other css unless I wrote the style in it. External css will not take effect on the page item. Please advise. Title: Re: There is some problem when using other css on the input button Post by: jarry on January 05, 2015, 07:09:33 PM Please remove the 'pure-form' class attribute from your <form>, or set the 'box-sizing' CSS style to 'border-box' for all the elements.
Code: <style> Title: Re: There is some problem when using other css on the input button Post by: Jan on January 11, 2015, 02:08:50 AM Thank you for your reply.
However,the method you provided cannot resovle the key issue. Sometimes I want to use my own css(External CSS).Even I added "box-sizing:border-box;",the input item will still behave as jeasyui wants it to be. It means whatever CSS I wrote,it makes no sense. Is it possible that when I use my own css,it works as I want to.And,still I can use the "class='easyui-numberbox','class='easyui-datebox' ",and so I can use it to validate some input. By the way,input field with "easyui-validatebox" works as I want it to be.I don't know why? And if I wrote the css on the input item itself,it works too. In fact,if "class='easyui-numberbox' and 'class='easyui-datebox''' work,most of my problems will be resolved. Looking forward to see your response. Jan Title: Re: There is some problem when using other css on the input button Post by: jarry on January 11, 2015, 06:15:38 PM The textbox component and its inherited components have their own style except validatebox. If you want to change the textbox's appearance, you can override the '.textbox' or '.textbox-text' CSS.
Code: <style> Title: Re: There is some problem when using other css on the input button Post by: Jan on January 13, 2015, 07:52:48 AM Although your advise cannot resolve my issue,thank you all the same.
I checked the chrome F12,and found jeasyui do some operation when page is loading. For example,"input" with class "easyui-textbox,easyui-filebox" will be set "display:none",and a new "span" and "input" element will be added behind. I don't why jeasyui does this,but it should be reasonable in its own idea. But if jeasyui can do some following modfication,it would be more useful for us. For example, <input type="text" class="easyui-textbox other-css"/> And if "input" can use the "other-css" style,then more and more projects will use it,I believe. Jeasyui is strong enough on HTML element,while still a little poor on HTML layout. Maybe we can get some idea from bootstrap,UIkit,semantic-ui,and to make it better and better. Thank you. |