Im having a hard time making a element attribute of form:checkboxes work for
css class .row-fluid1
The JSP code is
<h:field path="configuredChannels" required="true"
code="admin.menu.channels">
<div class="row-fluid" data-channel-checkboxes="#" style="row-fluid1">
<form:checkboxes element="div class='span1 row-fluid1'"
items="${channels}" path="configuredChannels" />
</div>
</h:field>
and the CSS code is
<style type="text/css">
.row-fluid1 [class*=span]
{display:block;
width:100%;
min-height:30px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
float:left;
margin-left:3.4482758620689653%;
}
</style>
Please let me know what I am missing
<h:field path="configuredChannels" required="true" code="admin.menu.channels">
<div class="row-fluid" data-channel-checkboxes="#" style="row-fluid1">
<form:checkboxes element="div" cssClass="span1 row-fluid1" items="${channels}" path="configuredChannels" />
</div>
</h:field>
I would expect something like the above to work. You also have a div inside a div, which (if I recall correctly) with bootstrap (due to the row) adds a padding/margin on the left/right.
Related
I added runat="server" to one of the div in my .ascx file.
<div id="logo" runat="server">
This changes the final HTML to below. Notice how the mainheader1 was inserted
<div id="mainheader1_logo">
I read this question https://stackoverflow.com/a/897790/886569 and made this change to the html
<div id="logo" class="logo" runat="server">
This causes the final HTML to be
<div id="mainheader1_logo" class="logo">
In my CSS the logo class is defined like this:
#logo
{
position:absolute;
left:0px;
top:78px;
width:396px;
height:50px;
}
How can i fix this issue in a safe way? I don't want to add the component name in my CSS file as that seems dirty. Also would not want to change the # to a . because that might break lots of other things.
Update your css as below. CSS Selector [id$="logo"] will select every element whose id ends with "logo".
[id$="logo"]
{
position:absolute;
left:0px;
top:78px;
width:396px;
height:50px;
}
I have a textbox I want at the very bottom of the screen at all times. Using the following markup and css, I was able to get it close but there's a weird gap under it and it sits on top of other content.
Markup:
<div class="content">
... stuff here
</div>
<div class="message-text">
<input type="text" placeholder="Start typing to share a message">
</div>
CSS:
.message-text {
position:fixed;
bottom:0px;
width:100%;
}
And here's a visual:
Any help would be awesome.
Just add this property, it'll work.
.message-text {
margin:0px;
}
Hi I have a mediaelements.js video which I want to centre horizontally in its container div, this used to work but I have changed it so that the video is responsive. I am also using Slick on the videoPlayerSlideWrap (it slides through many of the videoPlayerSlide divs, although only one of them is a video the rest are images and the images centre themselves perfectly) so I don't know if slick is interfering with mediaelements.js or something. Thank you in advance.
The players code:
<div class="videoPlayerSlideWrap" id="contentSlide">
<div class="videoPlayerSlide">
<video width="100%" height="100%" style="width:100%; height:100%;" controls id="player1" preload="auto">
<source type="video/youtube" src="<?php print $storyMediaURL; ?>"/>
</video>
</div>
</div>
The CSS:
div.videoPlayerSlide {
width:100%;
min-width:580px;
max-width:940px;
height:529px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}
div.videoPlayerSlideWrap.contentSlide {position:relative;}
div.videoPlayerSlideWrap {
width:100%;
height:529px;
margin-top:0px;
margin-left:0px;
background:#000;
}
EDIT:
Live link of the issue: http://www.umoja.org.uk/fullArticle.php?s=52
There is a conflict between slick.js and your CSS rules. Add the following CSS rule to your main.css, this should correct the problem.
div.videoPlayerSlide.slick-slide {
float:none;
}
I need to display 2 buttons using jquery mobile and the code is here: http://jsfiddle.net/kiranj/rQ3mh/3/
However, I need to make sure
1) first button is left aligned, has a fixed width of 40% and
2) second button is right aligned, has a fixed width of 40%
Seems like I am missing some important thing in achieving this simple looking functionality. Appreciate any help
For reference, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<br/><br/><br/>
<div data-role="fieldcontain">
<input type="submit" name="agree" data-inline="true" data-corners="false" data-theme="b" id="pageptosagree" value="Agree" />
<input type="submit" data-inline="true" data-corners="false" name="notAgree" id="pagetosdonotagree" value="I Do Not Agree" />
</div>
</body>
</html>
Here is the css:
div.divinput div{
overflow: hidden;
}
div.divinput div.buttonleft div{
width:40%;
float:left;
}
div.divinput div.buttonright div {
float:right;
width:40%;
}
.clear {
clear: both;
}
Change CSS in jquery CSS code to:
`.ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c {
float: right; //just add this single property. Everything will work.
font-family: Helvetica,Arial,sans-serif;
text-decoration: none;
}`
You can find the Jquery CSS that you are using here
If you add/overwrite some CSS properties that originally are in jquery.mobile-1.1.0.min.css i think you will get the result you want. Try the below code:
CSS
.ui-btn{
width:40%;
}
.ui-btn-up-c,
.ui-btn-hover-c{
float:right;
}
HTML
<div data-role="fieldcontain">
<input type="submit" name="agree" id="pageptosagree" data-inline="true" data-corners="false" data-theme="b" value="Agree" />
<input type="submit" name="notAgree" id="pagetosdonotagree" data-inline="true" data-corners="false" value="I Do Not Agree" />
</div>
Hope it can help you!
I was just testing this: http://jsfiddle.net/rQ3mh/8/
Please note that this is not a proper way to style it. Just to see if it works
The reason it doesn't work is because once the interface is applied there is no class .buttonleft or .buttonright (Inspect the element to see the class names) Therefore the only way to address those divs is by number. Maybe you should check the documentation around jquery mobile and how to apply class to the interface or at leas inherit it from the <input>
Hope that helps a little.
Given I have the following tags:
<div id="div-one">
<div class="div-two">some </div>
<input type="hidden" value=""/>
<div class="div-two">some </div>
<input type="hidden" value=""/>
<div class="div-two">some </div>
<input type="hidden" value=""/>
</div>
When I try to apply a style to the last "div-two" element using this css syntax:
#div-one div.div-two:last-child { border-bottom:solid 1px #999; }
It doesn't work unless I remove the hidden fields. Any suggestions as to why?
Here's a link to the jsfiddle: http://jsfiddle.net/67qYJ/1/
Using Google Chrome v12.0.742.100
It is NOT an option to place the hidden tags elsewhere
Your selector doesn't work for your current markup because the last child is an input, not a div.div-two.
Is div#div-one only going to contain those two kinds of elements? If so, you can use :last-of-type instead, which picks the last div (though regardless of its class):
#div-one div:last-of-type { border-bottom:solid 1px #999; }
However if your inner div elements have other classes besides .div-two, it will be pretty difficult to choose the last .div-two element. Your given code makes it easy because div and input are distinct element types and only the .div-two class is present.
If you can't use last-of-type like #BoltClock suggested you could just add a second class to the last .div-two in the group.
http://jsfiddle.net/watss/
<div class="div-two last">some </div>
and
#div-one > .div-two.last { border-bottom:1px solid; background:yellow; }
or better yet
#div-one > .last { border-bottom:1px solid; background:yellow; }