Recent upgrade to Bootstrap 3 on a Rails app. SimpleForm text box and also other form inputs are too large - they are erroneously full-page in length. The app does have responsive design, and the form input boxes do resize.
I'd like to limit the form input size to 50% instead of full page.
I did add this initializer gist https://gist.github.com/tokenvolt/6599141 but it did not seem to have an effect.
I am unfamiliar with the Bootstrap3/Simpleform2.1.1 conflicts.
I adjusted the width to 50% in the application.css.scss, but that did not make a clean change
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
margin-bottom: 15px;
#include box_sizing;
}
By length do you mean width? If you don't want the form to be too wide you could divide the page into columns and then put the form into a smaller column.
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<%= simple_form-for...
</div>
</div>
Bootstrap uses a gridsystem that divides the page into 12 columns. if you just put the form on, it will take up all 12 columns (the whole page) so you need to specify how many columns you want the form to take up. Here's a post that really helped me understand the new gridsystem: http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/
Related
Does anyone maybe have an example of a LitRenderer with multiple lines of potentially wrapped text in a vaadin grid please?
All the examples in the documentation just have a bold line and a small single line of text underneath. I have tried to create a bold line and then a multi line text paragraph underneath it, but I cant get the grid to render this properly.
The text should ideally change width responsively with flex grow, wrap accordlingly and potentially truncate if no space is available.
Edit:
I think I got this working as follows:
grid.addColumn(TemplateRenderer.<SubProductTypeOption>of("""
<vaadin-vertical-layout style="line-height: var(--lumo-line-height-m); height: 175px; cursor: pointer;">
<span> [[item.name]] </span>
<span style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color); white-space:normal;">[[item.description]]</span>
</vaadin-vertical-layout>
""")
.withProperty("name", SubProductTypeOption::getName)
.withProperty("description", SubProductTypeOption::getDescription)
).setFlexGrow(1);
Seems to work so far...
I'm looking for styled or colored horizontal lines, preferably with success, primary, warning classes.
A similar concept to colored links.
I couldn't find this topic on Bootstrap's website.
I found a few working solutions referring to Bootstrap v4.
In my case:
<div class="divider py-1 bg-success"></div>
It works, but I guess it's not the best practice...
Yes it does. Part of the Reboot, and is present in both Bootstrap-reboot.css & Bootstrap.css. It defines the <hr> as:
hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: 0.25;
}
Also, Bootstrap 5 has moved a lot of its UI control over to utility classes... that gives you a far richer control of your UI. For example, if you wanted a "danger" / red colour <hr> you could use:
<hr class="bg-danger border-2 border-top border-danger">
Have a look at the Utility classes in their docs.
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-1 border-bottom"></div>
This should work
Using hr with the spacers helped me. Example horizontal rule that has a bit of space on top and bottom:
<hr class="mt-1 mb-1"/>
Okay so I have these divs called "latestWorkTitle" which are positioned absolute and are placed on top of the corresponding image to show its title.
However, I can't get this properly to work. The titles don't show at the corresponding image and when I resize my browser window everything shifts and so on.
I tried creating this jsbin http://jsbin.com/uhoxef/1 with a part of my code to illustrate how it should look like and what is going wrong. Even all the titles go on top of each other in the code while they should be on top of the corresponding images... I'm just basically totally lost at this.
I think the HTML was confusing itself. I also made the thumbnail class the relative layer. HTML renders as we read, from left to right. So putting the title before the image causes the image to show on top and cover the text.
HTML:
<div class="thumbnail">
<a href="portfoliodetail.php?id=10">
<img src="http://www.hlnarchitects.com/img/plain_red.png" />
<div class="latestWorkTitle">title1</div>
</a>
</div>
CSS:
.thumbnail {
position: relative;
overflow: hidden;
float: left;}
.portfolioOverview img {
width: auto;
height: auto;}
.latestWorkTitle {
text-align: right;
font-size: 11px;
text-transform: uppercase;
background: yellow;
position: absolute;
padding: 6px;
top: 0;
left: 0;}
For this to work, each thumbnail class needs to be the relative start for each individual layer. So the thumbnail class is set to relative.
Any object set to absolute (.latestWorkTitle) within this layer will start from the top and left position of the relative object.
You'll need to adjust some details to taste but I hope this helps.
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
Using iOS 4.2.1 on iPad/iPhone, when I view a specific web page with type="number" for a text field, the text input space is slightly shorter than when it's type="text". And when I enter 3 digits, the first one gets cutoff, while it does not get cutoff with type="text". This problem does not happen on iOS 3.x on iPad/iPhone. The input field input area is identical, and it works fine.
Has anyone noticed this problem? Is there anything I can do to fix it? Thanks.
It's probably to do with the device browser's default style sheet. If you just apply styles the same styles to the text and number input fields it should render the same.
input[type=text], input[type=number] {
width: 100px;
padding: 1px 0;
...etc...
}
You need to set the unit when styling width and height.
<input syle="width: 45px; padding: 1px 0;" name="mname" type="text" value="" autofocus />
or preferred:
input[type=number] {
width: 45px;
}