In HTML/CSS if you want an absolutely positioned element to expand wider than its parent to fit all its text in one line, you can use white-space: no-wrap
.parent {
position: relative;
width: 100px;
}
// text content of this node is wider than 100px
.child {
position: absolute;
white-space: nowrap;
}
The child element will grow just wide enough to fit all the text in one line. There doesn't be a way to do this with Text components in React Native. You have to specify a fixed number width or the Text component will max out at the parent width. Is there a way?
Figured out that the answer is quite simple.
Text wrap can be specified with the <Text> component's built-in interface called numberOfLines, instead of CSS.
<Text numberOfLines={1}>Foobar</Text>
The documentation for this can be found here.
Related
I have a div, that has full width (100vw) and used a translate in order to place it centered. This is because it’s parent has no full width. If I now add a child with a background image and background-attachment: fixed;, this background image is misplaced in Safari on macOS.
It seems to me that the background image is placed as if the translate on its parent is not active (and thus shows only the right half of the image, since the left part is hidden.
.alignfull {
left: 50%;
max-width: none;
position: relative;
transform: translate(-50%);
width: 100vw;
}
.background {
background: url("https://via.placeholder.com/1800x800") fixed center center / cover;
height: 400px;
width: 100%;
}
<div class="alignfull">
<div class="background">
Test
</div>
</div>
I already tried to change many things but don’t get it working. It seems to be a bug in Safari, but hopefully anyone has an idea how to fix it without waiting for a fix from Apple.
Since the .alignfull is used in rather many places, it’s currently no option to change its CSS.
I am working on location picker inside modal popup using Bootstrap3 CSS and JQuery location picker. Normally Bootstrap3's modal body size expands if content needs it.
What I need to do is to force modal to have relative to screen size because initial DOM content is empty and is filled via JQuery (Google maps initialization).
The problem is, that when setting relevant divs to have style= height:100%, body is overlapping its parent with the exact height of its sibling modal headers div.
How to prevent such behaviour and make modal body fill free space and not overlap parent component?
Here is working example
https://jsfiddle.net/qfqjq82r/
Ok after some consulting I have found the workaround/answer.
The trick was to threat divs like table and table rows. After adding some additional styling, dialog looks exactly like it should.
https://jsfiddle.net/qfqjq82r/7/
And the css:
#location-picker .modal-content {
display: table;
width: 100%;
}
#location-picker .modal-dialog{
width: 80%;
height: 85%;
}
#location-picker .modal-body{
height: 100%;
display: table-row;
width: 100%;
}
#location-picker .row{
padding:15px;
}
.full-height{
height: 100%;
}
In one of our internal angular applications, there is a license text box displayed. Since there is a lot of text inside, the license box, represented as a div element, has a scroll.
Question: How to test whether an element has a scroll or not in protractor?
Here is an HTML representation of the element:
<div class="login-disclaimer-text-canvas ng-binding" ng-bind-html="disclaimer">
Copyright © Company, 2015. All Rights Reserved.
...
</div>
where login-disclaimer-text-canvas has the following CSS styles defined:
.login-disclaimer-text-canvas {
height: 50px;
width: 100%;
overflow-y: auto;
background-color: #eee;
color: #3E6372;
padding: 4px;
font-size: 10px;
}
The trick (originally proposed here) is to compare height property:
The height CSS property specifies the height of the content area of an
element. The content area is inside the padding, border, and margin of
the element.
with scrollHeight:
The Element.scrollHeight read-only attribute is a measurement of the
height of an element's content, including content not visible on the
screen due to overflow. The scrollHeight value is equal to the minimum
clientHeight the element would require in order to fit all the content
in the viewpoint without using a vertical scrollbar. It includes the
element padding but not its margin.
If scrollHeight is greater than height - then an element has a scrollbar.
In protractor we need to compare the resolved promises of getAttribute('height') and getAttribute('scrollHeight'). Let's make a reusable function and resolve one of two promises via then() letting expect() to resolve the second:
function elementHasScroll(element) {
element.getAttribute('height').then(function (height) {
expect(element.getAttribute('scrollHeight')).toBeGreaterThan(height);
});
};
where toBeGreaterThan() handy matcher is a part of jasmine-matchers third-party.
I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
You can see it here
CSS:
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
This issue happens due to a reported bug in Webkit:
Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly
This seems to be fixed for Chrome by now, but not for Safari.
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
div {
position: absolute;
}
Demo
Try before buy
Similar problem appears on Safari if parent element uses flexbox properties - container won't take 100% of the height.
Another solution (besides position: absolute;) would be to use vh (viewport height) units:
div {
height: 100vh;
}
How to make DOJO CheckedMultiSelect text wrapped and how to enable horizontal scrolling in the same control, if the select text is larger that the control size
All you need is to overwrite CSS rules. See working example at jsFiddle: http://jsfiddle.net/phusick/qrSWu/
For both of your needs you need to limit the width of dojox/form/CheckedMultiSelect. It can be done adding narrow class to the markup <select data-dojo-type="dojox/form/CheckedMultiSelect" class="narrow"> or JavaScript (via className):
.narrow .dojoxCheckedMultiSelectWrapper {
width: 100px;
}
For horizontal scrolling add also scroll class (class="narrow scroll"):
.scroll .dojoxCheckedMultiSelectWrapper {
overflow-x: scroll;
}
For wrapping the option text add wrap class (class="narrow wrap"):
.wrap .dojoxMultiSelectItemLabel {
white-space: normal;
}
.wrap .dojoxMultiSelectItemBox {
vertical-align: top;
margin-top: 3px;
}
Depending on the order you include stylesheets you may need to add !important.