I am just attempting inline CSS to get this right and will move it to my "styles" file when finished. What I am attempting should make all the images and radio buttons inline in the surrounding DIV. What I can't do is get them to center height-wise. I tried a margin-bottom on the first radio button as you can see, but it doesn't do anything. What am I doing wrong? Might I need a clearfix somewhere?
<div style="height:30px;">
<input type="radio" name="pay_type" checked="checked" style="margin-bottom:10px;"> <img src="/images/cards.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/pay-pal.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/amazon-payments.png">
</div>
I hope this is what you are looking for
JSFIDDLE
I included another <div> which contains the input elements and tried to vertical-align
this inside the parent <div> . I have given the parent div a height of 600px, you can change it and check.
However I have inline styles still. Change it once it works out for you.
Related
I've been searching for a way to make my 'textarea' go to 100% inside it's column. I've seen a few different ways (none of which I've been able to work) to make a 'textarea' expand to 100% in Bootstrap. I've everything from custom in line CSS styles to using class="form-control col-lg-12" to overwriting Bootstrap's CSS.
Anyone have a working suggestion that would allow for fluid re-sizing?
Here is the code that I have. Right now the width goes to a little past the placeholder text.
<div class="row">
<div class="col-lg-7">
<h2>#Model.EmployeeName</h2>
<h3>Employee #: #Model.EmployeeNumber</h3>
<h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
<textarea rows="2" placeholder="Exception Log comments."></textarea>
</div>
<div class="col-lg-5 text-right">
<div ng-controller='TimeCtrl'>
<h2>{{ clock | date:'fullDate'}}</h2>
<h1>{{ clock | date:'HH:mm:ss'}}</h1>
<input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
</div>
</div>
</div>
I believe bootstrap's own form element class (form-control) is what will make form elements take up the full width of the column they are in.
<textarea class="form-control"></textarea>
class="form-control" must work. If it is not working, it means that somewhere in css file, max-width property is set for text-area which restricts the width. In this case check site.css file and remove max-width property.
Just add a 'form-control' class to textarea. If you are working on a small screen, col-lg-7 and col-lg-5 is cover all window.
And your columns text alings are different. You may see the col-sm-12 in your screen.
<textarea class="form-control" rows="2" placeholder="Exception Log comments."></textarea>
If you just add some custom CSS you can force it to use the entire container width
min-width: 100%
max-width: 100%
However, using the bootstrap class "form-control" also accomplishes this
Simply add form-control class to your textarea if you want 100% width on it, no need to add col-lg-12 because form-control class gives the 100% width of the parent to the element.
<textarea class="form-control" rows="4" placeholder="Exception Log comments."></textarea>
I'm new to this, so I apologice if the questions are stupid.
I have some code I inherited that I need to customize. I have an input defined in my html file:
<div style="display: none;">
<input id="homeIcon" type="hidden" value="true" />
I also have this in my html:
<div id="header">
<div style="float: left;">
<div id="headerTitle">
My Website
</div>
</div>
</div>
In the CSS I want to decide where to place this home icon. I want it to appear in the header to the right of the headerTitle.
Can I use the CSS to move an html element so that it appears in another div?
I managed to change the location within the current div - but not move it to an entirely new place.
Thanks,
Rocky
It's bad idea to relocate elements using CSS (absolute positioning and other stuff that will break your layout).
CSS is just for visual representation of elements, so use HTML to change elements position
<div id="header">
<input id="homeIcon" type="hidden" value="true"/>
<div id="headerTitle">
My Website
</div>
</div>
hello Rocky using css you can not move the element to another div but you can "over lap on the div area" so look like you put them to another div.using position
When I am looking at a checkbox based on Bootstrap 3 class "checkbox" in IE Development Tools the display is set to block, as:
display:block;
When I uncheck the box in front of the display:block it now has cross-over line. Now the checkbox looks exactly how I want. So I need to specify in the inline style the value for display that is equal to the crossed over display:block being unchecked. I tried different values for display in the inline style but nothing works. What do you suggest I set as the value for display in the inline style?
Here is the segment of the code:
<div class="checkbox" style="min-height:20px;padding-top:3px">
<asp:CheckBox ID="chkCloseWo" runat="server" CssClass="checkbox" />
</div>
Here is the HTML code:
<div class="checkbox" style="min-height:20px;padding-top:3px;display:inherit">
<span class="checkbox"><input id="MainContent_chkCloseWo" type="checkbox" name="ctl00 $MainContent$chkCloseWo" /></span>
</div>
I have a set of jQuery Mobile radio buttons with data-type="horizontal and data-mini="true" in the fieldset.
Obviously I'm using this on a mobile site but when the screen size is reduced the radio buttons become stacked on top one another.
How can I prevent this from happening?
Here is an example
http://jsfiddle.net/sg8EJ/3/
<fieldset class="changeFulfilment" data-type="horizontal" data-role="controlgroup" data-mini="true">
<input class="changeFulfillmentInput" type="radio" name="radio-mini" id="radio-mini-1"/>
<label for="radio-mini-1">long Button----------</label>
<input class="changeFulfillmentInput" type="radio" name="radio-mini" id="radio-mini-2" />
<label for="radio-mini-2">short</label>
</fieldset>
Give its container div a min-width with css. This will solve your problem.
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.