I am trying to attach a select dropdown to a search box. So far, I kind of got it working on larger monitors:
However, the problem is, when I resize my browser window to < 1100px width, the "Everything" gets cut off:
I tried applying a min-width of e.g. 150px to the dropdown but it doesn't seem to be having any effect. Adding a min-width to the container works, but when I resize the window, the controls break to the next line. I'm guessing that the approach I took (using a nested 12-column grid with no gutters to align the dropdown, text box, and button) isn't the right way to do this.
FIDDLE: https://jsfiddle.net/jh2fgmo7/
How can I attach the select dropdown to the text box but keep a minimum width equivalent to the select box's largest value (using CSS only)?
Update-
This is the desired result when resizing:
CSS
body {
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
font: normal 16px Arial, Helvetica, Verdana, Geneva;
}
body:after {
content: " ";
display: block;
clear: both;
}
.tbnav {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background: #303030;
min-height: 55px;
}
.tbnav .logo {
width: 11.39241%;
float: left;
margin-right: 1.26582%;
margin-left: 3.16456%;
background: url(/images/tb-logo.gif) no-repeat;
height: 27px;
min-width: 150px;
margin-top: 14px;
}
.tbnav .search {
width: 62.02532%;
float: left;
margin-right: 1.26582%;
}
.tbnav .search .searchcat {
width: 11.01695%;
float: left;
height: 27px;
margin-top: 11.5px;
}
.tbnav .search .searchcat select {
height: 33px;
width: 100%;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.tbnav .search .searchbox {
width: 78.81356%;
float: left;
margin-right: 0;
margin-left: 0;
height: 27px;
padding: 1px;
padding-left: 5px;
margin-top: 11.5px;
}
.tbnav .search .searchbtn {
width: 6.77966%;
float: left;
height: 27px;
margin-top: 11.5px;
}
.tbnav .search .searchbtn input {
height: 33px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="tbnav">
<div class="logo"></div>
<div class="search">
<div class="searchcat">
<select name="c">
<option>Everything</option>
</select>
</div>
<input type="text" name="search" class="searchbox" />
<div class="searchbtn">
<input type="submit" class="button button-primary button-small" value="Go" />
</div>
</div>
</div>
</body>
</html>
Personally, I would do .searchcat { position: absolute; }, set it to the desired width, then set .searchbox { padding-left: /*whatever*/; }. As a quick fix. You might throw some Javascript in there if the <select> contents will be variable (i.e. loaded dynamically) just to check what the widest value is.
After some fiddling, I used a basic table and styled it with CSS instead. It works just how I wanted now. Hope this helps someone! (If anyone wants the underlying Sass script, let me know!)
Fiddle
http://jsfiddle.net/dzoppzzL/
CSS
body {
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
font: normal 16px Arial, Helvetica, Verdana, Geneva;
}
body:after {
content: " ";
display: block;
clear: both;
}
.tbnav {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background: #303030;
min-height: 65px;
}
.tbnav .logo {
width: 150px;
float: left;
margin-right: 1.26582%;
margin-left: 3.16456%;
background: url(/images/tb-logo.gif) no-repeat;
height: 27px;
margin-top: 19px;
}
.tbnav .search {
margin-top: 13px;
border: 0;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
margin-left: 3.16456%;
width: 62.02532%;
float: left;
margin-right: 1.26582%;
}
.tbnav .search .searchcat {
height: 35px;
padding: 0px;
border-right: 1px solid #808080;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.tbnav .search .searchcat select {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
background: #f7f7f7;
height: 39px;
width: 150px;
color: #808080;
border: 0;
outline: none;
box-shadow: none;
}
.tbnav .search .searchtxt {
width: 100%;
padding: 0;
}
.tbnav .search .searchtxt .searchbox {
border: 1px solid #FFF;
border-left: 0;
width: 100%;
min-width: 200px;
margin-right: 0;
margin-left: 0;
height: 35px;
padding: 1px;
padding-left: 5px;
outline: none;
box-shadow: none;
}
.tbnav .search .searchbtn {
width: 100px;
height: 35px;
padding-left: 5px;
}
.tbnav .search .searchbtn input {
height: 39px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
HTML
<table class="search">
<tr>
<td class="searchcat">
<select name="c" id="catsel">
<option>Everything</option>
</select>
</td>
<td class="searchtxt">
<input type="text" name="search" class="searchbox" />
</td>
<td class="searchbtn">
<input type="submit" class="button button-primary button-small" value="Go" />
</td>
</tr>
</table>
Related
I'm creating static web site and sometimes use position:relative. And when I tested my page on different browsers I got different displays of some elements like 1-2 pixels higher or lower.
How I can solve the problem or I should use something else?
Thought about some gulp package but didn't find anything.
Example.
HTML:
<p id="search-form-menu">
<input type="search" name="search-input" placeholder="Поиск">
<input type="submit" value="">
</p>
CSS:
input[type='search'] {
height: 35px;
width: 250px;
border: 0px;
border-radius: 5px;
position: relative;
top: -10px;
padding-left: 15px;
padding-right: 45px;
}
input[type='submit'] {
height: 35px;
width: 45px;
background-color: white;
border: 0;
border-left: 3px solid #d1d1d1;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
position: relative;
top: -10px;
left: -47px;
background-image:url("../image/search-loop-2.svg");
background-position: center;
background-repeat:no-repeat;
}
Why not use float style on the submit input?
<p id="search-form-menu">
<input type="search" name="search-input" placeholder="Поиск"/>
<input type="submit" value=""/>
</p>
css
p#search-form-menu{
width: 250px;
height: 35px;
}
input[type='search'] {
display: inline-block;
height: 35px;
width: 205px;
border: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-left: 15px;
padding-right: 15px;
}
input[type='submit'] {
display: block;
float: right;
height: 35px;
width: 45px;
background-color: white;
border: 0;
top:10px;
border-left: 3px solid #d1d1d1;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-image:url("../image/search-loop-2.svg");
background-position: center;
background-repeat:no-repeat;
}
created a fiddle and got this to work in chrome and ie.
https://jsfiddle.net/1r8a2u87/2/
There should be no need to use positioning here at all.
Just box-sizing and vertical-align.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #c0ffee;
}
input[type='search'] {
height: 35px;
width: 250px;
border-radius: 5px;
border: none;
}
input[type='submit'] {
height: 35px;
width: 45px;
background-color: white;
border: none;
border-left: 3px solid #d1d1d1;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
vertical-align: middle;
}
<p id="search-form-menu">
<input type="search" name="search-input" placeholder="Поиск">
<input type="submit" value="Go">
</p>
I have problem, I can't align two buttons in one line.
I tried to set padding of span class pptext2 but without success.
Here is code
http://jsfiddle.net/71782p4L/1/
HTML
<div class="ppdiv">
<button class="ppenvelope"><img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATE MESSAGE</span></button>
</div><!--Zatvoren ppdiv-->
CSS
.ppdiv{
padding-top:22px;
padding-left: 19px;
}
.ppdiv img{
padding:10px;
font-size: 20px;
}
.ppenvelope{
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.pptext{
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
}
.pptext2{
display: inline-block;
color:#4c6974;
padding-top: 15px;
padding-bottom:13px;
padding-left: 13px;
}
I would set float: left; on both buttons and overflow: hidden; on .ppdiv. To make sure both buttons stay the same height, also set height on them (e.g. height: 48px;). You can also remove the span.pptext2 element altogether, unless you need it for other purposes. Take a look at the fiddle: https://jsfiddle.net/igi33/ck4w6cLq/1/.
HTML:
<div class="ppdiv">
<button class="ppenvelope">
<img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika">
</button>
<button class="pptext">PRIVATE MESSAGE</button>
</div>
CSS:
.ppdiv{
overflow: hidden;
}
.ppenvelope, .pptext {
float: left;
border: none;
height: 48px;
}
.ppenvelope{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.ppdiv img{
padding:10px;
}
.pptext{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
color:#4c6974;
}
Use vertical-align: middle; on both buttons.
.pptext {
background: none repeat scroll 0 0 #c9e0e6;
border: medium none;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
vertical-align: middle;
}
.ppenvelope {
background: none repeat scroll 0 0 #b2d4dd;
border: medium none;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
vertical-align: middle;
}
https://jsfiddle.net/71782p4L/2/
Here you are.
.ppdiv {
height:43px;
overflow:hidden;
}
.ppdiv img {
padding:10px;
}
.ppenvelope {
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
float:left;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My overlay currently looks like this and I'm looking for it to auto adjust based on the size (since this is responsive)...
Just to note... I am using Bootstrap. http://getbootstrap.com/
Here is the first set of html...
<div class="Discussion box">
<div class="topic">
<img class="PhotoThumbnail TopicPhoto" src="{{user.profile.avatarURL}}" />
<div class="Name">{{user.profile.firstName}} {{user.profile.lastName}} - {{title}} </div>
<p class="TopicText">{{body}}</p>
</div>
<div class="show-hide-comments">
Show Comments (or Hide Comments if showing)
</div>
{{> postComments}}
</div>
Here are is the code for comments & posts...
<template name="postComments">
<div class="CommentOverlay">
{{#each comments}}
{{> showComment}}
{{/each}}
{{> newPostComment}}
</div>
</template>
<template name="showComment">
{{#if editing}}
{{> editPostComment}}
{{else}}
<div class="TopicComments">
<img class="PhotoThumbnail" src="{{user.profile.avatarURL}}" />
<div class="Name">{{user.profile.firstName}} {{user.profile.lastName}}</div>
<p class="CommentText">{{> editPencil}} {{body}}</p>
</div>
{{/if}}
</template>
<template name="newPostComment">
<div class="TopicComments">
<img class="PhotoThumbnail" src="{{currentUser.profile.avatarURL}}" />
<textarea class="TopicAddCommentText" rows="2" name="comment" placeholder="Write a comment..."></textarea>
<button data-action="post-comment" class="TopicAddCommentSubmit btn"><p class="SubmitButtonText">Submit</p></button>
</div>
</template>
<template name="editPostComment">
<div class="TopicComments">
<img class="PhotoThumbnail" src="{{currentUser.profile.avatarURL}}" />
<textarea class="TopicAddCommentText" rows="2" name="comment" placeholder="Write a comment..." autofocus>{{body}}</textarea>
<button data-action="save-comment" class="TopicAddCommentSubmit btn"><p class="SubmitButtonText">Submit</p></button>
</div>
</template>
Here is the css...
/* Shared */
.PhotoThumbnail {
border-style: solid;
border-width: 1px;
border-color: #DEE2EC;
border-radius: 100px;
height: 45px;
width: 45px;
margin-left: -80px;
}
.bottom-border {
border: 1px;
border-style: solid;
border-color: #EEEEEE;
margin: 0px -39px 0px -117px;
}
.TopicPhoto {
margin-top: 30px;
}
.Name {
font-weight: bold;
margin-top: -50px;
margin-left: -25px;
}
.CommentText{
margin-left: -25px;
}
.EditComment {
float: right;
width: 10px;
height: 10px;
}
.TopicText {
min-height: 40px;
margin-bottom: 5%;
margin-left: -25px;
}
.TopicComments {
min-height: 45px;
padding: 0 0 0 80px;
margin-left: 20px;
}
.TopicAddCommentText {
border-color: #DEE2EC;
border-width: 1px;
width: 85%;
height: 50px;
border-style: solid;
border-radius: 5px;
margin-left: 1%;
}
.TopicAddCommentSubmit {
width: 115px;
height: 50px;
background-color: #B679B4;
border-color: #772A75;
border-width: 1px;
border-style: solid;
float: right;
box-shadow: 0px 0px 10px #888888;
margin: 0px -5px 0 0;
}
.SubmitButtonText {
color: white;
font-weight: bold;
margin-top: 9px;
}
.CommentOverlay {
background-color: #F6F7F8;
margin-left: -37px;
padding: 20px;
margin-right: -38px;
border-radius: 4px;
margin-top: 20px;
}
/* Discussions Only */
.Discussion {
height: 100%;
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #DEE2EC;
border-radius: 10px;
padding-left: 30px;
margin-bottom: 30px;
}
.topic {
margin-bottom: -20px;
padding: 0 0 0 80px;
}
/* Goals Only */
.Goal {
height: 100%;
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #DEE2EC;
border-radius: 10px;
padding-left: 30px;
margin-bottom: 30px;
}
.GoalBoxes {
width: 49%;
margin: 20px 0 0 0;
min-height: 110px;
float: left;
}
.GoalTopRightBox {
float: right;
}
.GoalBottomRightBox {
float: right;
}
.GoalHeading {
font-weight: bold;
margin: 5% -5%;
}
.GoalLine {
margin-top: 0px;
margin-bottom: 5px;
}
.GoalInput {
font-weight: normal;
}
.goalposterline {
margin-top: 30px;
}
.show-hide-comments {
/* border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;*/
text-align: center;
margin-bottom: -20px;
color: gray;
}
It's hard to say without a demo of your code I can take a look at, but it looks like the root of your problems are the fact that the parent element <div class="Discussion box"> has some padding-left applied.
.Discussion {
height: 100%;
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #DEE2EC;
border-radius: 10px;
/* padding-left: 30px; Remove this */
margin-bottom: 30px;
}
You should remove this and apply any padding to <div class="topic"> instead. Then you will need to apply the styles below to <div class="CommentOverlay">
.CommentOverlay {
width: 100%; /* Add this */
background-color: #F6F7F8;
/* margin-left: -37px; Remove this */
padding: 20px;
/* margin-right: -38px; Remove this */
border-radius: 4px;
margin-top: 20px;
}
I want to have two buble speech togethers and and with the some extra information.
Image below
This is my code for doing this:
I have a demo for this here: http://jsfiddle.net/pZh4w/
<style>
.bubble
{
position: relative;
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
}
.test
{
margin-bottom: 0px;
margin-left: 850px;
}
.test1
{
margin-bottom: 20px;
margin-left: 850px;
}
.tes
{
margin-bottom: 0px;
margin-left: 250px;
}
.tes1
{
margin-bottom: 20px;
margin-left: 250px;
}
</style>
Thanks for your help.
Here is something to get you started.
I would suggest the following HTML:
<div class="bubble">
<p>First paragraph</p>
<div class="caption">
<h1>By PEDE</h1>
<h2>From Belgrade,MT</h2>
<h3>September 25,2013</h3>
</div>
</div>
and start with the following CSS:
.bubble-panel {
display: inline-block;
border: 1px dotted #CCCCCC;
height: 250px;
position: relative;
margin: 20px;
}
.bubble {
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
}
.caption {
border: 1px solid red;
width: 20em;
font-size: 14px;
line-height: 1.5;
position: absolute;
bottom: 0px;
right: 0px;
}
.caption h1, .caption h2, .caption h3 {
font-size: 1.00em;
text-align: center;
margin: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/rcNN6/
The net result gives something like:
The speech bubble decoration (the little triangular bit that sticks out) can be built
by following the ideas presented at: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
The trick is to wrap the bubble and caption texts in a inline-block wrapper of fixed height. These can then form a 2x2 grid if the screen is wide enough.
This fluid design works fine on all browsers on my laptop, but on my android and iphone the link button is split between two lines. If I change the width percentage of style (a span) I can get it to work, but then it's width is no longer as wide as the container below it and it's needs to be.
I was assuming that style (a span) could only fill in the area between style (a em) and style (a b), I guess I was wrong.
Thanks in advance for anyone that can help me on this.
Styles
.main_container {
overflow: hidden;
width: 100%;
height: 100%;
background-image: url(../images/bgdots.png);
background-repeat: repeat-x y;
background-attachment: fixed;
background-color: transparent;
padding-bottom: 20px;
}
h2.acc_trigger {
display: block;
margin: 0 0 2px 0;
width: 95%;
height: 30px;
font-size: 1.5em;
font-weight: normal;
text-align: center;
margin-left: auto;
margin-right: auto;
}
a em{
display: block;
float: left;
background: url(../images/navs.png) no-repeat 0 0;
width: 26px;
height: 30px;
}
a span{
display: block;
float: left;
background: url(../images/navs_c.png) repeat-x;
width: 95%;
height: 30px;
}
a b{
display: block;
float: left;
background: url(../images/navs.png) no-repeat -28px 0;
width: 5px;
height: 30px;
}
.acc_container {
margin: 0 0 2px;
overflow: hidden;
font-size: 1.2em;
width: 95%;
clear: both;
background: #fff;
border: 2px solid #3cf;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
margin-left: auto;
margin-right: auto;
}
Example HTML
<h2 class="acc_trigger">
<a href="#"><em> </em> <span>
home</span> <b> </b></a>
</h2>
<div class="acc_container">
<h3>
Content content content!
</h3>
<p>
Content and more content, content with style and interest
that makes you want to read on.
</p>
</div>
add in style float:left might resolve your issue
You want your to have a percentage as well. I assume you want the code to work like my example here
a em{
display: block;
float: left;
background: url(../images/navs.png) no-repeat 0 0;
width: 2%;
height: 30px;
}
a b{
display: block;
float: left;
background: url(../images/navs.png) no-repeat -28px 0;
width: 2%;
height: 30px;
}
Basically 95% plus 26px plus 26px can equal > the screen. So it wraps. You want all three of those elements to have a percentage to keep it jiving.
You don't need inline styles if you are using CSS
<h2 class="acc_trigger">
<em> </em> <span> home</span> <b> </b>
</h2>
should be
<h2 class="acc_trigger">home</h2>
a.acc_trigger{
font-style:italic;
font-weight: bold;
}
H2 is a block-level element. If you want to make it inline just do this:
<h2 class="acc_trigger">home</h2>
a.acc_trigger{
font-style:italic;
font-weight: bold;
display: inline;
}