I want to somehow make those boxes and use buttons in it but I am unable to do so please help me doing it.
I tried using opacity but it clear button input and was not what I was excepting!
Bootstrap is a CSS framework you can use to easily code forms and other layout
https://getbootstrap.com/docs/4.0/components/forms/
there are other wireframes too such as Bulma but I find Bootstrap the easiest to work with
I feel those white boxes have a transparent background color and a transparent border color. So, the CSS for those boxes will go something along these lines:
background-color:rgba(255,255,255,0.2);
border:2px solid rgba(255,255,255,0.6);
I am not sure I understand your question, do you want buttons within the white input boxes? It isn't possible to have a button within an input.
To create those white input boxes, you need to use <input type="text"> for small text inputs and to create the larger inputs like Address you want to use CSS to size the input box bigger.
Of course to style those input boxes white and with curved edges you'll need to add a class="your-css-class" tag-helper within the input tag. Said CSS class will need to have color:white; and border-radius:5%; for example to add the styling.
To create that default text in the input boxes you can use the tag-helper value="Enter your adress here..." in your <input> tag.
To get each input label and input box within those green boxes you should use flexbox. This is an easy framework, read more here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Those green boxes can each be a <div> tag with the label and input tags within it, and all the green boxes together should be encompassed in a <div> tag. The individual <div> tags for each green box can share a class that styles them using flexbox properties like flex-direction:row; to get the label and input next to each other horizontally. Lastly, the <div> tag encompassing all of those smaller ones can be styled with the flexbox property flex-direction:column; to get the green boxes to show vertically.
To add flexbox add the CSS property display:flex; to your overall <div> tag encompassing all green boxes/<div>s and also the individual <div> tags representing the individual green boxes.
Hope this helps.
Related
In this page:
http://getbootstrap.com/components/#input-groups-buttons
If you change the Go! button to a label (with the Chrome inspector) you'll notice that the Go! button is not longer on top of the input field:
(Instead of the borders to be one on top of the other they are side by side.)
Why is this and how to make the two elements to be one on top of another?
Bootstrap applies max-width:100% to a label. That shrinks its border box (box-sizing:border-box is applied throughout) such that that fits inside its containing block (its parent span element), whose width is reduced by one pixel because that is determined by the fact that it must contain the margin box of the Go! button/label which has margin-right:-1px applied. The span is the button/label's containing block because its input-group-btn class makes it display:table-cell
So to get the same effect with a label, just set label { max-width:none; } In practice, you will probably want a more specific selector.
Putting a label on top of an input isn't the best idea, it would be better to split them up and have them float next to each other. This question answered here may help. This could also be adjusted using the z-index in the style portion of each div. As to answer you title in why this happens, i'm not entirely sure...
I looked into this post since it's exactly what I am trying to achieve: Radio Button and Label to display in same line.
Yet the struggle continues... Here's the layout I have (first 3 columns) and I expect to have (last two columns). Please ignore the outline boxes. Those were drawn just to mark the div.
I have two to three radio buttons that needs to be in the same line, as per the image shown below. These radio buttons their title should be within one div and nested inside a main div that contains the radio buttons, and the other html selector (e.g. Capacity) I tried giving enough width to this div, so radio buttons can sit horizontally in one line. But it doesn't work.
jsFiddle for html and css.
After removing float:left, width, height from said classes. As you see the Select button no longer aligns.
Remove float: left; from .fl1 em
And remove width and height from #bookingForm input, #bookingForm textarea will solve your issue.
Check Fiddle Here.
Remove CSS height and width property from this style.
#bookingForm input, #bookingForm textarea{ }
Comment the css - height and width of #bookingForm input, #bookingForm textarea
I'm trying to created a staircase effect with text on my page. I've wrapped a <p> element inside a <section>. The section has the following styling:
section{
transform:rotate(-37.6deg);
-ms-transform:rotate(-37.6deg);
-moz-transform:rotate(-37.6deg);
-webkit-transform:rotate(-37.6deg);
width: 200px;
}
I'd like the text in my <p> to be constrained to the rotated box I've created, and then be able to rotate the text so that each line is horizontal, stepping down along the line of the <section> box.
This is the link to the page, so you can have a better idea what I'm trying to accomplish.
You can't achieve your goal with this approach because CSS Transformations are rendered by GPU after DOM rendering, and for this reason (for example) transformed elements don't affect others elements positions and sizes.
To achieve your goal you should use a jQuery solution, like this "http://www.csstextwrap.com/"
i'm trying to create a row with buttons, where the content inside the button is vertically aligned to the middle of the button. All buttons should should be the same height.
problem is when an image is used inside a button.
i made a small example:
http://jsfiddle.net/L2L2G/
why is the the third button not aligned with the other 2 ? I think that the buttonheight should be enough for the small content?
If I use vertical-align:middle; instead of absmiddle, it works fine in Chrome.
AFAIK the latter is not a valid value for vertical-align.
Demo
I have an input box, and I want some nice light grey text right below it (1 line instruction).
As of now the text is sitting a lower than I want in relation to the textbox (which is above it).
I am doing a clear:both, and if I remove it the next is all the way to the right of the input box.
What is wrong here?
Your HTML tags (for the text input and for the paragraph of text below it) all have default margin and padding. Probably the issue can be resolved by reducing the margin-bottom attribute on the text input as well as the margin-top on the paragraph. Here's some example code.
CSS:
.text_input_style {margin-bottom:0;}
.help_text_style {margin-top:0;clear:both;}
HTML:
<input type="text" value="default value" name="text_input" class="text_input_style" />
<p class="help_text_style">Help text here.</p>
Obviously, you don't have to use classes (you could just attach to the HTML element and/or IDs), but this is the idea.
Bottom line: adjust margin-bottom on the input and margin-top on the help text.
Well it all depends on what HTML tags your placing the text within.
Each element has a default behaviour.
A DIV element will display as a block. As such it will display on the following line in the natural flow of the HTML in the page. It will also cause all the HTML that comes after it to be displayed below it.
A SPAN element will not be displayed as a block. In fact it provides no visual change by itself with no CSS applied to it. A SPAN element is simply displayed inline and everything just flows around it like normal.
You can use CSS styles to modify the layout behaviour of HTML elements.
For example, you can specify that a DIV element be displayed left or right of the HTML content by using float:left or float:right. You could then use the CSS clear:both to specify that an element should be displayed below all floating content.
So, in your case, if you remove the clear:both style, then the element will no longer be displayed below floating elements and this will cause your elements to be rearranged.
-Frinny
You can make it higher by applying this:
.class { position: relative; top: -5px; }
or you can reduce the line height:
.class { line-height: 10px; }
You have to have the clear: both in order to make it go to the next line, but because it is a new line, the line-height property applies. Reducing the line height should make it higher, and if it isn't close enough, try positioning it relatively.
You probably have padding on the "instruction". Relevant html and css maybe?