{"action":"created","issue":{"url":"https://api.github.com/repos/salcode/bootstrap-genesis/issues/109","repository_url":"https://api.github.com/repos/salcode/bootstrap-genesis","labels_url":"https://api.github.com/repos/salcode/bootstrap-genesis/issues/109/labels{/name}","comments_url":"https://api.github.com/repos/salcode/bootstrap-genesis/issues/109/comments","events_url":"https://api.github.com/repos/salcode/bootstrap-genesis/issues/109/events","html_url":"https://github.com/salcode/bootstrap-genesis/issues/109","id":113708975,"number":109,"title":"Adding bootstrap styled search revisited","user":{"login":"bryanwillis","id":4042621,"avatar_url":"https://avatars.githubusercontent.com/u/4042621?v=3","gravatar_id":"","url":"https://api.github.com/users/bryanwillis","html_url":"https://github.com/bryanwillis","followers_url":"https://api.github.com/users/bryanwillis/followers","following_url":"https://api.github.com/users/bryanwillis/following{/other_user}","gists_url":"https://api.github.com/users/bryanwillis/gists{/gist_id}","starred_url":"https://api.github.com/users/bryanwillis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bryanwillis/subscriptions","organizations_url":"https://api.github.com/users/bryanwillis/orgs","repos_url":"https://api.github.com/users/bryanwillis/repos","events_url":"https://api.github.com/users/bryanwillis/events{/privacy}","received_events_url":"https://api.github.com/users/bryanwillis/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-10-27T23:10:29Z","updated_at":"2016-04-07T13:55:05Z","closed_at":"2016-04-07T13:55:05Z","body":"This has to do with the search form [added here](https://github.com/salcode/bootstrap-genesis/issues/57)\r\n\r\nBeen meaning to get back to this for awhile, but kept forgetting about it. The 1% width  `.input-group-button` isn't getting priority over the auto width in the media query so it's not being displayed right.\r\n\r\n**So it's looking like this:**\r\n\r\n<img width=\"354\" alt=\"screen shot 2015-10-27 at 5 48 25 pm\" src=\"https://cloud.githubusercontent.com/assets/4042621/10774983/df0d5870-7cd2-11e5-9536-0cbc1ffbab2b.png\">\r\n\r\n\r\n**Instead of being full-width on all displays like this:**\r\n\r\n<img width=\"392\" alt=\"screen shot 2015-10-27 at 5 49 54 pm\" src=\"https://cloud.githubusercontent.com/assets/4042621/10774975/d318309e-7cd2-11e5-804c-99a2b3533f20.png\">\r\n\r\n\r\n\r\n**There are are a lot of ways to fix this.**\r\n\r\n\r\n\r\n**1)** Just target 768px as it seems to be only one affected:\r\n\r\n```css\r\n@media (min-width: 768px) {\r\n.search-form.form-inline .input-group > .input-group-btn {\r\n    width: 1%;\r\n }\r\n}\r\n```\r\n\r\n**2)** Use the sibling selector which will get priority:\r\n\r\n```css\r\ninput#bsg-search-form ~ .input-group-btn {\r\n     width: 1%;\r\n}\r\n```\r\n\r\n\r\n**3)** Use !important *(hacky solution)*:\r\n\r\n```css\r\n.search-form .input-group-btn {\r\n     width: 1% !important;\r\n}\r\n```\r\n\r\n\r\n----------\r\n\r\n\r\nOn a side note from the search bar width, we also might still need to move the glyphicon search icon down another pixel, at least the way I'm seeing it. This could possibly be retina mac display only though.\r\n\r\n```css\r\n.search-form .glyphicon {\r\n    top: 2px;\r\n}\r\n```\r\n\r\n\r\n----------\r\n\r\n\r\nAlternatively, we could fix both of these issues using flexbox. While the code here is the longest it is also way cleaner than bootstraps 1% width hack.\r\n\r\n```css\r\n.search-form.form-inline .input-group, \r\n.search-form.form-inline .input-group .input-group-btn {\r\n    display: flex;\r\n}\r\n#bsg-search-form {\r\n    flex: 1;\r\n}\r\nbutton.search-submit.btn.btn-default {\r\n    display: inline-flex;\r\n    padding: 0 14px;\r\n    justify-content: center;  /* might not be needed */\r\n    align-items: center; /*  might not be needed  */\r\n}\r\n@media (min-width: 768px) {\r\n   .search-form.form-inline > .form-group {\r\n        display: block;\r\n    }\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/salcode/bootstrap-genesis/issues/comments/206917279","html_url":"https://github.com/salcode/bootstrap-genesis/issues/109#issuecomment-206917279","issue_url":"https://api.github.com/repos/salcode/bootstrap-genesis/issues/109","id":206917279,"user":{"login":"salcode","id":5194588,"avatar_url":"https://avatars.githubusercontent.com/u/5194588?v=3","gravatar_id":"","url":"https://api.github.com/users/salcode","html_url":"https://github.com/salcode","followers_url":"https://api.github.com/users/salcode/followers","following_url":"https://api.github.com/users/salcode/following{/other_user}","gists_url":"https://api.github.com/users/salcode/gists{/gist_id}","starred_url":"https://api.github.com/users/salcode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/salcode/subscriptions","organizations_url":"https://api.github.com/users/salcode/orgs","repos_url":"https://api.github.com/users/salcode/repos","events_url":"https://api.github.com/users/salcode/events{/privacy}","received_events_url":"https://api.github.com/users/salcode/received_events","type":"User","site_admin":false},"created_at":"2016-04-07T13:55:05Z","updated_at":"2016-04-07T13:55:05Z","body":"I'm open to changing markup but I'd like to let the Bootstrap CSS style this form.\r\n\r\nI'm not familiar with a markup change that will improve this rendering but if someone has a suggestion, feel free to re-open this issue."}}