CSS drupal search api float elements - html

I have just implemented search api module and it works. I replaced the core search block with the block for the search api module.
With firefox I saw that the code after the two elements, the search element and the textfield (where you can write the words to search) is the folowing:
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input id="edit-search-api-views-fulltext" class="form-text" type="text" maxlength="128" size="30" value="" name="search_api_views_fulltext">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input id="edit-submit-searchadvanced" class="form-submit" type="submit" value="Zoeken" name="">
</div>
In my global.css I managed to set the elements at the left site. Now that they are at the right site, I want them to stand side by side and not among each other. I can speak to the elements seperatly, but setting them side by side is to difficult. I have read about float, display; inline, clear, ...
Here is my code:
/*float right and textbox and searchbutton disapear at the right side, I gave also a width of 240 px */
#views-exposed-form-searchadvanced-page{
float:right;
width: 500px;
}
/*the element edit-search-api-views-fulltext, is the textfield and has a blue color */
#edit-search-api-views-fulltext{
background:blue;
}
/*the element edit-submit-searchadvanced, is the searchbutton and has a green color */
#edit-submit-searchadvanced{
background:green;
I hope someone can help me with this!

I'm not sure whether I understood your question correctly, however I think you want to display the searchbox and button next to each other.
To achieve that the wrapper div (#views-exposed-form-searchadvanced-page) should be floated to the right (which you already did) and the searchbox and the button to the left.
/*the element edit-search-api-views-fulltext, is the textfield and has a blue color */
#edit-search-api-views-fulltext {
background: blue;
float: left;
}
/*the element edit-submit-searchadvanced, is the searchbutton and has a green color */
#edit-submit-searchadvanced {
background: green;
float: left;
}
See this fiddle for the complete, working example.

Related

How to get this search-results-div to show up on top of content, without interfering with nearby float elements?

