I have a test label in a col-6 div. the text should have the width of the div with col-6 class.
this is how it looks now
how can i make the text inherit the div's width?
<div class="col-md-6">
<div class="form-group">
<div>
<input type="checkbox"/>
<div class="state p-danger">
<div [inlineSVG]="'assets/svg/accept.svg'"></div>
<label>I will also be available to meet during the event so list me with the available resources</label>
</div>
</div>
</div>
</div>
Put white-space: nowrap in your .state.p-danger element. This will make texts getting outside of bounds go the next line instead.
Related
I'm trying to lay out a grid of checkboxes in CSS, using Tailwind CSS. The basic structure is this:
<div class="grid sm:grid-cols-3 gap-4">
<div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
...
</div>
So I have an outer div which is the grid, then a series of "content" divs. The first content is 2 lines high (2 checkboxes). The second is one line high (one checkbox).
My problem is that the checkbox in the second grid box is aligned to the top of the box, and I want it centred vertically. I've added background colours so I can see that the div spans the whole height of the previous grid box, but I can find no way of centring the checkbox in the containing div.
Can anyone tell me how to get the effect I want? And more so, can someone explain to me how the box model works in a way that explains why it's not doing what I want? Ideally, I'd like to be able to do this with Tailwind, for consistency, but raw CSS would be OK as well.
Align your items to the center by applying the class items-center to your grid (this method will align all your items and might affect your other child elements in an undesired manner later on when you add more elements to the grid).
<div class="grid gap-4 sm:grid-cols-3 items-center">
You can also apply either grid or flex to the parent's container, which you want to center vertically (using items-center):
<div class="flex items-center">
<label for="-exact">
<input type="checkbox" id="-exact" value="-exact"> -exact
</label>
</div>
<-- or -->
<div class="grid items-center">
<label for="-exact">
<input type="checkbox" id="-exact" value="-exact"> -exact
</label>
</div>
I'm not sure if it exactly answers your question, but the reason the elements stick to the top-left side is that it's still displayed as a block. Changing the parent to a grid doesn't change the display type of child elements.
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
As far as I understood your error, the second div element positions on the top of the whole grid element but you want it to be in the center. Check this snippet out if that's the issue: (I have vertically centered the second grid column)
<!doctype html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Main grid element with 2 child divs-->
<div class="grid grid-flow-col gap-4">
<!--First child div with 2 sub child div displayed as columns-->
<div class="flex flex-col">
<div class="p-5 bg-yellow-300">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
<div class="p-5 bg-red-300">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
<!--Second child with 1 div element, centered in its place-->
<div class="p-5 bg-green-300 h-full flex items-center">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
</body>
</html>
Explanation: To place elements in center (or change their position), you have to give it a display name e.g. block, flex, grid etc. Then there are couple ways you could go and center/position your element. The most efficient one would be to use the relevant styles related to the display name. For example:
For Flex model, you'd use justify-content: center which in Tailwind would be justify-center classname to center an element vertically. And to horizontally center it, you'd use align-items: center which in Tailwind would be items-center classname.
For Grid model, you'd use place-items: center which in Tailwind would be place-items-center classname to center an element vertically & horizontally.
These are a bit different for each display property. You can look that up on google if you don't know. Hope that helps.
I am attempting to use a basic bootstrap template, I have added a:
<div class="container"><div class="row">
<div class="col-md-6">
<p>This is the text I would like to align left</p>.
</div>
</div>
However the bootstrap template I have used has text center align - how do I add a rule just for this paragraph to align left ? (where and what would it be called?)
I should add that I have one css document for the website and can't add to the main class - I need to make a rule just for this area.
<div class="container">
<div class="row">
<div class="col-md-6">
<p class = "text-left">This is the text I would like to align left</p>
</div>
</div>
</div>
Use this it will align the left side. (class = "text-left" on the paragraph tag).
You forgot to close your row div also "text-left" class should be used there like this:
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="text-left">This is the text I would like to align left</p>.
</div>
</div>
</div>
I have a div with id=group1port.
Inside this div are multiple divs, one being id group1porteq.
I am using the equal heights to make the div's the same height however, with what I have, it currently changes the heights of all the div's, when I only want it to effect the div group1porteq. I have tried ('#group1port div.group1porteq') but this doesn't work. I have also tried removing the "div" completely and that also doesn't work. Also have tried changing it to ('#group1porteq div') and then that just makes all the div's inside that div equal.
The "div class="portlet light bordered" id="group1porteq"" is the two div's i need to have equal height
I have div's that all have multiple div's inside, and I am trying to just get equal height for 1 div. Here is a sample of the script.
<script>
if($(window).width() > 800){
$('#group1port div').equalHeights();
}
</script>
Here is a sample of the code
<div class="row" id="group1port">
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
</div>
I'm not sure I fully understand what div's you're trying to find, but this find's both 'group1porteq' divs nested within the 'group1port' div.
$('#group1port').find('#group1porteq').each(function() {
// Do equal height stuff
});
I don't know what equalHeights(), but it sounds like your issues are all related to the selectors. You can find a full list of selector options here https://api.jquery.com/category/selectors/
You have a duplicate id: id="group1porteq" on two divs. You cannot have an id be the same on a page. Try changing it to a class as a first step. Can you add some CSS to this bit of code? it would seem that you are trying to break a table apart. Try adding "display: block" to the class: class="group1porteq" once you change that and see if it breaks the table model so you can get individual heights again.
I'm having issues with my divs appearing outside of their parent div. This only happens when the window is on a computer in full screen mode, but when the screen is made smaller to a phone/tablet size the divs function how they should. In this codepen I used border colours to help distinguish from when the divs are outside of the parent div to when they're inside the parent div. http://codepen.io/MarkBond/pen/LVKPjG?editors=110
fullscreen
phone view
HTML
<div class="ibox-content" id="ibox-9">
<!--DIV BODY-->
<div class="content active" id="budgetSelection">
<div class="col-lg-6">
<label>Budget Scenerio</label>
<div class="checkbox">
<label><input type="checkbox" />50mill</label>
</div>
<div class="checkbox">
<label><input type="checkbox" />100mill</label>
</div>
<label>Table Views</label>
<div class="checkbox">
<label><input type="checkbox" />Table1</label>
</div>
</div>
<div class="col-lg-6">
<div class="radio">
<label><input type="radio" />Show Treatments</label>
</div>
<div class="radio">
<label><input type="radio" />Show Years</label>
</div>
</div>
</div>
</div>
you can give a container-fluid class to your div body.
Bootply Link
<div class="content active container-fluid" id="budgetSelection">
you can also go for clearfix which fixes the problem too.
Your divs are floated on the full screen view, so the parent container needs some sort of clearfix applied to it. You should be able to just add the "clearfix" class if you're using bootstrap.
<div class="content active clearfix" id="budgetSelection" ng-controller="InfoController as infoCtrl">
Give width 100% to class col-lg-6. Currently it is 50% for #media (min-width: 1200px).
.col-lg-6 {
width: 100%;
}
I have the following simple HTML and styling (http://jsfiddle.net/ZLNvv/).
<DIV>
<BUTTON class="button"></BUTTON>
<INPUT class="textbox" type=text>
</DIV>
.textbox{vertical-align:middle}
.button{float:left;width:75px;height:75px}
The button is oversized to show clearly that the input box isn't obeying vertical-align:middle. If I remove the float:left styling on the button, the vertical aligning works. Is there any way to combine the two?
I've given the most minimal example which shows the problem, a more accurate example of what I am trying to achieve is below (http://jsfiddle.net/peerz/).
<DIV>
<DIV>Header</DIV>
<DIV class ="lineDiv">
<Div class="subHeaderDiv">
<BUTTON class=button></BUTTON>
<div class="subHeaderText"> Subheader 1</div >
</Div>
<INPUT class="textbox" type=text>
</DIV>
<DIV class ="lineDiv">
<Div class="subHeaderDiv">
<div class="subHeaderText"> Subheader 2</div >
</Div>
<INPUT class="textbox" type=text>
</DIV>
</DIV>
.lineDiv{overflow:auto}
.subHeaderDiv{float:left;width:50%}
.subHeaderText{float:right;vertical-align:middle}
.textbox{float:left;height:30px;vertical-align:middle}
.button{float:left;width:75px;height:75px}
Thank you for any help.
If you want to just put the two ones side by side, try display: inline-block instead of float.
this is the default behavior for floats, the floated element will try to go up and left/right as much as possible, hence vertical align will not work. display:inline-block or margins is the way here like panos and bigfatpig said.
Try this :
<div>
<input type='button' class="button" value='press'/>
<input class="textbox" type='text'/>
</div>
<style type='text/css'>
.textbox{vertical-align:middle;display:inline-block;}
.button{width:75px;height:75px;display:inline-block;}
</style>
it should do what you want.