I'm working to front end with AngularJS, so i decided to use Bootstrap. In my page sometimes i use class="btn" (because i need some buttons) but i have seen one difference in runtime.
I explain the problem here.
When i test my application in XAMPP (while developing) everything is good, without problem, but when i copy my files to my web dynamic project (i use spring) in runtime i see reduced height of buttons. Anyone has the same problem? i hope this was not duplicate of question, but i didn't what to search.
Here you can see what i means -->
http://imgur.com/a/ikO0n
Solved with height: 24px; in .btn-xs css class
Related
I have below scenario:
css/abc.css - myCss{prop1: val}
css_new/abc.css - myCss{prop1: newVal}
I cannot update css/abc.css. Hence, css_new/abc.css is introduced. Both these files will be used parallely in prod at least till the time complete migration is done.
All of the old code use style from css folder. The new code refers to css_new folder. My concerns are:
1. Will there be any caching at browser level.
2. Are there possibilities of my old code referring to the new css class defined in css_new.
I want to make sure there are no regressions in old code because of this change.
Some more background: upgrading UI code to angular. Mainly, image URLs referred from CSS are broken. Many thanks.
I have an ASP.Net (.net 4.0) page, which contains javascript, css and custom controls.
When I debug the Page, everything looks fine and is working properly. But after publishing, some css don't work anymore. But most of them do. Although they are from the same css file.
I.E.
I have table-data (<td>) tags, which have a select-box in it. In debug, the select-box is visible (width of select: 85%) but in published, the select-box is really thin, because the td doesn't have any width and 85% of 0 is... not much ;).
Also I am not able to hide and unhide divs in my page via JavaScript anymore. I just set display to block or none, but my divs are hidden always, while in debug they work.
I saw problems regarding the including path of css and script files (with root or without root directory etc), tried it but it didn't solve the problem.
Another source said, it would be because of the compatibility mode to .net 3.5, which I changed to 4.0 and it didn't solve the problem, also.
Do you have any idea what could happen here?
For example, the header of a table:
In InternetExplorer while debugging:
And in InternetExplorer after publishing:
You can see there is a gap between the <td> Tags.
I work as an intern on a website wich is actually protected with pass so I can't give you the link...
Anyway, I will ask the question and if you need some code I can give it.
So, there is a responsive design for the mobile made buy an external party which created the design/css. The responsive work correctly when I work with wampServer, and I resized the page with the ctrl+maj+m on firefox.
The actual problem is, when I put the same page on the server, the responsive don't work anymore... on firefox and on mobile phones.
I don't get how is that possible, so maybe someone encountered the same problem and has some tips?
Thank you
EDIT : There is ONE page which still works online, but I really don't get why, it has exactly the same code as the others... the 'responsive code' is included in each page at the top with the footer too (but this one is at the end of the page). Just the body changes on every page.
EDIT EDIT :
Here is the sample code. header.php, head.php, mainmenu.php.
EDIT OF THE MASTER EDIT :
Thanks Abdul-Rafay Shaikh.
Well, all of the css is imported in the import <link rel="stylesheet" href="assets/css/zz-all.css" type="text/css" />. Which is called in the head.php. The path is good, in fact it works in one page and not the others. I think I have to check, line by line, all of the code to find maybe an import that f***ed all up, or something like that.
Thanks for all your help anyway :)
Well I think the responsive template you are using maybe used javascript to actually make breakpoints and as you told us that the one page that is working when deployed on a real server has the responsive css in the footer. So my solution would be put the css of all the pages in the footer or check wether any js is actually making the breakpoint and put the CSS after that javascript.
The Second thing is the path's maybe your CSS that has the responsive code has their path defined preceding localhost/ or some thing like that check that.
Third if there is no javascript that is making your website responsive and its only css import your responsive CSS to the main stylesheet
In your main style sheet
#import url("responsive.css");
just to make sure that your responsive style sheet is loaded whenever your main style sheet is loaded.
I hope this solves the problem
I have just recently implemented the five star rating system from ajax, into my asp.net site. Everything works fine in locall debug mode.However. Once i publish it, the css does not show up. I have declared all of the css within the content page, not sure if this is why. I am very in-experienced with working with css; so i am sorry if it something simple.
I have checked the spelling of the image url, and have also tried implementing it into the site.css. But as i said, i am in-experienced; so am not sure what to do here.
This is my code as it stands:
The css declared at the top of the content page:
http://codepad.org/m1w39Hep
The reference to the css from my rating control:
http://codepad.org/Kl0BKets
Thanks in advance!
Check if your css links is right and your css files loaded successfully
I have seen your code.
Give extention as ".css" and not ".c"
I dont think that you can use Codepad for that because it does not give support for CSS.
If you are not using Codepad
Then as you are deploying it in server then check the URLs of the Images that are present in the CSS file for rating/.
i have got the following problem:
I want to create a new Liferay Theme and in this Theme there are Portlets in the Header, how can i Design these Portlets properly? My try was to deploy a "_unstyled" Theme and then copy the theme "classic" in "_diffs". This works fine and I have managed to get the most css done. But now i have a Login-Portlet in the Header and if the User is logged out , the Portlet has more "heigth" and so i cant use the same margin for these two cases.
My idea now was to add a .css file to my Css files and include this one as the last, which overrides the rest, if the user is logged in. This should be done in the portal_vm i guess, but since i am not familiar with the Liferay commands it would be nice if you could help me.
If this is just a little bit of Code, please give me a short example.
Im working with Liferay 6.1 and Eclipse.
thanks in advance
There is a "signed-in" and a "signed-out" class on body depending if someone is signed in or not.
So you might be able to just use this in custom.css
.signed-in .portlet-login {
margin: 0px;
}
.signed-out .portlet-login {
margin: 10px;
}
of course, change the margins and other values according to your environment.