I have a tricky layout that I'm trying to add type-to-search to. (The actual code uses Angular, but it looks like my problem is just the CSS.)
https://jsfiddle.net/dowxw1dz/2/
In a single TD, there are two floating bits off to the right (a descriptive label, and a button unrelated to the label). The main part of the TD is a text input, which takes up the remainder of the space. I'm trying to enhance the input by making it show a div with search results below it, overlaying the stuff below the input.
The problem I'm hitting is that the div containing the input is overflow:auto, so when the search results show up, they just add a scrollbar to the input div (with the search results visible if you scroll), rather than showing the search results on top of the other content. I could fix this by changing the overflow to something else, but then the two floating elements to the right decide to get out of the way of the input.
How can I get the search results to show over the lower content, rather than being trapped in the input div with a scrollbar? Ideally, I want the search results to be exactly as wide as the input (which is going to be variable), but my first problem is just to get the search results to show without either shoving around the floating elements or shoving the results behind a scrollbar.
HTML:
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
<div class="searchResults">
Results!
</div>
</div>
</div>
<div style="width:600px;">
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>
CSS:
.searchResults {
position:absolute;
top:100%;
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
.inputRow {
position:relative;
overflow:auto;
}
input {
width: 98%;
}
div {
z-index: 0;
}
JS:
$("#input").change(function() {
$(".searchResults").show();
});
It seems you need to use position fixed instead of position:absolute, and assign top:7% it will work. It's a way around. Still can't figure out why position:absolute is not working. I'm yet in the learning phase.
.searchResults {
position:fixed; /* instead of : position:absolute;*/
top:7%; /* instead of : top:100%;*/
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
Fiddle here : https://jsfiddle.net/nithin_krishnan/dowxw1dz/5/
The solution was simply to ignore the input element, and put the results in the content below the input, instead.
Unfortunately, that meant that setting the width had to be done in JavaScript instead of simply relying on CSS to do the right thing. I ended up using $(".searchResults").width($("input").width()) in order to make the width of the results match the width of the input. (And I removed the top: 100% from the .searchResults CSS class.)
https://jsfiddle.net/dowxw1dz/7/
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
</div>
</div>
<div style="width:600px; position:relative;">
<div class="searchResults">
Results!
</div>
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>

Color of background div not stretching when browser is resized

I am trying to create an opt-in area that stretches to hold its contents when the browser is resized (less width). I am trying to duplicate the orange picture area of this theme: http://anpsthemes.com/demo/?theme=constructo (Classic demo) where it says "FAST AND RELIABLE SERVICE FOR YOUR PROJECT..." Note that the background image doesn't stretch, but when you resize the browser it shows more of the image. This is what I would like.
I had no luck with the image, so tried background color, and the same thing happened, the background image or color doesn't "stretch" behind the content. Here is my code so far:
.oi {
/*background:url(opt-bg.jpg);*/
background-color:#f46a68;
width:100%;
min-height: 100px;
}
.oi-container{
max-width: 1310px;
margin: 0 auto 0 auto;
padding-top:22px;
}
.left{
max-width:670px;
float:left;
}
.right{
max-width:570px;
margin-left:30px;
float:left;
}
<div class="oi">
<div class="oi-container">
<div class="left">
<div class="txt-top">GET FREE TIPS TO CREATE THE LIFE YOU LOVE</div>
<div class="txt-bot">+ BONUS Why most health businesses fail and how to avoid it</div>
</div>
<div class="right">
<form action="#" method="post" id="oi">
<input type="text" class="input" value="first name" />
<input type="text" class="input" value="email address" />
<input type="button" onclick="document.getElementById('oi').submit();" value"get it" class="btn-get-it" />
</form>
</div>
</div>
</div>
I did inspect the theme's code, but can't really duplicate it, I'm not good with position divs within each other. You can see the code live here: http://itlive.ca/oi
Any help or a point in the right direction would be greatly appreciated.
.left and .right are floated, and therefore the containing elements, .oi for example, won't contain them, which is why they spill over when the window is resized.
Clearing those floats somehow (adding another element below and applying the clear CSS property, or using the clearfix method) might be a solution.

CSS - dynamic length text input field and submit button in one row

I have:
<div>
<input id="input" type="text" />
<button id="submit">submit</button>
</div>
which gives me this
If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:
I want that the <input type="text" /> fills the whole horizontal new space but that the submit button remains in the same row.
I tired to use <input style="width:100%" type="text"/> but then it fills the whole row and the submit button appears in the next row:
I also tried a table as mentioned in that thread:
Liquid textfield width
The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty:
Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.
Thanks!
The "table" method you linked to will work, but you're missing one crucial property on your input elements: box-sizing.
http://cssdeck.com/labs/sbffl3l2
<div class="foo">
<div class="bar"><input type="text"></div>
<div class="bar"><input type="submit"></div>
</div>
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 100%;
}
input {
box-sizing: border-box; /* this is the key */
}
Prefixes may be required: http://caniuse.com/#feat=css3-boxsizing
I believe you can do this:
<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />
It's not advisable to do inline styles though.
Edit: Make sure you also define a fixed width for the button
Why not give width of 70% to input and 20% to button?

text-align: right has margin or buffer in Chrome

I'm trying to simply align a set of text and <input> elements to the right, so that the left side of the inputs always aligns at the same location (they are the same width, so what's really happening is the right side is aligned to the right side of their container), and the left side of the label text is jagged.
It's not ideal for a large form, but for what I need, it looks better that way.
Here's the HTML and CSS (also at this jsfiddle):
HTML:
<div id="pullthrough-control-panel">
<div class="float-l right-text" id="pullthrough-range-panel">
<h3 class="center-text">Date Range</h3>
Start: <input type="text" name="rangestart" />
<br />
End: <input type="text" name="rangeend" />
</div>
</div>
CSS:
.float-l{
float: left;
}
.right-text{
text-align: right;
}
.center-text{
text-align: center;
}
#pullthrough-control-panel{
height: 6em;
padding: .25em;
}
That's it. Now, the real problem comes into play when I try to go cross-browser with the page. As usual, Firefox works as expected. The problem is with Chrome. The lower input ("End") juts out to the right of the upper one. There's no reason this should be happening.
If you have both browsers, you can check it out at the jsfiddle I posted above.
Is this a bug in Chrome's CSS engine? Is there something happening that I'm not aware of?
you can simply change <br/> to <p> and it will work.
http://jsfiddle.net/Jd7PR/
You're doing it all fine, just move the <br /> in the upper line without spaces after the input:
Start: <input type="text" name="rangestart" /><br />
End: <input type="text" name="rangeend" />
jsFiddle demo
That's it!
Here's my demo for you. Seems like chrome didn't like the </br>
DEMO
Do you need to have both a class and an id on one div? (I don't want to say you shouldn't because I'm not sure about that, but I haven't encountered that before)
You could give each input a class/id and then set the css for that class/id as: float:right; - Alternatively you could use position:absolute; - Personally, I would put both pairs in parent divs and use display:inline; and float:right; on the parent divs.

Aligning a button to the center

I have a simple submit button. I am wanting to align it to the center. Here is my code:
<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">
However, it does not work. What is the best/easiest way to do this?
You should use something like this:
<div style="text-align:center">
<input type="submit" />
</div>
Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.
<input type="submit" style="width: 300px; margin: 0 auto;" />
Here is what worked for me:
<input type="submit" style="margin-left: 50%">
If you only add margin, without the left part, it will center the submit button into the middle of your entire page, making it difficult to find and rendering your form incomplete for people who don't have the patience to find a submit button lol. margin-left centers it within the same line, so it's not further down your page than you intended.
You can also use pixels instead of percentage if you just want to indent the submit button a bit and not all the way halfway across the page.
For me it worked using flexbox, which is in my opinion the cleanest solution.
Add a css class around the parent div / element with :
.parent {
display: flex;
}
and for the button use:
.button {
justify-content: center;
}
You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.
If this is not working, try :
#wrapper {
display:flex;
justify-content: center;
}
margin: 50%;
You can adjust the percentage as needed. It seems to work for me in responsive emails.
Add width:100px, margin:50%.
Now the left side of the button is set to the center.
Finally add half of the width of the button in our case 50px.
The middle of the button is in the center.
<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'>