I have a a text type input field, and I have a button for "Search". I would like these 2 objects to be horizontally aligned; with the button being as big as it wants to be, and the input field taking up the rest of the space. I have been trying with CSS all day, but with no avail.
I am using RoR, and employing the Bootstrap library. I was wondering if there was anything out of the box that would make this work. I have also tried using flexboxes, but the input field seems to have a mind of its own. Below is the problematic code.
<div class="mini-layout fluid">
<div class="mini-layout-body">
<h2>Shows</h2>
</div>
<div class="mini-layout-sidebar">
<div class="search_container">
<input id="search_shows_text" type="text" class="search-query">
<button id="search_shows_button"
type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
I've been able to get the search_container class to lay things out horizontally, but getting its children to resize appropriately has managed to escape me all day.
Any help is greatly appreciated.
EDIT Thanks to Krishnan and the SO community I got the solution working. Below is the code for anyone else.
HTML
Search
CSS
.search_container
{
text-align:center;
margin-top: 5px;
}
.text_area
{
width: 55%; //Change as per your requirement
display: inline-block;
margin: auto;
}
.but_area
{
width: 25%; //Change as per your requirement
margin: auto;
}
By default bootstrap have width set to 206px for text area and 71px for submit button. So in order to make it accomodate your requirements you have to override those default properties. I would probably do something like this.
create a class text_area with custom property
.text_area
{
width: 85%; //Change as per your requirement
}
create a class but_area with custom property
.but_area
{
width: 10%; //Change as per your requirement
}
And would use it in input text area and button.
<input id="search_shows_text" type="text" class="search-query text_area">
<button id="search_shows_button"
type="submit" class="btn btn-primary but_area">Search</button>
It will make my text area to occupy 85% of the space and button to occupy 10% space in my window and remaining 5% of space is left free.
Related
I have a modal
<div class="modal fade editModal in" data-backdrop="static" style="display: block; padding-left: 15px;">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-2 col-md-offset-5 col-md-2 text-center">
<img width="80" src="/assets/be/img/baby/solidfood.png"><br><br><br>
<input type="time" value="14:25" name="updatedAt" width="100%" height="80">
<br><br>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<br><br>
</div>
<br>
<button onclick="updateLog('7873')" class="btn btn-option btn-success btn-block">Done</button>
<br>
<button onclick="deleteLog('7873', 'solidfood')" class="btn btn-option btn-danger btn-block">Delete</button>
</div>
</div>
</div>
CSS
.btn-option {
width: 100%;
height: 80px;
}
I have no idea why the buttons is not extended to the end!
It stopped at 95%.
How do I debug this and make it take a full width ?
The cause
The problem was caused by the margin-right: 10px;.
.btn, .btn:hover {
color: white;
margin-right: 10px;
}
A solution
So, what should you do? Setting margin-right: 0px; would produce the result you can see below. This is not what you want because there's no space in-between these two elements.
You need to set margin-right: 0px; only to the right (i.e., last) element. You can do this by adding this:
.btn:last-child, .btn:last-child:hover {
margin-right: 0px;
}
This will produce the result you can see below.
Try removing those two <br> tags inside the <div>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<!-- Try removing these -->
<br><br>
</div>
I don't think you'll need them inside a flexbox anyways.
Or maybe it's the padding-left:14px on the parent div that's causing this.Try changing that too and this should fix it.
I opened your code provided and unchecked "margin-right:10px;" and it removed the margin on the right side of the button so that the buttons take up the full width of the row (parent element) and both buttons are taking half of the row. See image: CSS code highlighted in yellow and Fixed App
There are multiple ways to skin this cat.
The bootstrap way:
This solution uses the built-in bootstrap grid system to accomplish the result you're looking for.
Remove the inline styling from your container div and replace it with bootstrap's row class. Then wrap each contained button inside divs with the class col-lg-6.
<div class="row">
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
</div>
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
</div>
Result:
It looks clean require no additional css or overrides. However you are stuck with the bootstrap default column gap between buttons which may not be desirable.
Incidentally, if at all possible, I highly recommend upgrading to bootstrap 4 instead of 3, as it's much more flexible to tweaking this kind of thing without having to resort to writing more css.
Custom CSS way:
If you want more control over the gap between the buttons, bootstrap may not be your best bet.
This is similar to the solution above from Cervus Camelopardalis and uses the :first-child and :last-child pseudo-classes.
Remove the inline style from the container element and instead give it a descriptive class name. I chose "double-btn" but use whatever makes the most sense to you.
HTML:
<div class="double-btn">
<button onclick="updateLog('7997', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7997', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
In your CSS, add a rule for this class to set display: flex.
Then add another rule targeting any .btn's that are children of this class, removing the default bootstrap margin.
Then add one last set of rules targeting the :first-child and :last-child pseudo-classes of those .btns, setting the margin-right and margin-left to half of your desired gap, respectively. I chose a ten pixel gap here, but with this approach you can change it whatever looks best to you.
CSS:
.double-btn {
display: flex;
}
.double-btn .btn {
margin: 0;
}
.double-btn .btn:first-child {
margin-right: 5px;
}
.double-btn .btn:last-child {
margin-left: 5px;
}
Result:
From here, you can adjust the above margin-right and margin-left values to change the size of the gap between buttons.
It looks like you have margin-right on those two buttons, because your buttons have width of 100% and there is space between them and at the end of that div.
Try adding margin: 0; on .btn-option.
If this doesn't do the trick try setting white-space: normal; on parent div.
I am using fullcalendar version 4 nicely. I am adding a print button to it. The docs say I don't need to include any other files (like version 3 needed), and I should be able to handle the printing using media queries.
I've been reading about media queries and have come up with some code to work on the print page of the calendar div.
<div class="portlet-body">
<div class='loader'>
</div>
<div class="row">
<div class="col-md-5">
<a id="print_calendar" class="btn btn-xs default">Print</a>
</div>
<div class="col-md-7">
</div>
<br>
<div id="calendar_full" style="padding-left: 10px; padding-right: 15px;">
</div>
</div>
</div>
I pulled some unnecessary code from the above to simplify this. When the user clicks the print link, I just want calendar_full to print.
I am including calendar_full.php on this index page which has my full calendar scripts. In that file, I have this following CSS. I am new to media print CSS, so this is the point I got to isolate only the calendar_full div.
<style type="text/css">
#media print {
body * {
visibility: hidden;
height: 0;
}
#calendar_full,
#calendar_full * {
visibility: visible;
height: auto;
}
#calendar_full {
position: absolute;
left: 0;
top: 0;
height: 100%
}
}
When print is selected, I see something like this:
The calendar NEVER extends past that height, no matter what view I'm in: list, week, etc. Events naturally are cut off, as it seems, to that viewpoint all the time. I don't know if this is a just a CSS issue or if I need to do something more with the full calendar plugin.
I basically need it to expand the entire print range to encompass all of the calendar div events.
html
<div class="xxx">
<div class="xyz" ng-repeat="item in formList">
<div ng-show="formList.indexOf(app)!= -1" class="added-item">
<img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
</div>
</div>
<div class="abc" ng-hide="formList.length>20">
<button class="btn" ng-click="addItem()">
Add<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
css
.xxx {
width:500px;
height: 80px;
}
.added-item-icon, .abc {
width: 50px;
height: 50px;
}
I'm not good in css, and have only very basic knowledge
I am trying to add some list of items in a horizontal tab of height 80 and width 500 pixels, also an add app button too
As per the code, the add app button disappear when we add the 20th app
what I need to do is, lets say the xxx div(horizontal div) can have 5 items, after which overflow occurs
I want to set the overflow horizontal, not vertical
also at that stage(when 5 items are added), I want to fix the add app button at the very right of the division xxx, and the scroll due to overflow should not affect that button, it should be fixed there
we doesn't need to care more about the size of the item icons or add button,
Please help
For this you'll want to look into using flexbox. To get this working, all you really need to do is add display: flex; flex-direction: column to your container, and then overflow-y: auto to the section you want to scroll.
Heres a Plunker demonstrating it.
Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn't do what I expected it to do and resize them.
<div class="input-group">
<span class="input-group-addon">some text</span>
<input type="text" class="form-control" id="current_pwd" name="current_pwd" />
</div>
Can anyone help me getting the input-group-addon get the same size?
I've created a fiddle here: http://jsfiddle.net/Dzhz4/ that explains my problem.
Anyone that can shed some light please?
try this
http://jsfiddle.net/Dzhz4/1/
.input-group-addon {
min-width:300px;// if you want width please write here //
text-align:left;
}
.input-group-addon { width: 50px; } // Or whatever width you want
.input-group { width: 100%; }
The first part sets the width of your addons, the second forces the inputs to take up all of their parent container.
There is a portion of a web app that I am writing that is being a particular pain to make look really nice and neat like I want it. I have a button with a fixed width next to a form that contains text, an input text box, and a submit button. I want the width of the input box to resize based on the width of the screen but I don't know how to do without making a piece fall onto the next line.
Here is a fiddle of the problem: http://jsfiddle.net/Yt3V2/
HTML:
<div class="wrapper">
<button type="button" class="new_button">Create New</button>
<form name="input" action="" method="post">
Search:
<input type="text" class="search_input"></input>
<input type="submit" value="Submit"></input>
</form>
</div>
CSS:
.new_button
{
float: left;
min-width: 120px;
}
.search_input
{
width: /* What could go here? */;
}
A lot of suggestions included making a table out of the CSS, which gets me pretty close but the text box will still get cut off: http://jsfiddle.net/G9pDw/
Is there any way to get the input text box to resize dynamically and still fit where I want it to?
According to this question : try changing :
<input type="text" class="search_input"></input>
to
<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></input>
JSFiddle
**Updated*************************
New JSfiddle